feat: interaction cache

packages/app/src/Hooks/useClientWidth.tsx

@@ -1,20 +0,0 @@
-import { useRef, useState, useEffect } from "react";
-
-export default function useClientWidth() {
-  const ref = useRef<HTMLDivElement | null>(document.querySelector(".page"));
-  const [width, setWidth] = useState(0);
-
-  useEffect(() => {
-    const updateSize = () => {
-      if (ref.current) {
-        setWidth(ref.current.offsetWidth);
-      }
-    };
-
-    window.addEventListener("resize", updateSize);
-    updateSize();
-    return () => window.removeEventListener("resize", updateSize);
-  }, [ref]);
-
-  return width;
-}

packages/app/src/Hooks/useInteractionCache.tsx

@@ -0,0 +1,44 @@
+import { useSyncExternalStore } from "react";
+import { HexKey, u256 } from "@snort/nostr";
+
+import { InteractionCache } from "Cache/EventInteractionCache";
+import { EventInteraction } from "Db";
+import { sha256, unwrap } from "Util";
+
+export function useInteractionCache(pubkey?: HexKey, event?: u256) {
+  const id = event && pubkey ? sha256(event + pubkey) : undefined;
+  const EmptyInteraction = {
+    id,
+    event,
+    by: pubkey,
+  } as EventInteraction;
+  const data =
+    useSyncExternalStore(
+      c => InteractionCache.hook(c, id),
+      () => InteractionCache.snapshot()[0]
+    ) || EmptyInteraction;
+  return {
+    data: data,
+    react: () =>
+      InteractionCache.set({
+        ...data,
+        event: unwrap(event),
+        by: unwrap(pubkey),
+        reacted: true,
+      }),
+    zap: () =>
+      InteractionCache.set({
+        ...data,
+        event: unwrap(event),
+        by: unwrap(pubkey),
+        zapped: true,
+      }),
+    repost: () =>
+      InteractionCache.set({
+        ...data,
+        event: unwrap(event),
+        by: unwrap(pubkey),
+        reposted: true,
+      }),
+  };
+}