From 46e6c448b2afcdd234f0fbb7501ee3dbb6aa55c0 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontatk@kuba-orlik.name>
Date: Sat, 29 Jan 2022 20:50:44 +0100
Subject: [PATCH] Simplify React import in preparation from using a version
 from CDN

---
 report-window/email-template-1.tsx          |  8 ++--
 report-window/email-template-2-controls.tsx |  3 +-
 report-window/email-template-2.tsx          |  4 +-
 report-window/email-template.tsx            |  4 +-
 report-window/har-converter.tsx             | 10 ++---
 report-window/report-window.tsx             |  9 ++---
 sidebar/sidebar.tsx                         | 44 +++++++++++----------
 sidebar/tab-dropdown.tsx                    |  5 +--
 tsconfig.json                               |  2 +-
 util.ts                                     |  8 ++--
 10 files changed, 47 insertions(+), 50 deletions(-)

diff --git a/report-window/email-template-1.tsx b/report-window/email-template-1.tsx
index 5bfabd3..37ef15d 100644
--- a/report-window/email-template-1.tsx
+++ b/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 [acceptAllName, setAcceptAllName] = useState<string>(
+    const [popupState, setPopupState] =
+        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>
diff --git a/report-window/email-template-2-controls.tsx b/report-window/email-template-2-controls.tsx
index 804755f..db27b86 100644
--- a/report-window/email-template-2-controls.tsx
+++ b/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>
diff --git a/report-window/email-template-2.tsx b/report-window/email-template-2.tsx
index 09d7f95..0a88e5a 100644
--- a/report-window/email-template-2.tsx
+++ b/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,
diff --git a/report-window/email-template.tsx b/report-window/email-template.tsx
index c2bdca5..4bb6580 100644
--- a/report-window/email-template.tsx
+++ b/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
diff --git a/report-window/har-converter.tsx b/report-window/har-converter.tsx
index 300c219..b20bb8b 100644
--- a/report-window/har-converter.tsx
+++ b/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 [filename, setFilename] = useState('');
+    const [filtered, setFiltered] = React.useState<Blob | null>(null);
+    const [filename, setFilename] = React.useState('');
     const [fakeHAR, setFakeHAR] =
-        useState<ReturnType<typeof generateFakeHAR>>();
-    useEffect(() => {
+        React.useState<ReturnType<typeof generateFakeHAR>>();
+    React.useEffect(() => {
         setFakeHAR(generateFakeHAR(entries));
     }, []);
 
diff --git a/report-window/report-window.tsx b/report-window/report-window.tsx
index 174f409..24c910a 100644
--- a/report-window/report-window.tsx
+++ b/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) => {
diff --git a/sidebar/sidebar.tsx b/sidebar/sidebar.tsx
index 17bd11f..5cb2861 100644
--- a/sidebar/sidebar.tsx
+++ b/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 [minValueLength, setMinValueLength] = useState<number | null>(
+    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] = useState<boolean>(false);
-    const [stolenDataView, setStolenDataView] = useState<boolean>(true);
+    const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
+    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 [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
-        localStorage.getItem('warningDataDialogAck') === null
-            ? true
-            : localStorage.getItem('warningDataDialogAck') == 'true'
-            ? true
-            : false
-    );
-    const [logoVisibility, setLogoVisibility] = useState<boolean>(
+    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'
@@ -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}
diff --git a/sidebar/tab-dropdown.tsx b/sidebar/tab-dropdown.tsx
index 4811a0f..4729dc7 100644
--- a/sidebar/tab-dropdown.tsx
+++ b/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([]);
-    useEffect(() => {
+    const [tabs, setTabs] = React.useState([]);
+    React.useEffect(() => {
         browser.tabs.query({ currentWindow: true }).then(setTabs);
     }, []);
     return (
diff --git a/tsconfig.json b/tsconfig.json
index bb02902..ec25951 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "jsx": "react",
+        "jsx": "react-jsx",
         "noImplicitAny": true,
         "esModuleInterop": true,
         "lib": ["es2017", "dom", "es2019"],
diff --git a/util.ts b/util.ts
index 491cca0..f763a37 100644
--- a/util.ts
+++ b/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>>] {
-    const [counter, setCounter] = useState<number>(0);
-    useEffect(() => {
+): [number, React.Dispatch<React.SetStateAction<number>>] {
+    const [counter, setCounter] = React.useState<number>(0);
+    React.useEffect(() => {
         const callback = () => {
             setCounter((counter) => counter + 1);
         };