fix: reactions loading

packages/app/src/Components/Event/LongFormText.tsx

@@ -1,9 +1,8 @@
 import "./LongFormText.css";
 
-import { NostrLink, TaggedNostrEvent } from "@snort/system";
-import { useEventReactions, useReactions } from "@snort/system-react";
+import { TaggedNostrEvent } from "@snort/system";
 import classNames from "classnames";
-import React, { CSSProperties, useCallback, useRef, useState } from "react";
+import { CSSProperties, useCallback, useRef, useState } from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
 
 import Text from "@/Components/Text/Text";
@@ -32,8 +31,6 @@ export function LongFormText(props: LongFormTextProps) {
   const [reading, setReading] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const related = useReactions("note:reactions", [NostrLink.fromEvent(props.ev)], undefined, false);
-  const { reactions, reposts, zaps } = useEventReactions(NostrLink.fromEvent(props.ev), related);
 
   function previewText() {
     return (
@@ -114,7 +111,7 @@ export function LongFormText(props: LongFormTextProps) {
   function fullText() {
     return (
       <>
-        <NoteFooter ev={props.ev} reposts={reposts} zaps={zaps} positive={reactions.positive} />
+        <NoteFooter ev={props.ev} />
         <hr />
         <div className="flex g8">
           <div>
@@ -143,7 +140,7 @@ export function LongFormText(props: LongFormTextProps) {
         <Markdown content={content} tags={props.ev.tags} ref={ref} />
         {shouldTruncate && !showMore && <ToggleShowMore />}
         <hr />
-        <NoteFooter ev={props.ev} reposts={reposts} zaps={zaps} positive={reactions.positive} />
+        <NoteFooter ev={props.ev} />
       </>
     );
   }

packages/app/src/Components/Event/Note/NoteFooter/NoteFooter.tsx

@@ -19,10 +19,9 @@ export interface NoteFooterProps {
 export default function NoteFooter(props: NoteFooterProps) {
   const { ev } = props;
   const link = useMemo(() => NostrLink.fromEvent(ev), [ev.id]);
-  const ids = useMemo(() => [link], [link]);
   const [showReactions, setShowReactions] = useState(false);
 
-  const related = useReactions("reactions", ids, undefined, false);
+  const related = useReactions(`reactions:${link.tagKey}`, link);
   const { replies, reactions, zaps, reposts } = useEventReactions(link, related);
   const { positive } = reactions;
 

packages/app/src/Components/Event/Note/ReactionsModal.tsx

@@ -25,7 +25,7 @@ const ReactionsModal = ({ onClose, event, initialTab = 0 }: ReactionsModalProps)
 
   const link = NostrLink.fromEvent(event);
 
-  const related = useReactions("note:reactions", [link], undefined, false);
+  const related = useReactions(`reactions:${link.tagKey}`, link, undefined, false);
   const { reactions, zaps, reposts } = useEventReactions(link, related);
   const { positive, negative } = reactions;
 

packages/system-react/src/useReactions.ts

@@ -4,7 +4,7 @@ import { useRequestBuilder } from "./useRequestBuilder";
 
 export function useReactions(
   subId: string,
-  ids: Array<NostrLink>,
+  ids: NostrLink | Array<NostrLink>,
   others?: (rb: RequestBuilder) => void,
   leaveOpen?: boolean,
 ) {
@@ -12,8 +12,9 @@ export function useReactions(
     const rb = new RequestBuilder(subId);
     rb.withOptions({ leaveOpen });
 
-    if (ids.length > 0) {
-      const grouped = ids.reduce(
+    const links = Array.isArray(ids) ? ids : [ids];
+    if (links.length > 0) {
+      const grouped = links.reduce(
         (acc, v) => {
           acc[v.type] ??= [];
           acc[v.type].push(v);
@@ -22,7 +23,7 @@ export function useReactions(
         {} as Record<string, Array<NostrLink>>,
       );
 
-      for (const [, v] of Object.entries(grouped)) {
+      for (const v of Object.values(grouped)) {
         rb.withFilter()
           .kinds([EventKind.TextNote, EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt])
           .replyToLink(v);

packages/system/src/request-builder.ts

@@ -129,10 +129,13 @@ export class RequestBuilder {
       rawFilters = system.requestRouter.forAllRequest(rawFilters);
     }
     const diff = system.optimizer.getDiff(prev, rawFilters);
-    const ts = unixNowMs() - start;
-    this.#log("buildDiff %s %d ms +%d", this.id, ts, diff.length);
     if (diff.length > 0) {
-      return this.#groupFlatByRelay(system, diff);
+      const ret = this.#groupFlatByRelay(system, diff);
+      const ts = unixNowMs() - start;
+      if (ts >= 100) {
+        this.#log("slow diff %s %d ms, consider separate query ids, or use skipDiff: %O", this.id, ts, ret);
+      }
+      return ret;
     }
     return [];
   }
@@ -151,6 +154,7 @@ export class RequestBuilder {
       return acc;
     }, new Map<string, Array<FlatReqFilter>>());
 
+
     const ret = [];
     for (const [k, v] of relayMerged.entries()) {
       const filters = system.optimizer.flatMerge(v);
@@ -185,6 +189,10 @@ export class RequestFilterBuilder {
   relay(u: string | Array<string>) {
     const relays = Array.isArray(u) ? u : [u];
     this.#filter.relays = appendDedupe(this.#filter.relays, removeUndefined(relays.map(a => sanitizeRelayUrl(a))));
+    // make sure we dont have an empty array
+    if (this.#filter.relays?.length === 0) {
+      this.#filter.relays = undefined;
+    }
     return this;
   }
 
@@ -279,7 +287,7 @@ export class RequestFilterBuilder {
     const types = dedupe(links.map(a => a.type));
     if (types.length > 1) throw new Error("Cannot add multiple links of different kinds");
 
-    const tags = links.map(a => unwrap(a.toEventTag()));
+    const tags = removeUndefined(links.map(a => a.toEventTag()));
     this.tag(
       tags[0][0],
       tags.map(v => v[1]),