feat(app): rought our url persistence

src/state/RecoilSyncLocalStorage.tsx

@@ -0,0 +1,84 @@
+import { useCallback, ReactNode } from "react";
+import { DefaultValue } from "recoil";
+import { ReadItem, WriteItems, ListenToItems, RecoilSync } from "recoil-sync";
+import { STORAGE_KEY } from ".";
+
+const DEFAULT_VALUE = new DefaultValue();
+
+export default ({ children }: { children: ReactNode }) => {
+  const read: ReadItem = useCallback((itemKey) => {
+    if (typeof document === "undefined") return DEFAULT_VALUE; // SSR
+
+    const item = localStorage.getItem(itemKey);
+
+    let parsed: unknown;
+
+    try {
+      parsed = item === null ? DEFAULT_VALUE : parseJSON(item);
+    } catch {
+      parsed = DEFAULT_VALUE;
+      console.warn({ itemKey, item }, "parseJSON failed");
+    }
+
+    return parsed;
+  }, []);
+
+  const write: WriteItems = useCallback(({ diff }) => {
+    if (typeof document === "undefined") return; // SSR
+
+    for (const [key, value] of diff) {
+      if (value instanceof DefaultValue) {
+        localStorage.removeItem(key);
+      } else {
+        // reasons for setItem to fail: https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#exceptions
+        try {
+          localStorage.setItem(key, JSON.stringify(value));
+        } catch (err) {
+          console.warn({ err, key, value }, "localStorage.setItem failed");
+        }
+      }
+    }
+  }, []);
+
+  const listen: ListenToItems = useCallback(
+    ({ updateItem, updateAllKnownItems }) => {
+      const onStorage = (event: StorageEvent) => {
+        // ignore clear() calls
+        if (event.storageArea === localStorage && event.key !== null) {
+          let parsed: unknown;
+          try {
+            parsed =
+              event.newValue === null
+                ? DEFAULT_VALUE
+                : parseJSON(event.newValue);
+          } catch {
+            parsed = DEFAULT_VALUE;
+            console.warn({ event }, "parseJSON failed");
+          }
+
+          updateItem(event.key, parsed);
+        }
+      };
+
+      window.addEventListener("storage", onStorage);
+
+      return () => window.removeEventListener("storage", onStorage);
+    },
+    []
+  );
+
+  return (
+    <RecoilSync
+      storeKey={STORAGE_KEY}
+      read={read}
+      write={write}
+      listen={listen}
+    >
+      {children}
+    </RecoilSync>
+  );
+};
+
+function parseJSON(value: string): unknown {
+  return value === "undefined" ? undefined : JSON.parse(value);
+}

src/state/atoms.ts

@@ -1,25 +1,65 @@
 import { atom } from "recoil";
+import { syncEffect } from "recoil-sync";
+import { custom, number, string, stringLiterals } from "@recoiljs/refine";
 import { IconStyle } from "@phosphor-icons/core";
 import { IconEntry } from "@/lib";
 
 export const searchQueryAtom = atom<string>({
   key: "searchQuery",
   default: "",
+  effects: [
+    syncEffect({
+      itemKey: "q",
+      refine: custom((q) => {
+        return (q as string) ?? "";
+      }),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconWeightAtom = atom<IconStyle>({
   key: "iconWeight",
   default: IconStyle.REGULAR,
+  effects: [
+    syncEffect<IconStyle>({
+      itemKey: "weight",
+      refine: custom((w) => {
+        const isWeight = (w as string)?.toUpperCase?.() in IconStyle;
+        return isWeight ? (w as IconStyle) : IconStyle.REGULAR;
+      }, `Unrecognized weight`),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconSizeAtom = atom<number>({
   key: "iconSize",
   default: 32,
+  effects: [
+    syncEffect({
+      itemKey: "size",
+      refine: custom((s) => {
+        const size = Number.isFinite(Number(s)) ? Number(s) : 32;
+        return Math.min(Math.max(size, 16), 96);
+      }),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconColorAtom = atom<string>({
   key: "iconColor",
   default: "#000000",
+  effects: [
+    syncEffect({
+      itemKey: "color",
+      refine: custom((c) => {
+        return (c as string) ?? "#000000";
+      }),
+      syncDefault: false,
+    }),
+  ],
 });
 
 export const iconPreviewOpenAtom = atom<string | false>({

src/state/selectors.ts

@@ -1,5 +1,6 @@
 import { selector, selectorFamily } from "recoil";
 import TinyColor from "tinycolor2";
+// @ts-ignore
 import Fuse from "fuse.js";
 import { IconCategory } from "@phosphor-icons/core";
 
@@ -26,6 +27,7 @@ export const filteredQueryResultsSelector = selector<ReadonlyArray<IconEntry>>({
     if (!query) return icons;
 
     return new Promise((resolve) =>
+      // @ts-ignore
       resolve(fuse.search(query).map((value) => value.item))
     );
   },