fixed my buggy codes

src/components/note/content/index.tsx

@@ -32,7 +32,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
           return <UserMention key={match + i} pubkey={tags[match][1]} />;
         } else {
           // #TODO: handle mention other note
-          console.log(tags[match]);
+          // console.log(tags[match]);
         }
       });
     }

src/components/note/content/metadata.tsx

@@ -3,7 +3,7 @@ import { CommentsCounter } from '@components/note/counter/comments';
 import { LikesCounter } from '@components/note/counter/likes';
 
 import { useLocalStorage } from '@rehooks/local-storage';
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 export default function NoteMetadata({
   eventID,
@@ -22,8 +22,8 @@ export default function NoteMetadata({
   const [likes, setLikes] = useState(0);
   const [comments, setComments] = useState(0);
 
-  useMemo(() => {
-    relayPool.subscribe(
+  useEffect(() => {
+    const unsubscribe = relayPool.subscribe(
       [
         {
           '#e': [eventID],
@@ -52,6 +52,10 @@ export default function NoteMetadata({
         unsubscribeOnEose: true,
       }
     );
+
+    return () => {
+      unsubscribe();
+    };
   }, [eventID, relayPool, relays]);
 
   return (

src/components/note/counter/likes.tsx

@@ -7,7 +7,7 @@ import LikedIcon from '@assets/icons/liked';
 
 import { useLocalStorage } from '@rehooks/local-storage';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { memo, useCallback, useContext, useState } from 'react';
+import { memo, useContext, useState } from 'react';
 
 export const LikesCounter = memo(function LikesCounter({
   count,
@@ -26,31 +26,28 @@ export const LikesCounter = memo(function LikesCounter({
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(count);
 
-  const handleLike = useCallback(
-    (e: any) => {
-      e.stopPropagation();
+  const handleLike = (e: any) => {
+    e.stopPropagation();
 
-      const event: any = {
-        content: '+',
-        kind: 7,
-        tags: [
-          ['e', eventID],
-          ['p', eventPubkey],
-        ],
-        created_at: dateToUnix(),
-        pubkey: currentUser.id,
-      };
-      event.id = getEventHash(event);
-      event.sig = signEvent(event, currentUser.privkey);
-      // publish event to all relays
-      relayPool.publish(event, relays);
-      // update state to change icon to filled heart
-      setIsReact(true);
-      // update counter
-      setLike(like + 1);
-    },
-    [eventID, eventPubkey, currentUser.id, currentUser.privkey, relayPool, relays, like]
-  );
+    const event: any = {
+      content: '+',
+      kind: 7,
+      tags: [
+        ['e', eventID],
+        ['p', eventPubkey],
+      ],
+      created_at: dateToUnix(),
+      pubkey: currentUser.id,
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, currentUser.privkey);
+    // publish event to all relays
+    relayPool.publish(event, relays);
+    // update state to change icon to filled heart
+    setIsReact(true);
+    // update counter
+    setLike(like + 1);
+  };
 
   return (
     <button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">

src/components/note/preview/image.tsx

@@ -5,7 +5,7 @@ export const ImagePreview = memo(function ImagePreview({ data }: { data: any })
   return (
     <div className="relative mt-2 flex flex-col overflow-hidden">
       {data.map((image: string, index: number) => (
-        <div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index == 1 ? 'mt-2' : ''}`}>
+        <div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index >= 1 ? 'mt-2' : ''}`}>
           <Image
             placeholder="blur"
             blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="