rentgen/sidebar/sidebar.tsx

106 lines
3.6 KiB
TypeScript
Raw Normal View History

import React, { Fragment, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import Options from '../options';
import { StolenData } from './stolen-data';
import { useEmitter } from '../util';
import { getMemory } from '../memory';
import InfoCircle from '../assets/icons/info_circle_outline.svg';
2021-10-03 09:03:56 +02:00
async function getCurrentTab() {
const [tab] = await browser.tabs.query({
active: true,
windowId: browser.windows.WINDOW_ID_CURRENT,
});
return tab;
2021-10-03 09:03:56 +02:00
}
import './global.scss';
import './sidebar.scss';
2021-10-03 09:03:56 +02:00
const Sidebar = () => {
const [origin, setOrigin] = useState<string | null>(null);
const [minValueLength, setMinValueLength] = useState<number | null>(7);
const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
const [stolenDataView, setStolenDataView] = useState<boolean>(true);
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
useState<boolean>(false);
const [counter, setCounter] = useEmitter(getMemory());
2021-11-06 21:48:25 +01:00
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);
};
});
2021-11-06 21:48:25 +01:00
return (
<Fragment>
{/* <div id="selector">
2021-10-03 09:03:56 +02:00
<TabDropdown setPickedTab={setPickedTab} pickedTab={pickedTab} />
<button
id="get_current_tab_button"
onClick={async () => setPickedTab(await getCurrentTab())}
>
Wybierz aktywną kartę{" "}
</button>
2021-11-06 21:48:25 +01:00
</div> */}
<header>
<img
src="../assets/logo-internet-czas-dzialac.svg"
height={48}
></img>
<div className="webpage-metadata">
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">
{origin}
</span>
</div>
<a href="https://internet-czas-dzialac.pl">
<InfoCircle />
</a>
</header>
<nav>
<button onClick={() => setStolenDataView(!stolenDataView)}>
{stolenDataView ? 'Options' : 'Data'}
</button>
</nav>
<section>
{stolenDataView ? (
<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}
/>
)}
</section>
<footer>Footer</footer>
</Fragment>
);
2021-10-03 09:03:56 +02:00
};
ReactDOM.render(<Sidebar />, document.getElementById('app'));