Simplify React import in preparation from using a version from CDN

report-window/email-template-1.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useState } from 'react';
 import { RequestCluster } from '../request-cluster';
 import { StolenDataEntry } from '../stolen-data-entry';
 import { getDate, toBase64 } from '../util';
@@ -15,12 +14,13 @@ export default function EmailTemplate1({
     clusters: Record<string, RequestCluster>;
     version: number;
 }): JSX.Element {
-    const [popupState, setPopupState] = useState<PopupState>('not_clicked');
+    const [popupState, setPopupState] =
-    const [acceptAllName, setAcceptAllName] = useState<string>(
+        React.useState<PopupState>('not_clicked');
+    const [acceptAllName, setAcceptAllName] = React.useState<string>(
         'Zaakceptuj wszystkie'
     );
     const [popupScreenshotBase64, setPopupScreenshotBase64] =
-        useState<string>(null);
+        React.useState<string>(null);
 
     return (
         <div>

report-window/email-template-2-controls.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Dispatch, SetStateAction } from 'react';
 import { toBase64 } from '../util';
 import { EmailTemplate2Config } from './email-template-2';
 
@@ -8,7 +7,7 @@ export default function EmailTemplate2Controls({
     setConfig,
 }: {
     config: EmailTemplate2Config;
-    setConfig: Dispatch<SetStateAction<EmailTemplate2Config>>;
+    setConfig: React.Dispatch<React.SetStateAction<EmailTemplate2Config>>;
 }): JSX.Element {
     return (
         <div>

report-window/email-template-2.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { RequestCluster } from '../request-cluster';
 import { StolenDataEntry } from '../stolen-data-entry';
 import { getDate, unique } from '../util';
@@ -75,7 +75,7 @@ export default function EmailTemplate2({
     clusters: Record<string, RequestCluster>;
     version: number;
 }): JSX.Element {
-    const [config, setConfig] = useState<EmailTemplate2Config>({
+    const [config, setConfig] = React.useState<EmailTemplate2Config>({
         popup_type: 'none',
         popup_action: 'ignored',
         popup_screenshot_base64: null,

report-window/email-template.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { RequestCluster } from '../request-cluster';
 import { StolenDataEntry } from '../stolen-data-entry';
 import EmailTemplate1 from './email-template-1';
@@ -13,7 +13,7 @@ export default function EmailTemplate({
     clusters: Record<string, RequestCluster>;
     version: number;
 }) {
-    const [templateVersion, setTemplateVersion] = useState('2');
+    const [templateVersion, setTemplateVersion] = React.useState('2');
     return (
         <div>
             <select

report-window/har-converter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { HAREntry } from '../extended-request';
 import { StolenDataEntry } from '../stolen-data-entry';
 import { getshorthost, unique } from '../util';
@@ -80,11 +80,11 @@ export default function HARConverter({
 }: {
     entries: StolenDataEntry[];
 }) {
-    const [filtered, setFiltered] = useState<Blob | null>(null);
+    const [filtered, setFiltered] = React.useState<Blob | null>(null);
-    const [filename, setFilename] = useState('');
+    const [filename, setFilename] = React.useState('');
     const [fakeHAR, setFakeHAR] =
-        useState<ReturnType<typeof generateFakeHAR>>();
+        React.useState<ReturnType<typeof generateFakeHAR>>();
-    useEffect(() => {
+    React.useEffect(() => {
         setFakeHAR(generateFakeHAR(entries));
     }, []);
 

report-window/report-window.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { getMemory } from '../memory';
 import { Classifications, StolenDataEntry } from '../stolen-data-entry';
@@ -88,15 +88,12 @@ function Report() {
     console.time('useMemory');
     const [counter, setCounter] = useEmitter(getMemory());
     console.timeEnd('useMemory');
-    function refresh() {
-        setCounter((c) => c + 1);
-    }
     console.time('getClustersForOrigin');
     const clusters = getMemory().getClustersForOrigin(origin);
     console.timeEnd('getClustersForOrigin');
-    const [entries, setEntries] = useState<StolenDataEntry[]>([]);
+    const [entries, setEntries] = React.useState<StolenDataEntry[]>([]);
     console.time('useEffect report-window');
-    useEffect(() => {
+    React.useEffect(() => {
         setEntries(
             Object.values(clusters)
                 .map((cluster) => {

sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import Options from '../options';
 import { StolenData } from './stolen-data';
@@ -17,26 +17,28 @@ import './global.scss';
 import './sidebar.scss';
 
 const Sidebar = () => {
-    const [origin, setOrigin] = useState<string | null>(null);
+    const [origin, setOrigin] = React.useState<string | null>(null);
-    const [minValueLength, setMinValueLength] = useState<number | null>(
+    const [minValueLength, setMinValueLength] = React.useState<number | null>(
         localStorage.getItem('minValueLength') === null
             ? 7
             : (localStorage.getItem('minValueLength') as unknown as number)
     );
-    const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
+    const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
-    const [stolenDataView, setStolenDataView] = useState<boolean>(true);
+    const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
     const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
-        useState<boolean>(false);
+        React.useState<boolean>(false);
     const [counter, setCounter] = useEmitter(getMemory());
-    const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
+    const [marksOccurrence, setMarksOccurrence] =
-    const [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
+        React.useState<boolean>(false);
+    const [warningDataDialogAck, setWarningDataDialogAck] =
+        React.useState<boolean>(
             localStorage.getItem('warningDataDialogAck') === null
                 ? true
                 : localStorage.getItem('warningDataDialogAck') == 'true'
                 ? true
                 : false
         );
-    const [logoVisibility, setLogoVisibility] = useState<boolean>(
+    const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
         localStorage.getItem('logoVisibility') === null
             ? false
             : localStorage.getItem('logoVisibility') == 'true'
@@ -44,7 +46,7 @@ const Sidebar = () => {
             : false
     );
 
-    useEffect(() => {
+    React.useEffect(() => {
         const listener = async (data: any) => {
             console.log('tab change!');
             const tab = await getCurrentTab();
@@ -60,7 +62,7 @@ const Sidebar = () => {
         };
     });
 
-    useEffect(() => {
+    React.useEffect(() => {
         for (const cluster of Object.values(
             getMemory().getClustersForOrigin(origin)
         )) {
@@ -91,12 +93,12 @@ const Sidebar = () => {
                     }
                 >
                     {origin ? (
-                        <Fragment>
+                        <>
                             <span>Analiza strony</span>
                             <span className="webpage-metadata--hyperlink">
                                 {origin}
                             </span>
-                        </Fragment>
+                        </>
                     ) : (
                         <span>Przejdź do wybranej strony internetowej</span>
                     )}
@@ -190,7 +192,7 @@ const Sidebar = () => {
 
             <section>
                 {stolenDataView ? (
-                    <Fragment>
+                    <>
                         {warningDataDialogAck ? (
                             <section className="warning-container">
                                 <span>
@@ -225,7 +227,7 @@ const Sidebar = () => {
                             cookiesOnly={cookiesOnly}
                             cookiesOrOriginOnly={cookiesOrOriginOnly}
                         />
-                    </Fragment>
+                    </>
                 ) : (
                     <Options
                         minValueLength={minValueLength}

sidebar/tab-dropdown.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useEffect, useState } from 'react';
 
 export default function TabDropdown({
     setPickedTab,
@@ -8,8 +7,8 @@ export default function TabDropdown({
     setPickedTab: (tab_id: number) => void;
     pickedTab: number;
 }) {
-    const [tabs, setTabs] = useState([]);
+    const [tabs, setTabs] = React.useState([]);
-    useEffect(() => {
+    React.useEffect(() => {
         browser.tabs.query({ currentWindow: true }).then(setTabs);
     }, []);
     return (

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "jsx": "react",
+        "jsx": "react-jsx",
         "noImplicitAny": true,
         "esModuleInterop": true,
         "lib": ["es2017", "dom", "es2019"],

util.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import React from 'react';
 
 export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
 export type Unarray<T> = T extends Array<infer R> ? R : T;
@@ -47,9 +47,9 @@ export function getshorthost(host: string) {
 
 export function useEmitter(
     e: EventEmitter
-): [number, Dispatch<SetStateAction<number>>] {
+): [number, React.Dispatch<React.SetStateAction<number>>] {
-    const [counter, setCounter] = useState<number>(0);
+    const [counter, setCounter] = React.useState<number>(0);
-    useEffect(() => {
+    React.useEffect(() => {
         const callback = () => {
             setCounter((counter) => counter + 1);
         };