Thread loading fixes

packages/app/src/Element/Thread.tsx

@@ -2,14 +2,14 @@ import "./Thread.css";
 import { useMemo, useState, ReactNode, useContext } from "react";
 import { useIntl } from "react-intl";
 import { useNavigate, useParams } from "react-router-dom";
-import { TaggedNostrEvent, u256, NostrPrefix, EventExt, parseNostrLink, NostrLink } from "@snort/system";
+import { TaggedNostrEvent, u256, NostrPrefix, EventExt, parseNostrLink } from "@snort/system";
 
-import { getReactions, getAllReactions, unwrap } from "SnortUtils";
+import { getReactions, getAllReactions } from "SnortUtils";
 import BackButton from "Element/BackButton";
 import Note from "Element/Note";
 import NoteGhost from "Element/NoteGhost";
 import Collapsed from "Element/Collapsed";
-import { ThreadContext, ThreadContextWrapper } from "Hooks/useThreadContext";
+import { ThreadContext, ThreadContextWrapper, chainKey } from "Hooks/useThreadContext";
 
 import messages from "./messages";
 
@@ -154,8 +154,9 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
   return (
     <>
       <div
-        className={`subthread-container ${hasMultipleNotes ? "subthread-multi" : ""} ${isLast ? "subthread-last" : "subthread-mid"
+        className={`subthread-container ${hasMultipleNotes ? "subthread-multi" : ""} ${
-          }`}>
+          isLast ? "subthread-last" : "subthread-mid"
+        }`}>
         <Divider variant="small" />
         <Note
           highlight={active === first.id}
@@ -184,8 +185,9 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
         return (
           <div
             key={r.id}
-            className={`subthread-container ${lastReply ? "" : "subthread-multi"} ${lastReply ? "subthread-last" : "subthread-mid"
+            className={`subthread-container ${lastReply ? "" : "subthread-multi"} ${
-              }`}>
+              lastReply ? "subthread-last" : "subthread-mid"
+            }`}>
             <Divider variant="small" />
             <Note
               className={`thread-note ${lastNote ? "is-last-note" : ""}`}
@@ -295,19 +297,35 @@ export function Thread(props: { onBack?: () => void }) {
     description: "Navigate back button on threads view",
   });
 
-  const rootChainId = (ev: TaggedNostrEvent) => {
+  const debug = window.location.search.includes("debug=true");
-    const link = NostrLink.fromEvent(ev);
-    return unwrap(link.toEventTag())[1];
-  }
-
   return (
     <>
+      {debug && (
+        <div className="main-content p xs">
+          <h1>Chains</h1>
+          <pre>
+            {JSON.stringify(
+              Object.fromEntries([...thread.chains.entries()].map(([k, v]) => [k, v.map(c => c.id)])),
+              undefined,
+              "  ",
+            )}
+          </pre>
+          <h1>Current</h1>
+          <pre>{JSON.stringify(thread.current)}</pre>
+          <h1>Root</h1>
+          <pre>{JSON.stringify(thread.root, undefined, "  ")}</pre>
+          <h1>Data</h1>
+          <pre>{JSON.stringify(thread.data, undefined, "  ")}</pre>
+          <h1>Reactions</h1>
+          <pre>{JSON.stringify(thread.reactions, undefined, "  ")}</pre>
+        </div>
+      )}
       <div className="main-content p">
         <BackButton onClick={goBack} text={parent ? parentText : backText} />
       </div>
       <div className="main-content">
         {thread.root && renderRoot(thread.root)}
-        {thread.root && renderChain(rootChainId(thread.root))}
+        {thread.root && renderChain(chainKey(thread.root))}
       </div>
     </>
   );

packages/app/src/Feed/Reactions.ts

@@ -10,13 +10,24 @@ export function useReactions(subId: string, ids: Array<NostrLink>, others?: (rb:
     const rb = new RequestBuilder(subId);
 
     if (ids.length > 0) {
-      rb
+      const grouped = ids.reduce(
-        .withFilter()
+        (acc, v) => {
-        .kinds(
+          acc[v.type] ??= [];
-          pref.enableReactions
+          acc[v.type].push(v);
-            ? [EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt]
+          return acc;
-            : [EventKind.ZapReceipt, EventKind.Repost],
+        },
-        ).replyToLink(ids);
+        {} as Record<string, Array<NostrLink>>,
+      );
+
+      for (const [, v] of Object.entries(grouped)) {
+        rb.withFilter()
+          .kinds(
+            pref.enableReactions
+              ? [EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt]
+              : [EventKind.ZapReceipt, EventKind.Repost],
+          )
+          .replyToLink(v);
+      }
     }
     others?.(rb);
     return rb.numFilters > 0 ? rb : null;

packages/app/src/Feed/ThreadFeed.ts

@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
-import { EventKind, NostrLink, RequestBuilder, NoteCollection } from "@snort/system";
+import { EventKind, NostrLink, RequestBuilder, NoteCollection, EventExt } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 
 import { useReactions } from "./Reactions";
 
 export default function useThreadFeed(link: NostrLink) {
+  const [root, setRoot] = useState<NostrLink>();
   const [allEvents, setAllEvents] = useState<Array<NostrLink>>([]);
 
   const sub = useMemo(() => {
@@ -13,7 +14,21 @@ export default function useThreadFeed(link: NostrLink) {
       leaveOpen: true,
     });
     sub.withFilter().link(link);
-    sub.withFilter().kinds([EventKind.TextNote]).replyToLink([link, ...allEvents]);
+    if (root) {
+      sub.withFilter().link(root);
+    }
+    const grouped = [link, ...allEvents].reduce(
+      (acc, v) => {
+        acc[v.type] ??= [];
+        acc[v.type].push(v);
+        return acc;
+      },
+      {} as Record<string, Array<NostrLink>>,
+    );
+
+    for (const [, v] of Object.entries(grouped)) {
+      sub.withFilter().kinds([EventKind.TextNote]).replyToLink(v);
+    }
     return sub;
   }, [allEvents.length]);
 
@@ -28,6 +43,24 @@ export default function useThreadFeed(link: NostrLink) {
         ])
         .flat();
       setAllEvents(links);
+
+      const current = store.data.find(a => link.matchesEvent(a));
+      if (current) {
+        const t = EventExt.extractThread(current);
+        if (t) {
+          const rootOrReplyAsRoot = t?.root ?? t?.replyTo;
+          if (rootOrReplyAsRoot) {
+            setRoot(
+              NostrLink.fromTag([
+                rootOrReplyAsRoot.key,
+                rootOrReplyAsRoot.value ?? "",
+                rootOrReplyAsRoot.relay ?? "",
+                ...(rootOrReplyAsRoot.marker ?? []),
+              ]),
+            );
+          }
+        }
+      }
     }
   }, [store.data?.length]);
 

