system-react module entrypoint, reaction loading memos

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

@@ -3,7 +3,7 @@ import { countLeadingZeros, NostrLink, TaggedNostrEvent } from "@snort/system";
 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";
+import React, { forwardRef, useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useLongPress } from "use-long-press";
 
@@ -43,9 +43,10 @@ export interface NoteFooterProps {
 
 export default function NoteFooter(props: NoteFooterProps) {
   const { ev } = props;
-  const link = NostrLink.fromEvent(ev);
+  const link = useMemo(() => NostrLink.fromEvent(ev), [ev.id]);
+  const ids = useMemo(() => [link], [link]);
 
-  const related = useReactions(link.id + "related", [link], undefined, false);
+  const related = useReactions(link.id + "related", ids, undefined, false);
   const { reactions, zaps, reposts } = useEventReactions(link, related.data ?? []);
   const { positive } = reactions;
 

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

@@ -24,6 +24,15 @@ export default function NoteReaction(props: NoteReactionProps) {
   const profile = useUserProfile(inView ? ev.pubkey : "");
   const root = useMemo(() => extractRoot(), [ev, props.root, inView]);
 
+  const opt = useMemo(
+    () => ({
+      showHeader: ev?.kind === EventKind.Repost || ev?.kind === EventKind.TextNote,
+      showFooter: false,
+      truncate: true,
+    }),
+    [ev],
+  );
+
   const refEvent = useMemo(() => {
     if (ev) {
       const eTags = ev.tags.filter(a => a[0] === "e");
@@ -69,11 +78,6 @@ export default function NoteReaction(props: NoteReactionProps) {
   }
   const isOpMuted = root && isMuted(root.pubkey);
   const shouldNotBeRendered = isOpMuted || root?.kind !== EventKind.TextNote;
-  const opt = {
-    showHeader: ev?.kind === EventKind.Repost || ev?.kind === EventKind.TextNote,
-    showFooter: false,
-    truncate: true,
-  };
 
   return shouldNotBeRendered ? null : (
     <div className="card reaction">

packages/app/src/Feed/TimelineFeed.ts

@@ -1,6 +1,6 @@
 import { unixNow } from "@snort/shared";
-import { EventKind, NostrLink, NoteCollection, RequestBuilder } from "@snort/system";
-import { useReactions, useRequestBuilder } from "@snort/system-react";
+import { EventKind, NoteCollection, RequestBuilder } from "@snort/system";
+import { useRequestBuilder } from "@snort/system-react";
 import { useCallback, useMemo } from "react";
 
 import useLogin from "@/Hooks/useLogin";
@@ -131,11 +131,9 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
   }, [pref.autoShowLatest, createBuilder]);
 
   const latest = useRequestBuilder(NoteCollection, subRealtime);
-  const reactions = useReactions(`${sub?.id}-reactions`, main.data?.map(a => NostrLink.fromEvent(a)) ?? []);
 
   return {
     main: main.data,
-    related: reactions.data,
     latest: latest.data,
     loading: main.loading(),
     loadMore: () => {

packages/app/src/Pages/Layout/NavSidebar.tsx

@@ -10,12 +10,12 @@ import Avatar from "@/Components/User/Avatar";
 import { ProfileLink } from "@/Components/User/ProfileLink";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
+import { WalletBalance } from "@/Pages/Layout/WalletBalance";
 import { subscribeToNotifications } from "@/Utils/Notifications";
 import { getCurrentSubscription } from "@/Utils/Subscription";
 
 import useLogin from "../../Hooks/useLogin";
 import { LogoHeader } from "./LogoHeader";
-import { WalletBalance } from "@/Pages/Layout/WalletBalance";
 
 const MENU_ITEMS = [
   {

packages/app/src/Pages/Layout/WalletBalance.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
-import { Sats, useWallet } from "@/Wallet";
-import { useRates } from "@/Hooks/useRates";
 import { FormattedMessage, FormattedNumber } from "react-intl";
-import Icon from "@/Components/Icons/Icon";
 import { useNavigate } from "react-router-dom";
 
+import Icon from "@/Components/Icons/Icon";
+import { useRates } from "@/Hooks/useRates";
+import { Sats, useWallet } from "@/Wallet";
+
 export const WalletBalance = () => {
   const [balance, setBalance] = useState<Sats | null>(null);
   const wallet = useWallet();

packages/system-react/package.json

@@ -3,6 +3,7 @@
   "version": "1.1.8",
   "description": "React hooks for @snort/system",
   "main": "dist/index.js",
+  "module": "src/index.ts",
   "types": "dist/index.d.ts",
   "repository": "https://git.v0l.io/Kieran/snort",
   "author": "Kieran",