Reorder files into smaller components

memory.ts

@@ -39,13 +39,25 @@ class Memory extends EventEmitter {
   }
 
   async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
+    if (shorthost) {
+      const cookies = await browser.cookies.getAll({ domain: shorthost });
+      for (const cookie of cookies) {
+        console.log("removing cookie", cookie.name, "from", cookie.domain);
+        await browser.cookies.remove({
+          name: cookie.name,
+          url: `https://${cookie.domain}`,
+        });
+      }
+    } else {
       const clusters = this.getClustersForOrigin(origin);
+
       await Promise.all(
         Object.values(clusters)
           .filter((cluster) => !shorthost || cluster.id === shorthost)
-        .map((cluster) => cluster.removeAllCookies())
+          .map((cluster) => this.removeCookiesFor(origin, cluster.id))
       );
     }
+  }
 
   async removeRequestsFor(origin: string) {
     this.origin_to_history[origin] = {};

options.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function Options({
+  minValueLength,
+  setMinValueLength,
+  cookiesOnly,
+  setCookiesOnly,
+}) {
+  return (
+    <fieldset>
+      <h3>Zaawansowane ustawienia</h3>
+      <label htmlFor="minValueLength">
+        Pokazuj tylko wartości o długości co najmniej{" "}
+      </label>
+      <input
+        type="number"
+        id="minValueLength"
+        value={minValueLength}
+        onChange={(e) => setMinValueLength(parseInt(e.target.value))}
+      />
+      <br />
+      <input
+        type="checkbox"
+        id="cookiesOnly"
+        value={cookiesOnly}
+        onChange={(e) => setCookiesOnly(e.target.checked)}
+      />
+      <label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
+    </fieldset>
+  );
+}

request-cluster.ts

@@ -163,15 +163,4 @@ export class RequestCluster extends EventEmitter {
       }
     }
   }
-
-  async removeAllCookies() {
-    const cookies = await browser.cookies.getAll({ domain: this.id });
-    for (const cookie of cookies) {
-      console.log("removing cookie", cookie.name, "from", cookie.domain);
-      await browser.cookies.remove({
-        name: cookie.name,
-        url: `https://${cookie.domain}`,
-      });
-    }
-  }
 }

