diff --git a/package.json b/package.json index fddb874d..93c2c9df 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@floating-ui/react": "^0.23.1", "@headlessui/react": "^1.7.14", + "@preact/signals-react": "1.2.2", "@supabase/supabase-js": "^2.21.0", "@tanstack/react-query": "^4.29.5", "@tanstack/react-virtual": "3.0.0-beta.54", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b6905d2..9912ce22 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,9 @@ dependencies: '@headlessui/react': specifier: ^1.7.14 version: 1.7.14(react-dom@18.2.0)(react@18.2.0) + '@preact/signals-react': + specifier: 1.2.2 + version: 1.2.2(react@18.2.0) '@supabase/supabase-js': specifier: ^2.21.0 version: 2.21.0(encoding@0.1.13) @@ -752,6 +755,22 @@ packages: { integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== } dev: true + /@preact/signals-core@1.3.0: + resolution: + { integrity: sha512-M+M3ZOtd1dtV/uasyk4SZu1vbfEJ4NeENv0F7F12nijZYedB5wSgbtZcuACyssnTznhF4ctUyrR0dZHuHfyWKA== } + dev: false + + /@preact/signals-react@1.2.2(react@18.2.0): + resolution: + { integrity: sha512-GoESQ9n1bns2FD+8yqH7lBvQMavboKLCNEW+s0hs3Wcp5B1VHvVxwJo6aFs6rpxoh1/q8Tvwbi4vIeehBD2mzA== } + peerDependencies: + react: 17.x || 18.x + dependencies: + '@preact/signals-core': 1.3.0 + react: 18.2.0 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false + /@rollup/plugin-virtual@3.0.1: resolution: { integrity: sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og== } diff --git a/src/app/newsfeed/components/note/metadata.tsx b/src/app/newsfeed/components/note/metadata.tsx index 507f33ed..4716cdc2 100644 --- a/src/app/newsfeed/components/note/metadata.tsx +++ b/src/app/newsfeed/components/note/metadata.tsx @@ -1,20 +1,20 @@ +import NoteLike from '@lume/app/newsfeed/components/metadata/like'; import NoteReply from '@lume/app/newsfeed/components/metadata/reply'; +import NoteRepost from '@lume/app/newsfeed/components/metadata/repost'; import ZapIcon from '@lume/shared/icons/zap'; import { RelayContext } from '@lume/shared/relayProvider'; import { READONLY_RELAYS } from '@lume/stores/constants'; -import { useContext, useState } from 'react'; +import { useSignal } from '@preact/signals-react'; +import { useContext } from 'react'; import useSWRSubscription from 'swr/subscription'; -import NoteLike from '../metadata/like'; -import NoteRepost from '../metadata/repost'; - export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPubkey: string }) { const pool: any = useContext(RelayContext); - const [replies, setReplies] = useState(0); - const [likes, setLikes] = useState(0); - const [reposts, setReposts] = useState(0); + const replies = useSignal(0); + const likes = useSignal(0); + const reposts = useSignal(0); useSWRSubscription(id ? ['note-metadata', id] : null, ([, key], {}) => { const unsubscribe = pool.subscribe( @@ -30,14 +30,14 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub (event: any) => { switch (event.kind) { case 1: - setReplies(replies + 1); + replies.value++; break; case 6: - setReposts(reposts + 1); + reposts.value++; break; case 7: if (event.content === '🤙' || event.content === '+') { - setLikes(likes + 1); + likes.value++; } break; default: @@ -53,9 +53,9 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub return (
- - - + + +