feat: optimistic update for cards

src/hooks/cards.ts

@@ -11,6 +11,67 @@ import { USER_CARDS, CARD } from "const";
 import { findTag } from "utils";
 import { System } from "index";
 
+export function useUserCards(
+  pubkey: string,
+  userCards: Array<string[]>,
+  leaveOpen = false,
+) {
+  const related = useMemo(() => {
+    // filtering to only show CARD kinds for now, but in the future we could link and render anything
+    if (userCards?.length > 0) {
+      return userCards.filter(
+        (t) => t.at(0) === "a" && t.at(1)?.startsWith(`${CARD}:`),
+      );
+    }
+    return [];
+  }, [userCards]);
+
+  const subRelated = useMemo(() => {
+    if (!pubkey) return null;
+    const splitted = related.map((t) => t.at(1)!.split(":"));
+    const authors = splitted
+      .map((s) => s.at(1))
+      .filter((s) => s)
+      .map((s) => s as string);
+    const identifiers = splitted
+      .map((s) => s.at(2))
+      .filter((s) => s)
+      .map((s) => s as string);
+
+    const rb = new RequestBuilder(`cards:${pubkey}`);
+    rb.withOptions({ leaveOpen })
+      .withFilter()
+      .kinds([CARD])
+      .authors(authors)
+      .tag("d", identifiers);
+
+    return rb;
+  }, [pubkey, related]);
+
+  const { data } = useRequestBuilder<NoteCollection>(
+    System,
+    NoteCollection,
+    subRelated,
+  );
+
+  const cards = useMemo(() => {
+    return related
+      .map((t) => {
+        const [k, pubkey, identifier] = t.at(1).split(":");
+        const kind = Number(k);
+        return (data ?? []).find(
+          (e) =>
+            e.kind === kind &&
+            e.pubkey === pubkey &&
+            findTag(e, "d") === identifier,
+        );
+      })
+      .filter((e) => e);
+  }, [related, data]);
+
+  return cards;
+}
+
 export function useCards(pubkey: string, leaveOpen = false) {
   const sub = useMemo(() => {
     const b = new RequestBuilder(`user-cards:${pubkey.slice(0, 12)}`);