import React, { Fragment, useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import Options from '../options'; import { StolenData } from './stolen-data'; import { getshorthost, useEmitter } from '../util'; import { getMemory } from '../memory'; import InfoCircleIcon from '../assets/icons/info_circle_outline.svg'; import SettingsIcon from '../assets/icons/settings.svg'; import TrashIcon from '../assets/icons/trash_full.svg'; import MailIcon from '../assets/icons/mail.svg'; import ShortLeftIcon from '../assets/icons/short_left.svg'; import CloseBigIcon from '../assets/icons/close_big.svg'; import CookiesIcon from '../assets/icons/cookie.svg'; async function getCurrentTab() { const [tab] = await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT, }); return tab; } import './global.scss'; import './sidebar.scss'; const Sidebar = () => { const [origin, setOrigin] = useState(null); const [minValueLength, setMinValueLength] = useState( localStorage.getItem('minValueLength') === null ? 7 : (localStorage.getItem('minValueLength') as unknown as number) ); const [cookiesOnly, setCookiesOnly] = useState(false); const [stolenDataView, setStolenDataView] = useState(true); const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = useState(false); const [counter, setCounter] = useEmitter(getMemory()); const [marksOccurrence, setMarksOccurrence] = useState(false); const [warningDataDialogAck, setWarningDataDialogAck] = useState( localStorage.getItem('warningDataDialogAck') === null ? true : localStorage.getItem('warningDataDialogAck') == 'true' ? true : false ); const [logoVisibility, setLogoVisibility] = useState( localStorage.getItem('logoVisibility') === null ? false : localStorage.getItem('logoVisibility') == 'true' ? true : false ); useEffect(() => { const listener = async (data: any) => { console.log('tab change!'); const tab = await getCurrentTab(); const url = new URL(tab.url); if (url.origin.startsWith('moz-extension')) { return; } setOrigin(url.origin); }; browser.tabs.onUpdated.addListener(listener); return () => { browser.tabs.onUpdated.removeListener(listener); }; }); useEffect(() => { for (const cluster of Object.values( getMemory().getClustersForOrigin(origin) )) { if (cluster.hasMarks()) { return setMarksOccurrence(true); } } return setMarksOccurrence(false); }, [counter, origin]); return (
{origin ? ( Analiza strony {origin} ) : ( Przejdź do wybranej strony internetowej )}
{stolenDataView ? ( ) : ( )}
{stolenDataView ? ( ) : null}
{stolenDataView ? ( {warningDataDialogAck ? (
Uwaga! Niekoniecznie każda przechwycona poniżej informacja jest daną osobową. Niektóre z podanych domen mogą należeć do właściciela strony i nie reprezentować podmiotów trzecich.
) : null} setCounter((c) => c + 1)} minValueLength={minValueLength} cookiesOnly={cookiesOnly} cookiesOrOriginOnly={cookiesOrOriginOnly} />
) : ( )}
); }; ReactDOM.render(, document.getElementById('app'));