From 468391489ccd9514fd719a794a69ab2e52a8a248 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontatk@kuba-orlik.name>
Date: Thu, 10 Feb 2022 20:03:48 +0100
Subject: [PATCH] Report window to handle refreshes properly

---
 report-window/report-window.tsx | 115 +++++++++++++++++---------------
 1 file changed, 63 insertions(+), 52 deletions(-)

diff --git a/report-window/report-window.tsx b/report-window/report-window.tsx
index 467316e..b02ab28 100644
--- a/report-window/report-window.tsx
+++ b/report-window/report-window.tsx
@@ -9,59 +9,70 @@ import EmailContent from './email-content';
 import { parseAnswers, ParsedAnswers } from './parse-answers';
 
 function Report() {
-    try {
-        const origin = new URL(document.location.toString()).searchParams.get('origin');
-        const [counter] = useEmitter(getMemory());
-        const [answers, setAnswers] = React.useState<ParsedAnswers>(null);
-        const [mode, setMode] = React.useState('survey');
-        const clusters = getMemory().getClustersForOrigin(origin);
-        /* const [entries, setEntries] = React.useState<StolenDataEntry[]>([]); */
-        /* React.useEffect(() => {
-         *     setEntries(
-         *         Object.values(clusters)
-         *             .map((cluster) => {
-         *                 cluster.calculateRepresentativeStolenData();
-         *                 return cluster.representativeStolenData;
-         *             })
-         *             .reduce(reduceConcat, [])
-         *             .filter((entry) => entry.isMarked)
-         *     );
-         * }, []); */
-        /* if (entries.length == 0) {
-         *     return <>Wczytywanie...</>;
-         * } */
-        const visited_url = Object.values(clusters)
-            .find((cluster) => cluster.getMarkedRequests().length > 0)
-            ?.getMarkedRequests()[0].originalURL;
+   try {
+      const url = new URL(document.location.toString());
+      const origin = url.searchParams.get('origin');
+      const [counter] = useEmitter(getMemory());
+      const [answers, setAnswers] = React.useState<ParsedAnswers>(
+         url.searchParams.get('answers') ? JSON.parse(url.searchParams.get('answers')) : null
+      );
+      const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey');
+      const clusters = getMemory().getClustersForOrigin(origin);
+      /* const [entries, setEntries] = React.useState<StolenDataEntry[]>([]); */
+      /* React.useEffect(() => {
+       *     setEntries(
+       *         Object.values(clusters)
+       *             .map((cluster) => {
+       *                 cluster.calculateRepresentativeStolenData();
+       *                 return cluster.representativeStolenData;
+       *             })
+       *             .reduce(reduceConcat, [])
+       *             .filter((entry) => entry.isMarked)
+       *     );
+       * }, []); */
+      /* if (entries.length == 0) {
+       *     return <>Wczytywanie...</>;
+       * } */
 
-        const result = (
-            <div {...{ 'data-version': counter }}>
-                <nav>
-                    <img src="../assets/icon-addon.svg" width={48} height={48}></img>{' '}
-                    <h1>Rentgen - Generuj treść maila dla {origin}</h1>
-                </nav>
-                {mode === 'survey' ? (
-                    <Questions
-                        hosts={Object.values(clusters)
-                            .filter((cluster) => cluster.getMarkedRequests().length > 0)
-                            .map((cluster) => cluster.id)}
-                        onComplete={(answers) => {
-                            setAnswers(parseAnswers(answers));
-                            setMode('preview');
-                        }}
-                    ></Questions>
-                ) : (
-                    ''
-                )}
-                {mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
-                {/* <HARConverter {...{ entries }} /> */}
-            </div>
-        );
-        return result;
-    } catch (e) {
-        console.error(e);
-        return <div>ERROR! {JSON.stringify(e)}</div>;
-    }
+      React.useEffect(() => {
+         const url = new URL(document.location.toString());
+         url.searchParams.set('origin', origin);
+         url.searchParams.set('answers', JSON.stringify(answers));
+         url.searchParams.set('mode', mode);
+         history.pushState({}, 'Rentgen', url.toString());
+      }, [mode, answers, origin]);
+      const visited_url = Object.values(clusters)
+         .find((cluster) => cluster.getMarkedRequests().length > 0)
+         ?.getMarkedRequests()[0].originalURL;
+
+      const result = (
+         <div {...{ 'data-version': counter }}>
+            <nav>
+               <img src="../assets/icon-addon.svg" width={48} height={48}></img>{' '}
+               <h1>Rentgen - Generuj treść maila dla {origin}</h1>
+            </nav>
+            {mode === 'survey' ? (
+               <Questions
+                  hosts={Object.values(clusters)
+                     .filter((cluster) => cluster.getMarkedRequests().length > 0)
+                     .map((cluster) => cluster.id)}
+                  onComplete={(answers) => {
+                     setAnswers(parseAnswers(answers));
+                     setMode('preview');
+                  }}
+               ></Questions>
+            ) : (
+               ''
+            )}
+            {mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
+            {/* <HARConverter {...{ entries }} /> */}
+         </div>
+      );
+      return result;
+   } catch (e) {
+      console.error(e);
+      return <div>ERROR! {JSON.stringify(e)}</div>;
+   }
 }
 
 ReactDOM.render(<Report />, document.getElementById('app'));