rentgen/components/toolbar/toolbar.tsx

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { getMemory } from '../../memory';
import { useEmitter, getshorthost } from '../../util';
import browserAPI from '../../lib/browser-api';

async function getCurrentTab() {
    const [tab] = await browserAPI.tabs.query({
        active: true,
        windowId: browserAPI.windows.WINDOW_ID_CURRENT,
    });
    return tab;
}

function isDomainHighlySuspicious(domain: string) {
    return (
        domain.includes('facebook') ||
        domain.includes('twitter') ||
        domain.includes('linkedin') ||
        false
    );
}

const Toolbar = () => {
    const [origin, setOrigin] = React.useState<string | null>(null);
    const [eventCounts] = useEmitter(getMemory());
    const [cookieDomainCopy, setCookieDomainCopy] = React.useState<string | null>(null);
    const [_, setMarksOccurrence] = React.useState(false);
    const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState<string | null>(
        null
    );

    const first_sentence_cookie =
        'Strona dokonała zapisu i odczytu plików Cookie dla domen ';
    const first_sentence_history =
        'Część informacji o Twojej historii przeglądania została wysłana do ';

    React.useEffect(() => {
        const listener = async () => {
            const tab = await getCurrentTab();
            if (tab !== undefined && tab.url) {
                const url = new URL(tab.url);
                if (url.origin.startsWith('moz-extension')) {
                    return;
                }
                setOrigin(url.origin);
            } else {
                console.warn('Out of the tab scope');
            }
        };
        browserAPI.tabs.onUpdated.addListener(listener);
        listener();
        return () => {
            browserAPI.tabs.onUpdated.removeListener(listener);
        };
    });

    React.useEffect(() => {
        if (!origin) return;

        const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin))
            .filter((cluster) => cluster.exposesOrigin())
            .sort((cluster1, cluster2) =>
                isDomainHighlySuspicious(cluster1.id)
                    ? -1
                    : isDomainHighlySuspicious(cluster2.id)
                    ? 1
                    : 0
            )
            .map((cluster) => cluster.id);

        setExposedOriginDomainCopy('');

        switch (exposedOriginDomains.length) {
            case 0:
                break;
            case 1:
                setExposedOriginDomainCopy(`${exposedOriginDomains[0]}.`);
                break;
            case 2:
                setExposedOriginDomainCopy(
                    `${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.`
                );
                break;
            case 3:
                setExposedOriginDomainCopy(
                    `${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} oraz ${exposedOriginDomains[2]}.`
                );
                break;
            default:
                setExposedOriginDomainCopy(
                    `${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} (i ${
                        exposedOriginDomains.length - 2 < 2 ? 2 : exposedOriginDomains.length - 2
                    } innych).`
                );
                break;
        }
    }, [eventCounts['*'], origin]);

    React.useEffect(() => {
        if (!origin) return;

        const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin))
            .filter((cluster) => cluster.hasCookies())
            .sort((cluster1, cluster2) =>
                isDomainHighlySuspicious(cluster1.id)
                    ? -1
                    : isDomainHighlySuspicious(cluster2.id)
                    ? 1
                    : 0
            )
            .map((cluster) => cluster.id);

        setCookieDomainCopy('');

        switch (cookieDomains.length) {
            case 0:
                break;
            case 1:
                setCookieDomainCopy(`${cookieDomains[0]}.`);
                break;
            case 2:
                setCookieDomainCopy(`${cookieDomains[0]} oraz ${cookieDomains[1]}.`);
                break;
            case 3:
                setCookieDomainCopy(
                    `${cookieDomains[0]}, ${cookieDomains[1]} oraz ${cookieDomains[2]}.`
                );
                break;
            default:
                setCookieDomainCopy(
                    `${cookieDomains[0]}, ${cookieDomains[1]} (i ${
                        cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
                    } innych).`
                );
                break;
        }
    }, [eventCounts['*'], origin]);

    const autoMark = () => {
        Object.values(getMemory().getClustersForOrigin(origin || '')).forEach((cluster) =>
            cluster.autoMark()
        );
        setMarksOccurrence(true);
    };

    return (
        <div className="toolbar">
            <header className={origin ? 'header' : 'header header--no-page'}>
                <img src="../../assets/icon-addon.svg" height="24" />
                <div className="webpage-metadata">
                    {origin ? (
                        <div className="webpage-metadata--hyperlink">{origin}</div>
                    ) : (
                        <div>Rentgen - wtyczka do przeglądania</div>
                    )}
                </div>
                {origin ? (
                    <button
                        onClick={() => {
                            window.close();
                        }}
                    >
                        <img src="../../assets/icons/x_thick.svg" width="12" height="12" />
                    </button>
                ) : (
                    <a href="https://internet-czas-dzialac.pl">
                        <img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
                    </a>
                )}
            </header>

            {origin ? (
                <Fragment>
                    {' '}
                    <section className="summary">
                        <div className="counters-wrapper">
                            <div className="counters">
                                <div className="counter counter--cookies">
                                    <img src="/assets/icons/cookie.svg#color" width="24" height="24" />
                                    <span data-event={`${eventCounts['*']}`}>
                                        {
                                            Object.values(getMemory().getClustersForOrigin(origin)).filter(
                                                (cluster) => cluster.hasCookies()
                                            ).length
                                        }
                                    </span>
                                </div>
                                <div className="counter counter--browser-history">
                                    <img src="/assets/icons/warning.svg#color" width="24" height="24" />
                                    <span data-event={`${eventCounts['*']}`}>
                                        {
                                            Object.values(getMemory().getClustersForOrigin(origin)).filter(
                                                (cluster) => cluster.exposesOrigin()
                                            ).length
                                        }
                                    </span>
                                </div>
                            </div>
                            <div className="big-counter" data-event={`${eventCounts['*']}`}>
                                {Object.values(getMemory().getClustersForOrigin(origin)).length}
                            </div>
                        </div>
                        <span className="notice">Liczba wykrytych domen podmiotów trzecich</span>
                    </section>
                    <section className="details">
                        {cookieDomainCopy ? (
                            <p
                                data-event={`${eventCounts['*']}`}
                                title={Object.values(getMemory().getClustersForOrigin(origin))
                                    .filter((cluster) => cluster.hasCookies())
                                    .map((domain) => domain.id)
                                    .join(', ')}
                            >
                                {first_sentence_cookie}
                                <strong>{cookieDomainCopy}</strong>
                            </p>
                        ) : null}
                        {exposedOriginDomainCopy ? (
                            <p
                                data-event={`${eventCounts['*']}`}
                                title={Object.values(getMemory().getClustersForOrigin(origin))
                                    .filter((cluster) => cluster.exposesOrigin())
                                    .map((domain) => domain.id)
                                    .join(', ')}
                            >
                                {first_sentence_history}
                                <strong>{exposedOriginDomainCopy}</strong>
                            </p>
                        ) : null}
                    </section>
                    {exposedOriginDomainCopy || cookieDomainCopy ? (
                        <Fragment>
                            <section className="about">
                                <p>
                                    Takie przetwarzanie danych może być niezgodne z&nbsp;prawem.
                                    Przejdź do analizy aby pomóc ustalić, czy ta strona nie narusza
                                    RODO lub ustawy Prawo Komunikacji Elektronicznej.
                                </p>
                            </section>
                            <section className="actions">
                                <button
                                    className="button button--report"
                                    onClick={() => {
                                        autoMark();
                                        window.open(
                                            `/components/sidebar/sidebar.html?origin=${origin}`,
                                            'new_tab'
                                        );
                                        window.close();
                                    }}
                                >
                                    Przejdź do analizy
                                </button>
                            </section>
                        </Fragment>
                    ) : (
                        <Fragment>
                            <section className="about about__no-errors">
                                <p>Nie znaleziono problemów na tej stronie.</p>
                            </section>
                        </Fragment>
                    )}
                </Fragment>
            ) : null}
        </div>
    );
};

ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));