From 481b43412e7cf9d49448f7bd5672494035fd3c43 Mon Sep 17 00:00:00 2001 From: hzrd149 Date: Wed, 27 Nov 2024 10:21:49 -0600 Subject: [PATCH] cleanup cache relay view --- src/helpers/nostr/event.ts | 2 +- .../cache/components/citrine-relay-card.tsx | 46 +++ .../cache/components/enable-with-delete.tsx | 51 +++ .../cache/components/hosted-relay-card.tsx | 27 ++ .../cache/components/internal-relay-card.tsx | 39 ++ .../cache/components/memory-relay-card.tsx | 37 ++ .../relays/cache/components/no-relay-card.tsx | 27 ++ .../components/nostr-relay-tray-card.tsx | 52 +++ .../cache/components/satellite-relay-card.tsx | 31 ++ .../cache/components/wasm-relay-card.tsx | 58 +++ src/views/relays/cache/index.tsx | 366 +----------------- 11 files changed, 386 insertions(+), 350 deletions(-) create mode 100644 src/views/relays/cache/components/citrine-relay-card.tsx create mode 100644 src/views/relays/cache/components/enable-with-delete.tsx create mode 100644 src/views/relays/cache/components/hosted-relay-card.tsx create mode 100644 src/views/relays/cache/components/internal-relay-card.tsx create mode 100644 src/views/relays/cache/components/memory-relay-card.tsx create mode 100644 src/views/relays/cache/components/no-relay-card.tsx create mode 100644 src/views/relays/cache/components/nostr-relay-tray-card.tsx create mode 100644 src/views/relays/cache/components/satellite-relay-card.tsx create mode 100644 src/views/relays/cache/components/wasm-relay-card.tsx diff --git a/src/helpers/nostr/event.ts b/src/helpers/nostr/event.ts index fd47fc5ba..fc1107fc4 100644 --- a/src/helpers/nostr/event.ts +++ b/src/helpers/nostr/event.ts @@ -199,7 +199,7 @@ export function parseCoordinate(a: string, requireD = false, silent = true): Cus } export function parseHardcodedNoteContent(event: NostrEvent) { - const json = safeJson(event.content, null); + const json = safeJson(event.content); if (!json) return null; // ensure the note has tags diff --git a/src/views/relays/cache/components/citrine-relay-card.tsx b/src/views/relays/cache/components/citrine-relay-card.tsx new file mode 100644 index 000000000..57423ae76 --- /dev/null +++ b/src/views/relays/cache/components/citrine-relay-card.tsx @@ -0,0 +1,46 @@ +import { useAsync } from "react-use"; +import { Button, Card, CardBody, CardHeader, Heading, Link, Text } from "@chakra-ui/react"; + +import { NOSTR_RELAY_TRAY_URL, checkNostrRelayTray, localRelay } from "../../../../services/local-relay"; + +export default function CitrineRelayCard() { + const { value: available, loading: checking } = useAsync(checkNostrRelayTray); + + const enabled = localRelay?.url.startsWith(NOSTR_RELAY_TRAY_URL); + const enable = () => { + localStorage.setItem("localRelay", NOSTR_RELAY_TRAY_URL); + location.reload(); + }; + + return ( + + + Citrine + + GitHub + + {available ? ( + + ) : ( + + )} + + + A cool little app that runs a local relay in your phone + Maximum capacity: Unlimited + Performance: As fast as your phone + + + ); +} diff --git a/src/views/relays/cache/components/enable-with-delete.tsx b/src/views/relays/cache/components/enable-with-delete.tsx new file mode 100644 index 000000000..5d5f46a89 --- /dev/null +++ b/src/views/relays/cache/components/enable-with-delete.tsx @@ -0,0 +1,51 @@ +import { useCallback, useState } from "react"; +import { + Button, + ButtonGroup, + ButtonGroupProps, + IconButton, + Menu, + MenuButton, + MenuItem, + MenuList, +} from "@chakra-ui/react"; + +import { ChevronDownIcon } from "../../../../components/icons"; +import Trash01 from "../../../../components/icons/trash-01"; + +export default function EnableWithDelete({ + enable, + enabled, + wipe, + ...props +}: Omit & { + enable: () => void; + enabled: boolean; + wipe: () => Promise; +}) { + const [deleting, setDeleting] = useState(false); + const wipeDatabase = useCallback(async () => { + try { + setDeleting(true); + await wipe(); + location.reload(); + } catch (error) {} + setDeleting(false); + }, []); + + return ( + + + + } aria-label="More options" /> + + } color="red.500" onClick={wipeDatabase}> + Clear Database + + + + + ); +} diff --git a/src/views/relays/cache/components/hosted-relay-card.tsx b/src/views/relays/cache/components/hosted-relay-card.tsx new file mode 100644 index 000000000..3cd1ce306 --- /dev/null +++ b/src/views/relays/cache/components/hosted-relay-card.tsx @@ -0,0 +1,27 @@ +import { Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react"; + +import { localRelay } from "../../../../services/local-relay"; + +export default function HostedRelayCard() { + const enabled = localRelay?.url.includes(location.host + "/local-relay"); + const enable = () => { + localStorage.removeItem("localRelay"); + location.reload(); + }; + + return ( + + + Hosted Relay + + + + Your installation of noStrudel is setup with a local relay that can be used as a cache + Maximum capacity: Unknown + Performance: Unknown, but probably fast... + + + ); +} diff --git a/src/views/relays/cache/components/internal-relay-card.tsx b/src/views/relays/cache/components/internal-relay-card.tsx new file mode 100644 index 000000000..ba63962ab --- /dev/null +++ b/src/views/relays/cache/components/internal-relay-card.tsx @@ -0,0 +1,39 @@ +import { Button, Card, CardBody, CardFooter, CardHeader, Heading, Text } from "@chakra-ui/react"; +import { CacheRelay, clearDB } from "nostr-idb"; +import { Link as RouterLink } from "react-router-dom"; + +import { localDatabase, localRelay } from "../../../../services/local-relay"; +import EnableWithDelete from "../components/enable-with-delete"; + +export default function InternalRelayCard() { + const enabled = localRelay instanceof CacheRelay; + const enable = () => { + localStorage.setItem("localRelay", "nostr-idb://internal"); + location.reload(); + }; + + const wipe = async () => { + await clearDB(localDatabase); + }; + + return ( + + + Browser Cache + + + + Use the browsers built-in database to cache events. + Maximum capacity: 10k events + Performance: Usable, but limited by the browser + + {enabled && ( + + + + )} + + ); +} diff --git a/src/views/relays/cache/components/memory-relay-card.tsx b/src/views/relays/cache/components/memory-relay-card.tsx new file mode 100644 index 000000000..efebd3b18 --- /dev/null +++ b/src/views/relays/cache/components/memory-relay-card.tsx @@ -0,0 +1,37 @@ +import { Button, Card, CardBody, CardFooter, CardHeader, Heading, Text } from "@chakra-ui/react"; +import { Link as RouterLink } from "react-router-dom"; + +import { localRelay } from "../../../../services/local-relay"; +import MemoryRelay from "../../../../classes/memory-relay"; + +export default function MemoryRelayCard() { + const enabled = localRelay instanceof MemoryRelay; + const enable = () => { + localStorage.setItem("localRelay", ":memory:"); + location.reload(); + }; + + return ( + + + In-memory Cache + + + + Stores all events in memory + Maximum capacity: Unlimited, until your system freezes + Performance: Very fast + NOTE: All events are forgotten when you close the app + + {enabled && ( + + + + )} + + ); +} diff --git a/src/views/relays/cache/components/no-relay-card.tsx b/src/views/relays/cache/components/no-relay-card.tsx new file mode 100644 index 000000000..0d1849fb7 --- /dev/null +++ b/src/views/relays/cache/components/no-relay-card.tsx @@ -0,0 +1,27 @@ +import { Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react"; +import { localRelay } from "../../../../services/local-relay"; + +export default function NoRelayCard() { + const enabled = localRelay === null; + const enable = () => { + localStorage.setItem("localRelay", ":none:"); + location.reload(); + }; + + return ( + + + No Cache + + + + No local relay, nothing is cached + Maximum capacity: 0 + Performance: As fast as the relays your connecting to + NOTE: Profiles and Timelines are still cached in memory + + + ); +} diff --git a/src/views/relays/cache/components/nostr-relay-tray-card.tsx b/src/views/relays/cache/components/nostr-relay-tray-card.tsx new file mode 100644 index 000000000..bbf619089 --- /dev/null +++ b/src/views/relays/cache/components/nostr-relay-tray-card.tsx @@ -0,0 +1,52 @@ +import { useAsync } from "react-use"; +import { Button, Card, CardBody, CardHeader, Heading, Link, Text } from "@chakra-ui/react"; + +import { NOSTR_RELAY_TRAY_URL, checkNostrRelayTray, localRelay } from "../../../../services/local-relay"; + +export default function NostrRelayTrayCard() { + const { value: available, loading: checking } = useAsync(checkNostrRelayTray); + + const enabled = localRelay?.url.startsWith(NOSTR_RELAY_TRAY_URL); + const enable = () => { + localStorage.setItem("localRelay", NOSTR_RELAY_TRAY_URL); + location.reload(); + }; + + return ( + + + Nostr Relay Tray + + GitHub + + {available || enabled ? ( + + ) : ( + + )} + + + A cool little app that runs a local relay in your systems tray + Maximum capacity: Unlimited + Performance: As fast as your computer + {!available && ( + + If the app is running and the button still says "Get the app" the browser is probably blocking access to the + relay + + )} + + + ); +} diff --git a/src/views/relays/cache/components/satellite-relay-card.tsx b/src/views/relays/cache/components/satellite-relay-card.tsx new file mode 100644 index 000000000..183c7820d --- /dev/null +++ b/src/views/relays/cache/components/satellite-relay-card.tsx @@ -0,0 +1,31 @@ +import { useAsync } from "react-use"; +import { Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react"; + +import { localRelay } from "../../../../services/local-relay"; + +export default function SatelliteRelayCard() { + const { value: relay } = useAsync(() => window.satellite!.getLocalRelay()); + const { value: enabled } = useAsync(async () => localRelay?.url === relay, [localRelay?.url, relay]); + const enable = () => { + if (relay) { + localStorage.setItem("localRelay", relay); + location.reload(); + } + }; + + return ( + + + Satellite Relay + + + + Satellite desktop exposes a local caching relay that can be used to store you events + Maximum capacity: Unlimited + Performance: As fast as your computer + + + ); +} diff --git a/src/views/relays/cache/components/wasm-relay-card.tsx b/src/views/relays/cache/components/wasm-relay-card.tsx new file mode 100644 index 000000000..6537593a4 --- /dev/null +++ b/src/views/relays/cache/components/wasm-relay-card.tsx @@ -0,0 +1,58 @@ +import { Button, Card, CardBody, CardFooter, CardHeader, Heading, Link, Text } from "@chakra-ui/react"; +import { Link as RouterLink } from "react-router-dom"; + +import { localRelay } from "../../../../services/local-relay"; +import WasmRelay from "../../../../services/wasm-relay"; +import EnableWithDelete from "./enable-with-delete"; + +export default function WasmRelayCard() { + const enabled = localRelay instanceof WasmRelay; + const enable = () => { + localStorage.setItem("localRelay", "nostr-idb://wasm-worker"); + location.reload(); + }; + + const wipe = async () => { + if (localRelay instanceof WasmRelay) { + await localRelay.wipe(); + } else { + // import and delete database + console.log("Importing worker to wipe database"); + const { default: worker } = await import("../../../../services/wasm-relay/worker"); + await worker.wipe(); + } + }; + + return ( + + + Internal SQLite Cache + + + + + Use{" "} + + @snort/worker-relay + {" "} + with SQLite running in the browser. + + Maximum capacity: Unlimited + Performance: Slightly slower than Browser Cache + NOTE: Can increase the initial load time of the app by ~2 seconds + NOTE: Does not work well with multiple tabs + + {enabled && ( + + + + )} + + ); +} diff --git a/src/views/relays/cache/index.tsx b/src/views/relays/cache/index.tsx index 5d699839c..17c8e60f1 100644 --- a/src/views/relays/cache/index.tsx +++ b/src/views/relays/cache/index.tsx @@ -1,349 +1,17 @@ -import { useCallback, useState } from "react"; -import { useAsync } from "react-use"; -import { - Box, - Button, - ButtonGroup, - ButtonGroupProps, - Card, - CardBody, - CardFooter, - CardHeader, - Divider, - Flex, - Heading, - IconButton, - Link, - Menu, - MenuButton, - MenuItem, - MenuList, - Text, - useDisclosure, -} from "@chakra-ui/react"; -import { CacheRelay, clearDB } from "nostr-idb"; -import { Link as RouterLink } from "react-router-dom"; +import { Box, Button, Divider, Flex, Heading, Text, useDisclosure } from "@chakra-ui/react"; import BackButton from "../../../components/router/back-button"; -import { NOSTR_RELAY_TRAY_URL, checkNostrRelayTray, localDatabase, localRelay } from "../../../services/local-relay"; +import { localRelay } from "../../../services/local-relay"; import { ChevronDownIcon, ChevronUpIcon } from "../../../components/icons"; import WasmRelay from "../../../services/wasm-relay"; -import MemoryRelay from "../../../classes/memory-relay"; -import Trash01 from "../../../components/icons/trash-01"; - -function EnableWithDelete({ - enable, - enabled, - wipe, - ...props -}: Omit & { - enable: () => void; - enabled: boolean; - wipe: () => Promise; -}) { - const [deleting, setDeleting] = useState(false); - const wipeDatabase = useCallback(async () => { - try { - setDeleting(true); - await wipe(); - location.reload(); - } catch (error) {} - setDeleting(false); - }, []); - - return ( - - - - } aria-label="More options" /> - - } color="red.500" onClick={wipeDatabase}> - Clear Database - - - - - ); -} - -function InternalRelay() { - const enabled = localRelay instanceof CacheRelay; - const enable = () => { - localStorage.setItem("localRelay", "nostr-idb://internal"); - location.reload(); - }; - - const wipe = async () => { - await clearDB(localDatabase); - }; - - return ( - - - Browser Cache - - - - Use the browsers built-in database to cache events. - Maximum capacity: 10k events - Performance: Usable, but limited by the browser - - {enabled && ( - - - - )} - - ); -} - -function WasmWorkerRelay() { - const enabled = localRelay instanceof WasmRelay; - const enable = () => { - localStorage.setItem("localRelay", "nostr-idb://wasm-worker"); - location.reload(); - }; - - const wipe = async () => { - if (localRelay instanceof WasmRelay) { - await localRelay.wipe(); - } else { - // import and delete database - console.log("Importing worker to wipe database"); - const { default: worker } = await import("../../../services/wasm-relay/worker"); - await worker.wipe(); - } - }; - - return ( - - - Internal SQLite Cache - - - - - Use{" "} - - @snort/worker-relay - {" "} - with SQLite running in the browser. - - Maximum capacity: Unlimited - Performance: Slightly slower than Browser Cache - NOTE: Can increase the initial load time of the app by ~2 seconds - NOTE: Does not work well with multiple tabs - - {enabled && ( - - - - )} - - ); -} - -function NostrRelayTray() { - const { value: available, loading: checking } = useAsync(checkNostrRelayTray); - - const enabled = localRelay?.url.startsWith(NOSTR_RELAY_TRAY_URL); - const enable = () => { - localStorage.setItem("localRelay", NOSTR_RELAY_TRAY_URL); - location.reload(); - }; - - return ( - - - Nostr Relay Tray - - GitHub - - {available || enabled ? ( - - ) : ( - - )} - - - A cool little app that runs a local relay in your systems tray - Maximum capacity: Unlimited - Performance: As fast as your computer - - - ); -} - -function CitrineRelay() { - const { value: available, loading: checking } = useAsync(checkNostrRelayTray); - - const enabled = localRelay?.url.startsWith(NOSTR_RELAY_TRAY_URL); - const enable = () => { - localStorage.setItem("localRelay", NOSTR_RELAY_TRAY_URL); - location.reload(); - }; - - return ( - - - Citrine - - GitHub - - {available ? ( - - ) : ( - - )} - - - A cool little app that runs a local relay in your phone - Maximum capacity: Unlimited - Performance: As fast as your phone - - - ); -} - -function SatelliteRelay() { - const { value: relay } = useAsync(() => window.satellite!.getLocalRelay()); - const { value: enabled } = useAsync(async () => localRelay?.url === relay, [localRelay?.url, relay]); - const enable = () => { - if (relay) { - localStorage.setItem("localRelay", relay); - location.reload(); - } - }; - - return ( - - - Satellite Relay - - - - Satellite desktop exposes a local caching relay that can be used to store you events - Maximum capacity: Unlimited - Performance: As fast as your computer - - - ); -} - -function HostedRelay() { - const enabled = localRelay?.url.includes(location.host + "/local-relay"); - const enable = () => { - localStorage.removeItem("localRelay"); - location.reload(); - }; - - return ( - - - Hosted Relay - - - - Your installation of noStrudel is setup with a local relay that can be used as a cache - Maximum capacity: Unknown - Performance: Unknown, but probably fast... - - - ); -} - -function InMemoryRelay() { - const enabled = localRelay instanceof MemoryRelay; - const enable = () => { - localStorage.setItem("localRelay", ":memory:"); - location.reload(); - }; - - return ( - - - In-memory Cache - - - - Stores all events in memory - Maximum capacity: Unlimited, until your system freezes - Performance: Very fast - NOTE: All events are forgotten when you close the app - - {enabled && ( - - - - )} - - ); -} - -function NoLocalRelay() { - const enabled = localRelay === null; - const enable = () => { - localStorage.setItem("localRelay", ":none:"); - location.reload(); - }; - - return ( - - - No Cache - - - - No local relay, nothing is cached - Maximum capacity: 0 - Performance: As fast as the relays your connecting to - NOTE: Profiles and Timelines are still cached in memory - - - ); -} +import WasmRelayCard from "./components/wasm-relay-card"; +import InternalRelayCard from "./components/internal-relay-card"; +import CitrineRelayCard from "./components/citrine-relay-card"; +import NostrRelayTrayCard from "./components/nostr-relay-tray-card"; +import SatelliteRelayCard from "./components/satellite-relay-card"; +import HostedRelayCard from "./components/hosted-relay-card"; +import MemoryRelayCard from "./components/memory-relay-card"; +import NoRelayCard from "./components/no-relay-card"; export default function CacheRelayView() { const showAdvanced = useDisclosure({ defaultIsOpen: localRelay?.url === ":none:" || localRelay?.url === ":memory:" }); @@ -357,11 +25,11 @@ export default function CacheRelayView() { The cache relay is used to cache events locally so they can be loaded quickly - - {WasmRelay.SUPPORTED && } - {navigator.userAgent.includes("Android") ? : } - {window.satellite && } - {window.CACHE_RELAY_ENABLED && } + + {WasmRelay.SUPPORTED && } + {navigator.userAgent.includes("Android") ? : } + {window.satellite && } + {window.CACHE_RELAY_ENABLED && } {showAdvanced.isOpen && ( <> - - + + )}