dont pass related to notes

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

@@ -1,7 +1,7 @@
 import "./LongFormText.css";
 
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
-import { useEventReactions } from "@snort/system-react";
+import {useEventReactions, useReactions} from "@snort/system-react";
 import classNames from "classnames";
 import React, { CSSProperties, useCallback, useRef, useState } from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
@@ -18,7 +18,6 @@ import NoteTime from "./NoteTime";
 interface LongFormTextProps {
   ev: TaggedNostrEvent;
   isPreview: boolean;
-  related: ReadonlyArray<TaggedNostrEvent>;
   onClick?: () => void;
   truncate?: boolean;
 }
@@ -33,7 +32,13 @@ export function LongFormText(props: LongFormTextProps) {
   const [reading, setReading] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const { reactions, reposts, zaps } = useEventReactions(NostrLink.fromEvent(props.ev), props.related);
+  const related = useReactions(
+    NostrLink.fromEvent(props.ev).id + "related",
+    [NostrLink.fromEvent(props.ev)],
+    undefined,
+    true,
+  );
+  const { reactions, reposts, zaps } = useEventReactions(NostrLink.fromEvent(props.ev), related.data ?? []);
 
   function previewText() {
     return (

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

@@ -18,7 +18,6 @@ import { NoteInner } from "./NoteInner";
 export interface NoteProps {
   data: TaggedNostrEvent;
   className?: string;
-  related: readonly TaggedNostrEvent[];
   highlight?: boolean;
   ignoreModeration?: boolean;
   onClick?: (e: TaggedNostrEvent) => void;
@@ -78,7 +77,6 @@ export default memo(function Note(props: NoteProps) {
       content = (
         <LongFormText
           ev={ev}
-          related={props.related}
           isPreview={props.options?.longFormPreview ?? false}
           onClick={() => props.onClick?.(ev)}
           truncate={props.options?.truncate}

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

@@ -1,6 +1,6 @@
 import { normalizeReaction } from "@snort/shared";
 import { countLeadingZeros, NostrLink, ParsedZap, TaggedNostrEvent } from "@snort/system";
-import { useUserProfile } from "@snort/system-react";
+import { useEventReactions, useReactions, useUserProfile } from "@snort/system-react";
 import { Menu, MenuItem } from "@szhsin/react-menu";
 import classNames from "classnames";
 import React, { forwardRef, useEffect, useState } from "react";
@@ -37,15 +37,18 @@ const barrierZapper = async <T,>(then: () => Promise<T>): Promise<T> => {
 };
 
 export interface NoteFooterProps {
-  reposts: TaggedNostrEvent[];
-  zaps: ParsedZap[];
-  positive: TaggedNostrEvent[];
   replies?: number;
   ev: TaggedNostrEvent;
 }
 
 export default function NoteFooter(props: NoteFooterProps) {
-  const { ev, positive, reposts, zaps } = props;
+  const { ev } = props;
+  const link = NostrLink.fromEvent(ev);
+
+  const related = useReactions(link.id + "related", [link], undefined, true);
+  const { reactions, zaps, reposts } = useEventReactions(link, related.data ?? []);
+  const { positive } = reactions;
+
   const { formatMessage } = useIntl();
   const {
     publicKey,
@@ -119,7 +122,7 @@ export default function NoteFooter(props: NoteFooterProps) {
           name: getDisplayName(author, ev.pubkey),
           zap: {
             pubkey: ev.pubkey,
-            event: NostrLink.fromEvent(ev),
+            event: link,
           },
         } as ZapTarget,
       ];

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

@@ -1,5 +1,4 @@
 import { EventExt, EventKind, HexKey, NostrLink, NostrPrefix, TaggedNostrEvent } from "@snort/system";
-import { useEventReactions } from "@snort/system-react";
 import classNames from "classnames";
 import React, { ReactNode, useMemo, useState } from "react";
 import { useInView } from "react-intersection-observer";
@@ -40,7 +39,6 @@ export function NoteInner(props: NoteProps) {
 
   const { isEventMuted } = useModeration();
   const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
-  const { reactions, reposts, deletions, zaps } = useEventReactions(NostrLink.fromEvent(ev), related);
   const login = useLogin();
   const { pinned, bookmarked } = useLogin();
   const { publisher, system } = useEventPublisher();
@@ -49,8 +47,6 @@ export function NoteInner(props: NoteProps) {
   const { formatMessage } = useIntl();
   const [showMore, setShowMore] = useState(false);
 
-  const totalReactions = reactions.positive.length + reactions.negative.length + reposts.length + zaps.length;
-
   const options = {
     showHeader: true,
     showTime: true,
@@ -135,13 +131,6 @@ export function NoteInner(props: NoteProps) {
   ]);
 
   const transformBody = () => {
-    if (deletions?.length > 0) {
-      return (
-        <b className="error">
-          <FormattedMessage {...messages.Deleted} />
-        </b>
-      );
-    }
     if (!login.appData.item.showContentWarningPosts) {
       const contentWarning = ev.tags.find(a => a[0] === "content-warning");
       if (contentWarning) {
@@ -323,7 +312,7 @@ export function NoteInner(props: NoteProps) {
   function pollOptions() {
     if (ev.kind !== EventKind.Polls) return;
 
-    return <Poll ev={ev} zaps={zaps} />;
+    return <Poll ev={ev} />;
   }
 
   function content() {
@@ -373,29 +362,9 @@ export function NoteInner(props: NoteProps) {
           {transformBody()}
           {translation()}
           {pollOptions()}
-          {options.showReactionsLink && (
-            <span className="reactions-link cursor-pointer" onClick={() => setShowReactions(true)}>
-              <FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />
-            </span>
-          )}
         </div>
-        {options.showFooter && (
+        {options.showFooter && <NoteFooter ev={ev} replies={props.threadChains?.get(chainKey(ev))?.length} />}
-          <NoteFooter
+        <ReactionsModal show={showReactions} setShow={setShowReactions} event={ev} />
-            ev={ev}
-            positive={reactions.positive}
-            reposts={reposts}
-            zaps={zaps}
-            replies={props.threadChains?.get(chainKey(ev))?.length}
-          />
-        )}
-        <ReactionsModal
-          show={showReactions}
-          setShow={setShowReactions}
-          positive={reactions.positive}
-          negative={reactions.negative}
-          reposts={reposts}
-          zaps={zaps}
-        />
       </>
     );
   }

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

@@ -1,6 +1,7 @@
 import "./Reactions.css";
 
-import { ParsedZap, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
+import { NostrLink, ParsedZap, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
+import { useEventReactions, useReactions } from "@snort/system-react";
 import { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -13,19 +14,22 @@ import { formatShort } from "@/Utils/Number";
 
 import messages from "../messages";
 
-interface ReactionsProps {
+interface ReactionsModalProps {
   show: boolean;
   setShow(b: boolean): void;
-  positive: TaggedNostrEvent[];
+  event: TaggedNostrEvent;
-  negative: TaggedNostrEvent[];
-  reposts: TaggedNostrEvent[];
-  zaps: ParsedZap[];
 }
 
-const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: ReactionsProps) => {
+const ReactionsModal = ({ show, setShow, event }: ReactionsModalProps) => {
   const { formatMessage } = useIntl();
   const onClose = () => setShow(false);
 
+  const link = NostrLink.fromEvent(event);
+
+  const related = useReactions(link.id + "related", [link], undefined, true);
+  const { reactions, zaps, reposts } = useEventReactions(link, related.data ?? []);
+  const { positive, negative } = reactions;
+
   const sortEvents = events =>
     events.sort(
       (a, b) => socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey),
@@ -109,4 +113,4 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
   ) : null;
 };
 
-export default Reactions;
+export default ReactionsModal;

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

@@ -11,7 +11,7 @@ import Collapsed from "@/Components/Collapsed";
 import Note from "@/Components/Event/Note";
 import NoteGhost from "@/Components/Event/NoteGhost";
 import { chainKey, ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
-import { getAllLinkReactions, getLinkReactions } from "@/Utils";
+import { getAllLinkReactions } from "@/Utils";
 
 import messages from "../messages";
 
@@ -50,7 +50,6 @@ const Subthread = ({ active, notes, related, chains, onNavigate }: SubthreadProp
             className={`thread-note ${isLastSubthread && replies.length === 0 ? "is-last-note" : ""}`}
             data={a}
             key={a.id}
-            related={related}
             onClick={onNavigate}
             threadChains={chains}
           />
@@ -98,7 +97,6 @@ const ThreadNote = ({ active, note, isLast, isLastSubthread, related, chains, on
           className={classNames("thread-note", { "is-last-note": isLastVisibleNote })}
           data={note}
           key={note.id}
-          related={related}
           onClick={onNavigate}
           threadChains={chains}
         />
@@ -207,7 +205,6 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
               highlight={active === r.id}
               data={r}
               key={r.id}
-              related={related}
               onClick={onNavigate}
               threadChains={chains}
             />
@@ -262,7 +259,6 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
           className={className}
           key={note.id}
           data={note}
-          related={getLinkReactions(thread.reactions, NostrLink.fromEvent(note))}
           options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight, isRoot: true }}
           onClick={navigateThread}
           threadChains={thread.chains}

packages/app/src/Components/Feed/TimelineFragment.tsx

@@ -24,12 +24,6 @@ const options = {
 };
 
 export function TimelineFragment(props: TimelineFragProps) {
-  const relatedFeed = useCallback(
-    (id: string) => {
-      return props.related.filter(a => findTag(a, "e") === id);
-    },
-    [props.related],
-  );
   return (
     <>
       {props.frag.title}
@@ -38,7 +32,6 @@ export function TimelineFragment(props: TimelineFragProps) {
           props.noteRenderer?.(e) ?? (
             <Note
               data={e}
-              related={relatedFeed(e.id)}
               key={e.id}
               depth={0}
               onClick={props.noteOnClick}

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -242,7 +242,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
                   <Note
                     key={`pinned-${n.id}`}
                     data={n}
-                    related={getLinkReactions(pinned, NostrLink.fromEvent(n))}
                     options={{ showTime: false, showPinned: true, canUnpin: id === loginPubKey }}
                   />
                 );