refactor: reactions grouping and other fixes

packages/system-react/README.md

@@ -4,7 +4,7 @@ React hooks for @snort/system
 
 ### Available hooks
 
-#### `useRequestBuilder(NoteStore, RequestBuilder)`
+#### `useRequestBuilder(RequestBuilder)`
 
 The main hook which allows you to subscribe to nostr relays and returns a reactive store.
 
@@ -63,10 +63,10 @@ export function UserPosts(props: { pubkey: string }) {
     return rb;
   }, [props.pubkey]);
 
-  const data = useRequestBuilder(NoteCollection, sub);
+  const data = useRequestBuilder(sub);
   return (
     <>
-      {data.data.map(a => (
+      {data.map(a => (
         <Note ev={a} />
       ))}
     </>

packages/system-react/example/example.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { SnortContext, useRequestBuilder, useUserProfile } from "../src";
 
-import { NostrSystem, NoteCollection, RequestBuilder, TaggedNostrEvent } from "@snort/system";
+import { NostrSystem, RequestBuilder, TaggedNostrEvent } from "@snort/system";
 
 const System = new NostrSystem({});
 
@@ -13,7 +13,7 @@ export function Note({ ev }: { ev: TaggedNostrEvent }) {
 
   return (
     <div>
-      Post by: {profile.name ?? profile.display_name}
+      Post by: {profile?.name ?? profile?.display_name}
       <p>{ev.content}</p>
     </div>
   );
@@ -27,10 +27,10 @@ export function UserPosts(props: { pubkey: string }) {
     return rb;
   }, [props.pubkey]);
 
-  const data = useRequestBuilder(NoteCollection, sub);
+  const data = useRequestBuilder(sub);
   return (
     <>
-      {data.data.map(a => (
+      {data.map(a => (
         <Note ev={a} />
       ))}
     </>

packages/system-react/src/useEventFeed.ts

@@ -9,7 +9,7 @@ export function useEventFeed(link: NostrLink) {
     return b;
   }, [link]);
 
-  return useRequestBuilder(sub);
+  return useRequestBuilder(sub).at(0);
 }
 
 export function useEventsFeed(id: string, links: Array<NostrLink>) {

packages/system-react/src/useReactions.ts

@@ -27,7 +27,7 @@ export function useReactions(
       }
     }
     others?.(rb);
-    return rb.numFilters > 0 ? rb : null;
+    return rb.numFilters > 0 ? rb : undefined;
   }, [ids]);
 
   return useRequestBuilder(sub);

packages/system-react/src/useRequestBuilder.tsx

@@ -1,40 +1,55 @@
-import { useContext, useSyncExternalStore } from "react";
-import { RequestBuilder, EmptySnapshot, NoteStore, StoreSnapshot } from "@snort/system";
-import { unwrap } from "@snort/shared";
+import { useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import { EmptySnapshot, RequestBuilder } from "@snort/system";
 import { SnortContext } from "./context";
 
 /**
  * Send a query to the relays and wait for data
  */
-const useRequestBuilder = (
-  rb: RequestBuilder | null,
-) => {
+export function useRequestBuilder(rb: RequestBuilder | null | undefined) {
   const system = useContext(SnortContext);
-  const subscribe = (onChanged: () => void) => {
+  return useSyncExternalStore(
+    v => {
+      if (rb) {
+        const q = system.Query(rb);
+        q.on("event", v);
+        q.uncancel();
+        return () => {
+          q.off("event", v);
+          q.cancel();
+        };
+      }
+      return () => {
+        // noop
+      };
+    },
+    () => {
+      const q = system.GetQuery(rb?.id ?? "");
+      if (q) {
+        return q.snapshot;
+      } else {
+        return EmptySnapshot;
+      }
+    },
+  );
+}
+
+/**
+ * More advanced hook which returns the Query object
+ */
+export function useRequestBuilderAdvanced(rb: RequestBuilder | null | undefined) {
+  const system = useContext(SnortContext);
+  const q = useMemo(() => {
     if (rb) {
       const q = system.Query(rb);
-      q.on("event", onChanged);
       q.uncancel();
-      return () => {
-        q.off("event", onChanged);
-        q.cancel();
-      };
+      return q;
     }
+  }, [rb]);
+  useEffect(() => {
     return () => {
-      // noop
+      q?.cancel();
     };
-  };
-  const getState = () => {
-    const q = system.GetQuery(rb?.id ?? "");
-    if (q) {
-      return q.snapshot;
-    }
-    return EmptySnapshot;
-  };
-  return useSyncExternalStore(
-    v => subscribe(v),
-    () => getState(),
-  );
-};
+  }, [q]);
 
-export { useRequestBuilder };
+  return q;
+}