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)}`);

src/hooks/emoji.tsx

@@ -33,13 +33,10 @@ export function packId(pack: EmojiPack): string {
   return `${pack.author}:${pack.name}`;
 }
 
-export function useUserEmojiPacks(
-  pubkey?: string,
-  userEmoji: { tags: string[][] },
-) {
+export function useUserEmojiPacks(pubkey?: string, userEmoji: Array<string[]>) {
   const related = useMemo(() => {
-    if (userEmoji) {
-      return userEmoji.tags.filter(
+    if (userEmoji?.length > 0) {
+      return userEmoji.filter(
         (t) => t.at(0) === "a" && t.at(1)?.startsWith(`${EMOJI_PACK}:`),
       );
     }
@@ -101,6 +98,6 @@ export default function useEmoji(pubkey?: string) {
     sub,
   );
 
-  const emojis = useUserEmojiPacks(pubkey, userEmoji ?? { tags: [] });
+  const emojis = useUserEmojiPacks(pubkey, userEmoji?.tags ?? []);
   return emojis;
 }

src/hooks/login.ts

@@ -4,7 +4,7 @@ import { EventKind, NoteCollection, RequestBuilder } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 
 import { useUserEmojiPacks } from "hooks/emoji";
-import { MUTED, USER_EMOJIS } from "const";
+import { MUTED, USER_CARDS, USER_EMOJIS } from "const";
 import { System, Login } from "index";
 import { getPublisher } from "login";
 
@@ -46,7 +46,13 @@ export function useLoginEvents(pubkey?: string, leaveOpen = false) {
     })
       .withFilter()
       .authors([pubkey])
-      .kinds([EventKind.ContactList, EventKind.Relays, MUTED, USER_EMOJIS]);
+      .kinds([
+        EventKind.ContactList,
+        EventKind.Relays,
+        MUTED,
+        USER_EMOJIS,
+        USER_CARDS,
+      ]);
     return b;
   }, [pubkey, leaveOpen]);
 
@@ -64,6 +70,9 @@ export function useLoginEvents(pubkey?: string, leaveOpen = false) {
       if (ev?.kind === USER_EMOJIS) {
         setUserEmojis(ev.tags);
       }
+      if (ev?.kind === USER_CARDS) {
+        Login.setCards(ev.tags, ev.created_at);
+      }
       if (ev?.kind === MUTED) {
         Login.setMuted(ev.tags, ev.content, ev.created_at);
       }
@@ -76,7 +85,7 @@ export function useLoginEvents(pubkey?: string, leaveOpen = false) {
     }
   }, [data]);
 
-  const emojis = useUserEmojiPacks(pubkey, { tags: userEmojis });
+  const emojis = useUserEmojiPacks(pubkey, userEmojis);
   useEffect(() => {
     Login.setEmojis(emojis);
   }, [emojis]);