rentgen/sidebar/sidebar.tsx

251 lines
9.8 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import ReactDOM from 'react-dom';
import Options from '../options';
import { StolenData } from './stolen-data';
import { useEmitter } from '../util';
import { getMemory } from '../memory';
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] = React.useState<string | null>(null);
const [minValueLength, setMinValueLength] = React.useState<number | null>(
localStorage.getItem('minValueLength') === null
? 7
: (localStorage.getItem('minValueLength') as unknown as number)
);
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
React.useState<boolean>(false);
const [counter, setCounter] = useEmitter(getMemory());
const [marksOccurrence, setMarksOccurrence] =
React.useState<boolean>(false);
const [warningDataDialogAck, setWarningDataDialogAck] =
React.useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null
? true
: localStorage.getItem('warningDataDialogAck') == 'true'
? true
: false
);
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
localStorage.getItem('logoVisibility') === null
? false
: localStorage.getItem('logoVisibility') == 'true'
? true
: false
);
React.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);
};
});
React.useEffect(() => {
for (const cluster of Object.values(
getMemory().getClustersForOrigin(origin)
)) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
}
}
return setMarksOccurrence(false);
}, [counter, origin]);
return (
<div className="sidebar">
<header
className={
logoVisibility ? 'header' : 'header header--without-logo'
}
>
<img
src="../assets/logo-internet-czas-dzialac.svg"
height={40}
style={!logoVisibility ? { display: 'none' } : null}
></img>
<div
className={
logoVisibility
? 'webpage-metadata'
: 'webpage-metadata webpage-metadata--without-logo'
}
>
{origin ? (
<>
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">
{origin}
</span>
</>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div>
{stolenDataView ? (
<a href="https://internet-czas-dzialac.pl">
<img
src="/assets/icons/info_circle_outline.svg"
width="20"
height="20"
/>
</a>
) : (
<button onClick={() => setStolenDataView(true)}>
<img
src="/assets/icons/short_left.svg"
width="20"
height="20"
/>
</button>
)}
</header>
{stolenDataView ? (
<nav>
<button onClick={() => setStolenDataView(!stolenDataView)}>
<img
src="/assets/icons/settings.svg"
width="20"
height="20"
/>
<span>Ustawienia</span>
</button>
<button
onClick={() => {
getMemory().removeRequestsFor(origin);
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
<img
src="/assets/icons/trash_full.svg"
width="20"
height="20"
/>
<span>Wyczyść historię wtyczki</span>
</button>
<button
onClick={() => {
getMemory().removeCookiesFor(origin);
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
<img
src="/assets/icons/cookie.svg"
width="20"
height="20"
/>
<span>Wyczyść ciasteczka</span>
</button>
<button
disabled={!marksOccurrence}
title={
marksOccurrence
? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
}
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
params
);
}}
>
<img
src="/assets/icons/mail.svg"
width="20"
height="20"
/>
<span>Utwórz wiadomość dla administratora witryny</span>
</button>
</nav>
) : null}
<section>
{stolenDataView ? (
<>
{warningDataDialogAck ? (
<section className="warning-container">
<span>
<strong>Uwaga!</strong> 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.
</span>
<button
onClick={() => {
setWarningDataDialogAck(false);
localStorage.setItem(
'warningDataDialogAck',
false as unknown as string
);
}}
>
<img
src="/assets/icons/close_big.svg"
width="16"
height="16"
/>
</button>
</section>
) : null}
<StolenData
origin={origin}
refreshToken={counter}
refresh={() => setCounter((c) => c + 1)}
minValueLength={minValueLength}
cookiesOnly={cookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
/>
</>
) : (
<Options
minValueLength={minValueLength}
setMinValueLength={setMinValueLength}
cookiesOnly={cookiesOnly}
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
warningDataDialogAck={warningDataDialogAck}
setWarningDataDialogAck={setWarningDataDialogAck}
logoVisibility={logoVisibility}
setLogoVisibility={setLogoVisibility}
/>
)}
</section>
</div>
);
};
ReactDOM.render(<Sidebar />, document.getElementById('app'));