From fa42e848ea0edff6a0b7e81828951d83fd1a6800 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Sun, 7 Nov 2021 09:17:19 +0100 Subject: [PATCH] Reorder files into smaller components --- memory.ts | 24 ++++-- options.tsx | 31 ++++++++ request-cluster.ts | 11 --- sidebar.tsx | 181 +------------------------------------------- stolen-data-row.tsx | 59 +++++++++++++++ stolen-data.tsx | 65 ++++++++++++++++ tab-dropdown.tsx | 30 ++++++++ util.ts | 8 +- 8 files changed, 212 insertions(+), 197 deletions(-) create mode 100644 options.tsx create mode 100644 stolen-data-row.tsx create mode 100644 stolen-data.tsx create mode 100644 tab-dropdown.tsx diff --git a/memory.ts b/memory.ts index 6d65e5e..a05f937 100644 --- a/memory.ts +++ b/memory.ts @@ -39,12 +39,24 @@ class Memory extends EventEmitter { } async removeCookiesFor(origin: string, shorthost?: string): Promise { - const clusters = this.getClustersForOrigin(origin); - await Promise.all( - Object.values(clusters) - .filter((cluster) => !shorthost || cluster.id === shorthost) - .map((cluster) => cluster.removeAllCookies()) - ); + 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) => this.removeCookiesFor(origin, cluster.id)) + ); + } } async removeRequestsFor(origin: string) { diff --git a/options.tsx b/options.tsx new file mode 100644 index 0000000..9f242a8 --- /dev/null +++ b/options.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export default function Options({ + minValueLength, + setMinValueLength, + cookiesOnly, + setCookiesOnly, +}) { + return ( +
+

Zaawansowane ustawienia

+ + setMinValueLength(parseInt(e.target.value))} + /> +
+ setCookiesOnly(e.target.checked)} + /> + +
+ ); +} diff --git a/request-cluster.ts b/request-cluster.ts index 7a9972d..e00cf84 100644 --- a/request-cluster.ts +++ b/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}`, - }); - } - } } diff --git a/sidebar.tsx b/sidebar.tsx index 3337033..f694098 100644 --- a/sidebar.tsx +++ b/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 { getshorthost, useEmitter } from "./util"; +import Options from "./options"; +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 ( - - ); -}; - -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 = { - cookie: "🍪", - pathname: "🛣", - queryparams: "🅿", - header: "H", - }; - return ( -
-

- {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x - {cluster.requests.length}{" "} - cluster.removeAllCookies()} - > - Wyczyść cookiesy - -

- - - {cluster - .getStolenData({ minValueLength, cookiesOnly }) - .map((entry) => ( - - - - - - ))} - -
- {entry.getNames().join(",")} - {entry.getSources().map((source) => icons[source])} - {entry.getValues()[0]} -
-
- ); -}; - -const StolenData = ({ - origin, - minValueLength, - refreshToken, - cookiesOnly, -}: { - origin: string; - refreshToken: number; - minValueLength: number; - cookiesOnly: boolean; -}) => { - if (!origin) { - return
; - } - const clusters = Object.values(memory.getClustersForOrigin(origin)).sort( - RequestCluster.sortCompare - ); - return ( -
- {" "} -
-

- {origin} - - -

- {clusters - .filter((cluster) => !cookiesOnly || cluster.hasCookies()) - .map((cluster) => { - return ( - - ); - })} -
-
- ); -}; - -const Options = ({ - minValueLength, - setMinValueLength, - cookiesOnly, - setCookiesOnly, -}) => { - return ( -
-

Zaawansowane ustawienia

- - setMinValueLength(parseInt(e.target.value))} - /> -
- setCookiesOnly(e.target.checked)} - /> - -
- ); -}; - const Sidebar = () => { const [origin, setOrigin] = useState(null); const [minValueLength, setMinValueLength] = useState(7); const [cookiesOnly, setCookiesOnly] = useState(false); - const counter = useEmitter(memory); + const [counter] = useEmitter(memory); useEffect(() => { const listener = async (data) => { diff --git a/stolen-data-row.tsx b/stolen-data-row.tsx new file mode 100644 index 0000000..da7d557 --- /dev/null +++ b/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 = { + cookie: "🍪", + pathname: "🛣", + queryparams: "🅿", + header: "H", + }; + return ( +
+

+ {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x + {cluster.requests.length}{" "} + memory.removeCookiesFor(origin, shorthost)} + > + Wyczyść cookiesy + +

+ + + {cluster + .getStolenData({ minValueLength, cookiesOnly }) + .map((entry) => ( + + + + + + ))} + +
+ {entry.getNames().join(",")} + {entry.getSources().map((source) => icons[source])} + {entry.getValues()[0]} +
+
+ ); +} diff --git a/stolen-data.tsx b/stolen-data.tsx new file mode 100644 index 0000000..544fbec --- /dev/null +++ b/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
; + } + const clusters = Object.values(memory.getClustersForOrigin(origin)).sort( + RequestCluster.sortCompare + ); + return ( +
+ {" "} +
+

+ {origin} + + +

+ {clusters + .filter((cluster) => !cookiesOnly || cluster.hasCookies()) + .map((cluster) => { + return ( + + ); + })} +
+
+ ); +} diff --git a/tab-dropdown.tsx b/tab-dropdown.tsx new file mode 100644 index 0000000..843e5fd --- /dev/null +++ b/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 ( + + ); +} diff --git a/util.ts b/util.ts index a7c67ce..a3532f6 100644 --- a/util.ts +++ b/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 extends Promise ? R : T; export type Unarray = T extends Array ? 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>] { const [counter, setCounter] = useState(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 {