sidebar.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import memory from "./memory";
-import { RequestCluster, Sources } from "./request-cluster";
+import Options from "./options";
-import { getshorthost, useEmitter } from "./util";
+import { StolenData } from "./stolen-data";
+import { useEmitter } from "./util";
 
 async function getCurrentTab() {
   const [tab] = await browser.tabs.query({
@@ -12,185 +13,11 @@ async function getCurrentTab() {
   return tab;
 }
 
-const TabDropdown = ({
-  setPickedTab,
-  pickedTab,
-}: {
-  setPickedTab: (tab_id: number) => void;
-  pickedTab: number;
-}) => {
-  const [tabs, setTabs] = useState([]);
-  useEffect(() => {
-    browser.tabs.query({ currentWindow: true }).then(setTabs);
-  }, []);
-  return (
-    <select
-      id="tab_dropdown"
-      value={pickedTab}
-      onChange={async (e) => {
-        setPickedTab(parseInt(e.target.value));
-      }}
-    >
-      {tabs.map((tab) => (
-        <option value={tab.id} key={tab.id}>
-          {tab.title}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-const StolenDataRow = ({
-  origin,
-  shorthost,
-  minValueLength,
-  cookiesOnly,
-}: {
-  origin: string;
-  shorthost: string;
-  refreshToken: number;
-  minValueLength: number;
-  cookiesOnly: boolean;
-}) => {
-  const cluster = memory.getClustersForOrigin(origin)[shorthost];
-  const icons: Record<Sources, string> = {
-    cookie: "🍪",
-    pathname: "🛣",
-    queryparams: "🅿",
-    header: "H",
-  };
-  return (
-    <div>
-      <h2>
-        {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
-        {cluster.requests.length}{" "}
-        <a
-          href="#"
-          style={{ fontSize: "10px" }}
-          onClick={() => cluster.removeAllCookies()}
-        >
-          Wyczyść cookiesy
-        </a>
-      </h2>
-      <table>
-        <tbody>
-          {cluster
-            .getStolenData({ minValueLength, cookiesOnly })
-            .map((entry) => (
-              <tr
-                key={origin + cluster.id + entry.getUniqueKey()}
-                data-key={origin + cluster.id + entry.getUniqueKey()}
-              >
-                <th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
-                  {entry.getNames().join(",")}
-                </th>
-                <td>{entry.getSources().map((source) => icons[source])}</td>
-                <td style={{ wordWrap: "anywhere" as any }}>
-                  {entry.getValues()[0]}
-                </td>
-              </tr>
-            ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-const StolenData = ({
-  origin,
-  minValueLength,
-  refreshToken,
-  cookiesOnly,
-}: {
-  origin: string;
-  refreshToken: number;
-  minValueLength: number;
-  cookiesOnly: boolean;
-}) => {
-  if (!origin) {
-    return <div></div>;
-  }
-  const clusters = Object.values(memory.getClustersForOrigin(origin)).sort(
-    RequestCluster.sortCompare
-  );
-  return (
-    <div style={{ padding: "5px" }}>
-      {" "}
-      <div>
-        <h1>
-          {origin}
-          <button
-            style={{ marginLeft: "1rem" }}
-            onClick={() =>
-              memory.removeCookiesFor(
-                origin,
-                getshorthost(new URL(origin).host)
-              )
-            }
-          >
-            Wyczyść cookiesy 1st party
-          </button>
-          <button
-            style={{ marginLeft: "1rem" }}
-            onClick={() => memory.removeRequestsFor(origin)}
-          >
-            Wyczyść pamięć
-          </button>
-        </h1>
-        {clusters
-          .filter((cluster) => !cookiesOnly || cluster.hasCookies())
-          .map((cluster) => {
-            return (
-              <StolenDataRow
-                origin={origin}
-                shorthost={cluster.id}
-                key={cluster.id + origin}
-                refreshToken={refreshToken}
-                minValueLength={minValueLength}
-                cookiesOnly={cookiesOnly}
-              />
-            );
-          })}
-      </div>
-    </div>
-  );
-};
-
-const Options = ({
-  minValueLength,
-  setMinValueLength,
-  cookiesOnly,
-  setCookiesOnly,
-}) => {
-  return (
-    <fieldset>
-      <h3>Zaawansowane ustawienia</h3>
-      <label htmlFor="minValueLength">
-        Pokazuj tylko wartości o długości co najmniej{" "}
-      </label>
-      <input
-        type="number"
-        id="minValueLength"
-        value={minValueLength}
-        onChange={(e) => setMinValueLength(parseInt(e.target.value))}
-      />
-      <br />
-      <input
-        type="checkbox"
-        id="cookiesOnly"
-        value={cookiesOnly}
-        onChange={(e) => setCookiesOnly(e.target.checked)}
-      />
-      <label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
-    </fieldset>
-  );
-};
-
 const Sidebar = () => {
   const [origin, setOrigin] = useState<string | null>(null);
   const [minValueLength, setMinValueLength] = useState<number | null>(7);
   const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
-  const counter = useEmitter(memory);
+  const [counter] = useEmitter(memory);
 
   useEffect(() => {
     const listener = async (data) => {

stolen-data-row.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import memory from "./memory";
+import { Sources } from "./request-cluster";
+
+export default function StolenDataRow({
+  origin,
+  shorthost,
+  minValueLength,
+  cookiesOnly,
+}: {
+  origin: string;
+  shorthost: string;
+  refreshToken: number;
+  minValueLength: number;
+  cookiesOnly: boolean;
+}) {
+  const cluster = memory.getClustersForOrigin(origin)[shorthost];
+  const icons: Record<Sources, string> = {
+    cookie: "🍪",
+    pathname: "🛣",
+    queryparams: "🅿",
+    header: "H",
+  };
+  return (
+    <div>
+      <h2>
+        {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
+        {cluster.requests.length}{" "}
+        <a
+          href="#"
+          style={{ fontSize: "10px" }}
+          onClick={() => memory.removeCookiesFor(origin, shorthost)}
+        >
+          Wyczyść cookiesy
+        </a>
+      </h2>
+      <table>
+        <tbody>
+          {cluster
+            .getStolenData({ minValueLength, cookiesOnly })
+            .map((entry) => (
+              <tr
+                key={origin + cluster.id + entry.getUniqueKey()}
+                data-key={origin + cluster.id + entry.getUniqueKey()}
+              >
+                <th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
+                  {entry.getNames().join(",")}
+                </th>
+                <td>{entry.getSources().map((source) => icons[source])}</td>
+                <td style={{ wordWrap: "anywhere" as any }}>
+                  {entry.getValues()[0]}
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

stolen-data.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import memory from "./memory";
+import { RequestCluster } from "./request-cluster";
+import StolenDataRow from "./stolen-data-row";
+import { getshorthost } from "./util";
+
+export function StolenData({
+  origin,
+  minValueLength,
+  refreshToken,
+  cookiesOnly,
+}: {
+  origin: string;
+  refreshToken: number;
+  minValueLength: number;
+  cookiesOnly: boolean;
+}) {
+  if (!origin) {
+    return <div></div>;
+  }
+  const clusters = Object.values(memory.getClustersForOrigin(origin)).sort(
+    RequestCluster.sortCompare
+  );
+  return (
+    <div style={{ padding: "5px" }}>
+      {" "}
+      <div>
+        <h1>
+          {origin}
+          <button
+            style={{ marginLeft: "1rem" }}
+            onClick={() =>
+              memory.removeCookiesFor(
+                origin,
+                getshorthost(new URL(origin).host)
+              )
+            }
+          >
+            Wyczyść cookiesy 1st party
+          </button>
+          <button
+            style={{ marginLeft: "1rem" }}
+            onClick={() => memory.removeRequestsFor(origin)}
+          >
+            Wyczyść pamięć
+          </button>
+        </h1>
+        {clusters
+          .filter((cluster) => !cookiesOnly || cluster.hasCookies())
+          .map((cluster) => {
+            return (
+              <StolenDataRow
+                origin={origin}
+                shorthost={cluster.id}
+                key={cluster.id + origin}
+                refreshToken={refreshToken}
+                minValueLength={minValueLength}
+                cookiesOnly={cookiesOnly}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+}

tab-dropdown.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { useEffect, useState } from "react";
+
+export default function TabDropdown({
+  setPickedTab,
+  pickedTab,
+}: {
+  setPickedTab: (tab_id: number) => void;
+  pickedTab: number;
+}) {
+  const [tabs, setTabs] = useState([]);
+  useEffect(() => {
+    browser.tabs.query({ currentWindow: true }).then(setTabs);
+  }, []);
+  return (
+    <select
+      id="tab_dropdown"
+      value={pickedTab}
+      onChange={async (e) => {
+        setPickedTab(parseInt(e.target.value));
+      }}
+    >
+      {tabs.map((tab) => (
+        <option value={tab.id} key={tab.id}>
+          {tab.title}
+        </option>
+      ))}
+    </select>
+  );
+}

util.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "events";
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
 export type Unarray<T> = T extends Array<infer R> ? R : T;
@@ -13,7 +13,9 @@ export function getshorthost(host: string) {
   return host.split(".").slice(-2).join(".");
 }
 
-export function useEmitter(e: EventEmitter) {
+export function useEmitter(
+  e: EventEmitter
+): [number, Dispatch<SetStateAction<number>>] {
   const [counter, setCounter] = useState<number>(0);
   useEffect(() => {
     const callback = () => {
@@ -24,7 +26,7 @@ export function useEmitter(e: EventEmitter) {
       e.removeListener("change", callback);
     };
   }, []);
-  return counter;
+  return [counter, setCounter];
 }
 
 export function parseCookie(cookie: string): Record<string, string> {