fix note metadata

package.json

@@ -16,7 +16,6 @@
   "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",

pnpm-lock.yaml

@@ -7,9 +7,6 @@ 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,22 +749,6 @@ 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== }

src/app/newsfeed/components/note/base.tsx

@@ -3,10 +3,9 @@ import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
 import { NoteParent } from '@lume/app/newsfeed/components/note/parent';
 import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
 
-import { memo } from 'react';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
-export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
+export default function NoteBase({ event }: { event: any }) {
   const content = contentParser(event.content, event.tags);
 
   const parentNote = () => {
@@ -44,4 +43,4 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
       </div>
     </div>
   );
-});
+}

src/app/newsfeed/components/note/metadata.tsx

@@ -5,16 +5,15 @@ import ZapIcon from '@lume/shared/icons/zap';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
 
-import { useSignal } from '@preact/signals-react';
+import { useContext, useState } from 'react';
-import { useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';
 
 export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPubkey: string }) {
   const pool: any = useContext(RelayContext);
 
-  const replies = useSignal(0);
+  const [replies, setReplies] = useState(0);
-  const likes = useSignal(0);
+  const [reposts, setReposts] = useState(0);
-  const reposts = useSignal(0);
+  const [likes, setLikes] = useState(0);
 
   useSWRSubscription(id ? ['note-metadata', id] : null, ([, key], {}) => {
     const unsubscribe = pool.subscribe(
@@ -30,14 +29,14 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
       (event: any) => {
         switch (event.kind) {
           case 1:
-            replies.value++;
+            setReplies((replies) => replies + 1);
             break;
           case 6:
-            reposts.value++;
+            setReposts((reposts) => reposts + 1);
             break;
           case 7:
             if (event.content === '🤙' || event.content === '+') {
-              likes.value++;
+              setLikes((likes) => likes + 1);
             }
             break;
           default:
@@ -53,9 +52,9 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
 
   return (
     <div className="flex items-center gap-16">
-      <NoteReply id={id} replies={replies.value} />
+      <NoteReply id={id} replies={replies} />
-      <NoteLike id={id} pubkey={eventPubkey} likes={likes.value} />
+      <NoteLike id={id} pubkey={eventPubkey} likes={likes} />
-      <NoteRepost id={id} pubkey={eventPubkey} reposts={reposts.value} />
+      <NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
       <button className="group inline-flex w-min items-center gap-1.5">
         <ZapIcon width={20} height={20} className="text-zinc-400 group-hover:text-orange-400" />
         <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{0}</span>

src/app/newsfeed/pages/following/index.page.tsx

@@ -1,5 +1,5 @@
 import NoteForm from '@lume/app/newsfeed/components/form';
-import { NoteBase } from '@lume/app/newsfeed/components/note/base';
+import NoteBase from '@lume/app/newsfeed/components/note/base';
 import { Placeholder } from '@lume/app/newsfeed/components/note/placeholder';
 import { NoteQuoteRepost } from '@lume/app/newsfeed/components/note/quoteRepost';
 import { hasNewerNoteAtom } from '@lume/stores/note';
@@ -10,7 +10,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom } from 'jotai';
 import { useEffect, useRef } from 'react';
 
-const ITEM_PER_PAGE = 20;
+const ITEM_PER_PAGE = 10;
 const TIME = Math.floor(Date.now() / 1000);
 
 export function Page() {