packages/app/src/Hooks/useThreadContext.tsx

@@ -1,7 +1,7 @@
+/* eslint-disable no-debugger */
 import { unwrap } from "@snort/shared";
-import { EventExt, NostrLink, NostrPrefix, TaggedNostrEvent, u256, Thread as ThreadInfo } from "@snort/system";
+import { EventExt, NostrLink, TaggedNostrEvent, u256 } from "@snort/system";
 import useThreadFeed from "Feed/ThreadFeed";
-import { findTag } from "SnortUtils";
 import { ReactNode, createContext, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 
@@ -10,21 +10,31 @@ export interface ThreadContext {
   root?: TaggedNostrEvent;
   chains: Map<string, Array<TaggedNostrEvent>>;
   data: Array<TaggedNostrEvent>;
+  reactions: Array<TaggedNostrEvent>;
   setCurrent: (i: string) => void;
 }
 
 export const ThreadContext = createContext({} as ThreadContext);
 
-export function threadChainKey(ev: TaggedNostrEvent) {
+/**
+ * Get the chain key as a reply event
+ */
+export function replyChainKey(ev: TaggedNostrEvent) {
   const t = EventExt.extractThread(ev);
-  if (t) {
+  return t?.replyTo?.value ?? t?.root?.value;
-    return unwrap(t.replyTo?.value ?? t.root?.value);
+}
-  }
+
+/**
+ * Get the chain key of this event
+ */
+export function chainKey(ev: TaggedNostrEvent) {
+  const link = NostrLink.fromEvent(ev);
+  return unwrap(link.toEventTag())[1];
 }
 
 export function ThreadContextWrapper({ link, children }: { link: NostrLink; children?: ReactNode }) {
   const location = useLocation();
-  const [currentId, setCurrentId] = useState(link.id);
+  const [currentId, setCurrentId] = useState(unwrap(link.toEventTag())[1]);
   const feed = useThreadFeed(link);
 
   const chains = useMemo(() => {
@@ -33,7 +43,7 @@ export function ThreadContextWrapper({ link, children }: { link: NostrLink; chil
       feed.thread
         ?.sort((a, b) => b.created_at - a.created_at)
         .forEach(v => {
-          const replyTo = threadChainKey(v);
+          const replyTo = replyChainKey(v);
           if (replyTo) {
             if (!chains.has(replyTo)) {
               chains.set(replyTo, [v]);
@@ -49,58 +59,27 @@ export function ThreadContextWrapper({ link, children }: { link: NostrLink; chil
   // Root is the parent of the current note or the current note if its a root note or the root of the thread
   const root = useMemo(() => {
     const currentNote =
-      feed.thread?.find(
+      feed.thread?.find(a => chainKey(a) === currentId) ??
-        ne =>
+      (location.state && "sig" in location.state ? (location.state as TaggedNostrEvent) : undefined);
-          ne.id === currentId ||
-          (link.type === NostrPrefix.Address && findTag(ne, "d") === currentId && ne.pubkey === link.author),
-      ) ?? (location.state && "sig" in location.state ? (location.state as TaggedNostrEvent) : undefined);
     if (currentNote) {
-      const currentThread = EventExt.extractThread(currentNote);
+      const key = replyChainKey(currentNote);
-      const isRoot = (ne?: ThreadInfo) => ne === undefined;
+      if (key) {
-
+        return feed.thread?.find(a => chainKey(a) === key);
-      if (isRoot(currentThread)) {
+      } else {
         return currentNote;
       }
-      const replyTo = currentThread?.replyTo ?? currentThread?.root;
-
-      // sometimes the root event ID is missing, and we can only take the happy path if the root event ID exists
-      if (replyTo) {
-        if (replyTo.key === "a" && replyTo.value) {
-          const parsed = replyTo.value.split(":");
-          return feed.thread?.find(
-            a => a.kind === Number(parsed[0]) && a.pubkey === parsed[1] && findTag(a, "d") === parsed[2],
-          );
-        }
-        if (replyTo.value) {
-          return feed.thread?.find(a => a.id === replyTo.value);
-        }
-      }
-
-      const possibleRoots = feed.thread?.filter(a => {
-        const thread = EventExt.extractThread(a);
-        return isRoot(thread);
-      });
-      if (possibleRoots) {
-        // worst case we need to check every possible root to see which one contains the current note as a child
-        for (const ne of possibleRoots) {
-          const children = chains.get(ne.id) ?? [];
-
-          if (children.find(ne => ne.id === currentId)) {
-            return ne;
-          }
-        }
-      }
     }
   }, [feed.thread.length, currentId, location]);
 
-  const ctxValue = useMemo(() => {
+  const ctxValue = useMemo<ThreadContext>(() => {
     return {
       current: currentId,
       root,
       chains,
-      data: feed.reactions,
+      reactions: feed.reactions,
+      data: feed.thread,
       setCurrent: v => setCurrentId(v),
-    } as ThreadContext;
+    };
   }, [root, chains]);
 
   return <ThreadContext.Provider value={ctxValue}>{children}</ThreadContext.Provider>;

packages/app/src/index.css

@@ -539,7 +539,7 @@ div.form-col {
   height: 100vh;
 }
 
-small.xs {
+.xs {
   font-size: small;
 }
 

packages/system/src/gossip-model.ts

@@ -84,7 +84,7 @@ export function splitByWriteRelays(cache: RelayCache, filter: ReqFilter): Array<
       },
     });
   }
-  debug("GOSSIP")("Picked %o", picked);
+  debug("GOSSIP")("Picked %O => %O", filter, picked);
   return picked;
 }
 
@@ -119,7 +119,7 @@ export function splitFlatByWriteRelays(cache: RelayCache, input: Array<FlatReqFi
     } as RelayTaggedFlatFilters);
   }
 
-  debug("GOSSIP")("Picked %o", picked);
+  debug("GOSSIP")("Picked %d relays from %d filters", picked.length, input.length);
   return picked;
 }
 

packages/system/src/request-builder.ts

@@ -1,6 +1,6 @@
 import debug from "debug";
 import { v4 as uuid } from "uuid";
-import { appendDedupe, sanitizeRelayUrl, unixNowMs, unwrap } from "@snort/shared";
+import { appendDedupe, dedupe, sanitizeRelayUrl, unixNowMs, unwrap } from "@snort/shared";
 
 import EventKind from "./event-kind";
 import { NostrLink, NostrPrefix, SystemInterface } from "index";
@@ -219,9 +219,9 @@ export class RequestFilterBuilder {
     return this;
   }
 
-  tag(key: "e" | "p" | "d" | "t" | "r" | "a" | "g", value?: Array<string>) {
+  tag(key: "e" | "p" | "d" | "t" | "r" | "a" | "g" | string, value?: Array<string>) {
     if (!value) return this;
-    this.#filter[`#${key}`] = appendDedupe(this.#filter[`#${key}`], value);
+    this.#filter[`#${key}`] = appendDedupe(this.#filter[`#${key}`] as Array<string>, value);
     return this;
   }
 
@@ -239,11 +239,10 @@ export class RequestFilterBuilder {
       this.tag("d", [link.id])
         .kinds([unwrap(link.kind)])
         .authors([unwrap(link.author)]);
-      link.relays?.forEach(v => this.relay(v));
     } else {
       this.ids([link.id]);
-      link.relays?.forEach(v => this.relay(v));
     }
+    link.relays?.forEach(v => this.relay(v));
     return this;
   }
 
@@ -251,27 +250,14 @@ export class RequestFilterBuilder {
    * Get replies to link with e/a tags
    */
   replyToLink(links: Array<NostrLink>) {
-    const grouped = links.reduce((acc, v) => {
+    const types = dedupe(links.map(a => a.type));
-      acc[v.type] ??= [];
+    if (types.length > 1) throw new Error("Cannot add multiple links of different kinds");
-      if (v.type === NostrPrefix.Address) {
-        acc[v.type].push(`${v.kind}:${v.author}:${v.id}`);
-      } else if (v.type === NostrPrefix.PublicKey || v.type === NostrPrefix.Profile) {
-        acc[v.type].push(v.id);
-      } else {
-        acc[v.type].push(v.id);
-      }
-      return acc;
-    }, {} as Record<string, Array<string>>);
 
-    for(const [k,v] of Object.entries(grouped)) {
+    const tags = links.map(a => unwrap(a.toEventTag()));
-      if (k === NostrPrefix.Address) {
+    this.tag(
-        this.tag("a", v);
+      tags[0][0],
-      } else if (k === NostrPrefix.PublicKey || k === NostrPrefix.Profile) {
+      tags.map(v => v[1]),
-        this.tag("p", v);
+    );
-      } else {
-        this.tag("e", v);
-      }
-    }
     return this;
   }