From 7a409c14554074e21a897bd58e0f4d51f2466ae4 Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Tue, 9 Jan 2024 12:07:08 +0200 Subject: [PATCH] system-react module entrypoint, reaction loading memos --- .../app/src/Components/Event/Note/NoteFooter.tsx | 7 ++++--- packages/app/src/Components/Event/NoteReaction.tsx | 14 +++++++++----- packages/app/src/Feed/TimelineFeed.ts | 6 ++---- packages/app/src/Pages/Layout/NavSidebar.tsx | 2 +- packages/app/src/Pages/Layout/WalletBalance.tsx | 7 ++++--- packages/system-react/package.json | 1 + 6 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/app/src/Components/Event/Note/NoteFooter.tsx b/packages/app/src/Components/Event/Note/NoteFooter.tsx index 3b2f13a6..5f2d8b31 100644 --- a/packages/app/src/Components/Event/Note/NoteFooter.tsx +++ b/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; diff --git a/packages/app/src/Components/Event/NoteReaction.tsx b/packages/app/src/Components/Event/NoteReaction.tsx index cf6166a4..380c076c 100644 --- a/packages/app/src/Components/Event/NoteReaction.tsx +++ b/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 : (
diff --git a/packages/app/src/Feed/TimelineFeed.ts b/packages/app/src/Feed/TimelineFeed.ts index 9e4a5d1b..dadcc929 100644 --- a/packages/app/src/Feed/TimelineFeed.ts +++ b/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: () => { diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx index 2024d074..4e8a6416 100644 --- a/packages/app/src/Pages/Layout/NavSidebar.tsx +++ b/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 = [ { diff --git a/packages/app/src/Pages/Layout/WalletBalance.tsx b/packages/app/src/Pages/Layout/WalletBalance.tsx index e59b5ed8..48b7a57f 100644 --- a/packages/app/src/Pages/Layout/WalletBalance.tsx +++ b/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(null); const wallet = useWallet(); diff --git a/packages/system-react/package.json b/packages/system-react/package.json index f1b7def4..d1b133b8 100644 --- a/packages/system-react/package.json +++ b/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",