+
)
diff --git a/front/src/component/Modal.js b/front/src/component/Modal.js
index 4d7b833..4e4f525 100644
--- a/front/src/component/Modal.js
+++ b/front/src/component/Modal.js
@@ -1,9 +1,9 @@
import { useEffect, useCallback, useState, useRef } from 'react';
-import html2canvas from '../../node_modules/html2canvas/dist/html2canvas.js';
+import html2canvas from 'html2canvas';
+import { FiDownload, FiCamera, FiX } from 'react-icons/fi';
import Messenger from '../random-text.js';
const Modal = (prop) => {
- let csv
const [blocktitle, setBlocktitle] = useState(''),
[blockcount, setBlockcount] = useState(''),
[blockinstance, setBlockinstance] = useState(''),
@@ -11,33 +11,54 @@ const Modal = (prop) => {
[blocklist, setBlocklist] = useState([]),
hrefCanvas = useRef(null),
refList = useRef(null),
+ csvRef = useRef(''),
+ currentDomain = prop.domain?.domain ?? 'instance',
loading = () => {
- document.querySelector('.loader-content').style.display = 'initial'
+ const loader = document.querySelector('.loader-content')
+ if (loader) {
+ loader.style.display = 'initial'
+ }
+ },
+ stopLoading = () => {
+ const loader = document.querySelector('.loader-content')
+ if (loader) {
+ loader.style.display = 'none'
+ }
},
closeModal = event => {
if (event.target.classList.contains('modal') || event.target.classList.contains('closemodal')) {
- document.querySelector('.modal-content').style.animationName = 'animatebottom'
+ const modalContent = document.querySelector('.modal-content')
+ if (modalContent) {
+ modalContent.style.animationName = 'animatebottom'
+ }
}
},
animationEnd = event => {
if (event.animationName === 'animatebottom') {
- document.querySelector('.modal').style.display = 'none'
+ const modal = document.querySelector('.modal')
+ if (modal) {
+ modal.style.display = 'none'
+ }
}
},
capture = useCallback(async () => {
const canvas = await html2canvas(hrefCanvas.current, { useCORS: true }),
- capture = document.querySelector('.capture')
- capture.download = 'fediblock-' + Date.now() + '.png'
- capture.href = canvas.toDataURL('image/png', 1.0)
- capture.dispatchEvent(new MouseEvent('click'))
- }),
- download = () => {
- const download = document.querySelector('.download')
- if (csv.split('\n').length > 2) {
- download.href = window.URL.createObjectURL(new Blob([csv], { type: 'text/csv' }))
- download.download = 'fediblock-' + prop.domain.domain + '.csv'
+ captureLink = document.createElement('a')
+ captureLink.download = 'fediblock-' + Date.now() + '.png'
+ captureLink.href = canvas.toDataURL('image/png', 1.0)
+ captureLink.click()
+ }, []),
+ download = useCallback(() => {
+ if (csvRef.current.split('\n').length > 2) {
+ const blob = new Blob([csvRef.current], { type: 'text/csv' }),
+ url = window.URL.createObjectURL(blob),
+ anchor = document.createElement('a')
+ anchor.href = url
+ anchor.download = 'fediblock-' + currentDomain + '.csv'
+ anchor.click()
+ window.URL.revokeObjectURL(url)
}
- },
+ }, [currentDomain]),
reverse = useCallback(async content => {
if (content && content.length > 0) {
loading()
@@ -49,11 +70,16 @@ const Modal = (prop) => {
setBlockinstance('ing ' + content)
setBlocktook('took ' + res.took + 'ms')
setBlocklist(res.instances)
- document.querySelector('.loader-content').style.display = 'none'
- document.querySelector('.modal-content').style.animationName = 'animatetop'
- document.querySelector('.modal').style.display = 'block'
+ const modalContent = document.querySelector('.modal-content')
+ const modal = document.querySelector('.modal')
+ if (modalContent) {
+ modalContent.style.animationName = 'animatetop'
+ }
+ if (modal) {
+ modal.style.display = 'block'
+ }
if (prop.matrix === 'on') {
- var walker = document.createTreeWalker(refList.current, NodeFilter.SHOW_TEXT)
+ const walker = document.createTreeWalker(refList.current, NodeFilter.SHOW_TEXT)
while (walker.nextNode()) {
if (walker.currentNode.textContent.length > 1) {
new Messenger(walker.currentNode)
@@ -61,13 +87,14 @@ const Modal = (prop) => {
}
}
}
+ stopLoading()
}
- }),
+ }, [prop.matrix]),
listblock = useCallback(async (domain) => {
const result = await fetch('/api/detail/' + domain),
res = await result.json()
if (res.blocks && Array.isArray(res.blocks)) {
- csv = '#domain,#severity,#reject_media,#reject_reports,#public_comment,#obfuscate\n'
+ csvRef.current = '#domain,#severity,#reject_media,#reject_reports,#public_comment,#obfuscate\n'
setBlocktitle('Blocked List')
setBlockcount(res.blocks.length)
setBlocktook('took ' + res.took + 'ms')
@@ -76,7 +103,7 @@ const Modal = (prop) => {
+ `Last update: ` + (new Date(res.last)).toLocaleString())
setBlocklist(res.blocks)
if (prop.matrix === 'on') {
- var walker = document.createTreeWalker(refList.current, NodeFilter.SHOW_TEXT)
+ const walker = document.createTreeWalker(refList.current, NodeFilter.SHOW_TEXT)
while (walker.nextNode()) {
if (walker.currentNode.textContent.length > 1) {
new Messenger(walker.currentNode)
@@ -84,16 +111,23 @@ const Modal = (prop) => {
}
}
} else {
- var a = document.createElement('a')
- a.href = '/api/detail_api/' + domain
- a.title = 'API info for ' + domain
- a.target = '_blank'
- a.dispatchEvent(new MouseEvent('click'))
+ const link = document.createElement('a')
+ link.href = '/api/detail_api/' + domain
+ link.title = 'API info for ' + domain
+ link.target = '_blank'
+ link.dispatchEvent(new MouseEvent('click'))
}
- document.querySelector('.loader-content').style.display = 'none'
- document.querySelector('.modal-content').style.animationName = 'animatetop'
- document.querySelector('.modal').style.display = 'block'
- })
+ stopLoading()
+ const modalContent = document.querySelector('.modal-content')
+ const modal = document.querySelector('.modal')
+ if (modalContent) {
+ modalContent.style.animationName = 'animatetop'
+ }
+ if (modal) {
+ modal.style.display = 'block'
+ }
+ }, [prop.matrix])
+
useEffect(() => {
if (prop.domain && prop.domain.domain.length > 0) {
if (prop.reverse) {
@@ -102,38 +136,63 @@ const Modal = (prop) => {
listblock(prop.domain.domain)
}
}
- }, [prop.domain, prop.reverse])
+ }, [prop.domain, prop.reverse, listblock, reverse])
+
return (
-
closeModal(e)}>
-
animationEnd(e)} ref={refList}>
+
+
-
closeModal(e)}>×
-
📷
- {!prop.reverse ?
⇩ : ''}
-
{blocktitle}
+
+
{blocktitle}
+
+ {blockcount} public instances block
+
+
{blocktook}
+
+
+
+ {!prop.reverse && (
+
+ )}
+
+
-
- {blockcount} public instances are block
-
{blocktook}
-
-
{prop.reverse ? blocklist.map((instance, index) => {
- return (- {index + 1}. {
- prop.setSearch(instance.instance)
- document.querySelector('.modal-content').style.animationName = 'animatebottom'
- }}>{instance.instance}{instance.comment ? ' - ' + instance.comment : ''}
)
- }) : blocklist.map((r, i) => {
+ {prop.reverse ? blocklist.map((instance, index) => (
+ -
+ {index + 1}. {instance.comment ? ' - ' + instance.comment : ''}
+
+ )) : blocklist.map((r, i) => {
if (r?.domain) {
- csv += !r.domain.match(/\*/) ? r.domain + ',' + (r.severity ? r.severity : '') + ',False,False,' + (r.comment ? '"' + r.comment + '"' : '') + ',False\n' : ''
- return (- {i + 1}. {
- prop.setSearch(r.domain)
- document.querySelector('.modal-content').style.animationName = 'animatebottom'
- }}>{r.domain}{r.severity ? ' - ' + r.severity : ''}{r.comment ? ' - ' + r.comment : ''}
)
+ csvRef.current += !r.domain.match(/\*/) ? r.domain + ',' + (r.severity ? r.severity : '') + ',False,False,' + (r.comment ? '"' + r.comment + '"' : '') + ',False\n' : ''
+ return (
+ -
+ {i + 1}. {r.severity ? ' - ' + r.severity : ''}{r.comment ? ' - ' + r.comment : ''}
+
+ )
}
+ return null
})}
-
-
+
)
diff --git a/front/src/component/Scan.js b/front/src/component/Scan.js
index acc3ba2..d449b2e 100644
--- a/front/src/component/Scan.js
+++ b/front/src/component/Scan.js
@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from 'react';
+import { FiCpu } from 'react-icons/fi';
const Scan = () => {
const [scan, setScan] = useState('Scanning...'),
@@ -9,7 +10,7 @@ const Scan = () => {
source.onmessage = event => {
if (event.data) {
if (event.data.length > 0) {
- setScan('Async Scanning' + event.data)
+ setScan('Async Scanning ' + event.data)
} else {
setScan('Async Scanning...')
}
@@ -19,12 +20,22 @@ const Scan = () => {
console.error(error)
}
load.current = true
+ return () => {
+ source.close()
+ }
}
- })
+ }, [])
return (
-
- {scan}
-
+
+
+
+
+
Live scan
+
Federated monitor
+
{scan}
+
)
}
diff --git a/front/src/component/Title.js b/front/src/component/Title.js
index 17488f0..0a699c0 100644
--- a/front/src/component/Title.js
+++ b/front/src/component/Title.js
@@ -1,12 +1,24 @@
import { useCallback } from 'react';
+import { FiRefreshCcw } from 'react-icons/fi';
const Title = () => {
const click = useCallback(() => {
window.location.hash = ''
window.location.reload(false)
- })
+ }, [])
+
return (
-
+
+
+
Fediverse safety toolkit
+
Fediblock Instance Φ
+
Monitor instance health, blocks, and metrics in a clean, real-time dashboard.
+
+
+
)
}