updated note metadata

package.json

@@ -4,7 +4,7 @@
   "version": "0.2.5",
   "scripts": {
     "dev": "next dev -p 1420",
-    "build": "next build && next export -o dist",
+    "build": "pnpm init-db && next build",
     "tauri": "tauri",
     "init-db": "cd src-tauri/ && cargo prisma generate",
     "prepare": "husky install"

src/components/note/base.tsx

@@ -1,4 +1,4 @@
-import NoteMetadata from '@components/note/metadata';
+import { NoteMetadata } from '@components/note/metadata';
 import { NoteParent } from '@components/note/parent';
 import { UserExtend } from '@components/user/extend';
 

src/components/note/extend.tsx

@@ -1,4 +1,4 @@
-import NoteMetadata from '@components/note/metadata';
+import { NoteMetadata } from '@components/note/metadata';
 import { ImagePreview } from '@components/note/preview/image';
 import { VideoPreview } from '@components/note/preview/video';
 import { NoteQuote } from '@components/note/quote';

src/components/note/meta/comment.tsx

@@ -9,9 +9,9 @@ import useLocalStorage from '@rehooks/local-storage';
 import { MultiBubble, OpenNewWindow } from 'iconoir-react';
 import { useRouter } from 'next/navigation';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { memo, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 
-export const NoteComment = memo(function NoteComment({
+export const NoteComment = ({
   count,
   eventID,
   eventPubkey,
@@ -23,7 +23,7 @@ export const NoteComment = memo(function NoteComment({
   eventPubkey: string;
   eventTime: number;
   eventContent: any;
-}) {
+}) => {
   const router = useRouter();
   const [pool, relays]: any = useContext(RelayContext);
 
@@ -132,4 +132,4 @@ export const NoteComment = memo(function NoteComment({
       </Dialog.Portal>
     </Dialog.Root>
   );
-});
+};

src/components/note/meta/reaction.tsx

@@ -5,26 +5,29 @@ import { dateToUnix } from '@utils/getDate';
 import useLocalStorage from '@rehooks/local-storage';
 import { Heart } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { memo, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
-export const NoteReaction = memo(function NoteReaction({
+export const NoteReaction = ({
   count,
+  liked,
   eventID,
   eventPubkey,
 }: {
   count: number;
+  liked: boolean;
   eventID: string;
   eventPubkey: string;
-}) {
+}) => {
   const [pool, relays]: any = useContext(RelayContext);
-
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
+
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(0);
 
   const handleLike = (e: any) => {
     e.stopPropagation();
 
+    if (liked === false || isReact === false) {
       const event: any = {
         content: '+',
         kind: 7,
@@ -42,18 +45,20 @@ export const NoteReaction = memo(function NoteReaction({
       // update state to change icon to filled heart
       setIsReact(true);
       // update counter
-    setLike(like + 1);
+      setLike((like) => (like += 1));
+    }
   };
 
   useEffect(() => {
+    setIsReact(liked);
     setLike(count);
-  }, [count]);
+  }, [count, liked]);
 
   return (
     <button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
       <div className="rounded-md p-1 group-hover:bg-zinc-800">
         {isReact ? (
-          <Heart width={20} height={20} className="fill-red-500" />
+          <Heart width={20} height={20} className="fill-red-500 text-transparent" />
         ) : (
           <Heart width={20} height={20} className="text-zinc-500" />
         )}
@@ -61,4 +66,4 @@ export const NoteReaction = memo(function NoteReaction({
       <span>{like}</span>
     </button>
   );
-});
+};

src/components/note/metadata.tsx

@@ -2,9 +2,10 @@ import { NoteComment } from '@components/note/meta/comment';
 import { NoteReaction } from '@components/note/meta/reaction';
 import { RelayContext } from '@components/relaysProvider';
 
-import { useContext, useEffect, useState } from 'react';
+import useLocalStorage from '@rehooks/local-storage';
+import { memo, useContext, useEffect, useState } from 'react';
 
-export default function NoteMetadata({
+export const NoteMetadata = memo(function NoteMetadata({
   eventID,
   eventPubkey,
   eventContent,
@@ -16,8 +17,10 @@ export default function NoteMetadata({
   eventContent: any;
 }) {
   const [pool, relays]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
 
-  const [likes, setLikes] = useState(0);
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(0);
   const [comments, setComments] = useState(0);
 
   useEffect(() => {
@@ -26,8 +29,7 @@ export default function NoteMetadata({
         {
           '#e': [eventID],
           since: parseInt(eventTime),
-          kinds: [7],
+          kinds: [1, 7],
-          limit: 50,
         },
       ],
       relays,
@@ -40,21 +42,29 @@ export default function NoteMetadata({
             // createCacheCommentNote(event, eventID);
             break;
           case 7:
+            if (event.pubkey === activeAccount.pubkey) {
+              setLiked(true);
+            }
             if (event.content === '🤙' || event.content === '+') {
-              setLikes((likes) => (likes += 1));
+              setLikeCount((likes) => (likes += 1));
             }
             break;
           default:
             break;
         }
       },
-      1000
+      100,
+      undefined,
+      {
+        unsubscribeOnEose: true,
+        logAllEvents: false,
+      }
     );
 
     return () => {
       unsubscribe();
     };
-  }, [eventID, eventTime, pool, relays]);
+  }, [eventID, eventTime, pool, relays, activeAccount.pubkey]);
 
   return (
     <div className="relative z-10 -ml-1 flex items-center gap-8">
@@ -65,7 +75,7 @@ export default function NoteMetadata({
         eventContent={eventContent}
         eventTime={eventTime}
       />
-      <NoteReaction count={likes} eventID={eventID} eventPubkey={eventPubkey} />
+      <NoteReaction count={likeCount} liked={liked} eventID={eventID} eventPubkey={eventPubkey} />
     </div>
   );
-}
+});

src/components/note/parent.tsx

@@ -1,4 +1,4 @@
-import NoteMetadata from '@components/note/metadata';
+import { NoteMetadata } from '@components/note/metadata';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 

src/components/note/rootNote.tsx

@@ -1,4 +1,4 @@
-import NoteMetadata from '@components/note/metadata';
+import { NoteMetadata } from '@components/note/metadata';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 

src/components/relaysProvider.tsx

@@ -8,7 +8,7 @@ export const RelayContext = createContext({});
 const relays = [
   'wss://relay.damus.io',
   'wss://nostr-pub.wellorder.net',
-  'wss://nostr.bongbong.com',
+  //'wss://nostr.bongbong.com',
   'wss://nostr.zebedee.cloud',
   'wss://nostr.fmt.wiz.biz',
   'wss://relay.snort.social',