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(() => {
+  useEffect(() => {
-    relayPool.subscribe(
+    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,8 +26,7 @@ export const LikesCounter = memo(function LikesCounter({
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(count);
 
-  const handleLike = useCallback(
+  const handleLike = (e: any) => {
-    (e: any) => {
     e.stopPropagation();
 
     const event: any = {
@@ -48,9 +47,7 @@ export const LikesCounter = memo(function LikesCounter({
     setIsReact(true);
     // update counter
     setLike(like + 1);
-    },
+  };
-    [eventID, eventPubkey, currentUser.id, currentUser.privkey, relayPool, relays, like]
-  );
 
   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="

src/components/user/base.tsx

@@ -3,13 +3,22 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { truncate } from '@utils/truncate';
 
+import { fetch } from '@tauri-apps/api/http';
 import Avatar from 'boring-avatars';
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState({ picture: null, display_name: null, name: null });
 
+  const fetchProfile = useCallback(async (id: string) => {
+    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+      method: 'GET',
+      timeout: 30,
+    });
+    return res;
+  }, []);
+
   const cacheProfile = useCallback(
     async (event) => {
       // insert to database
@@ -20,20 +29,11 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
     [db, pubkey]
   );
 
-  useMemo(() => {
+  useEffect(() => {
-    fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
+    fetchProfile(pubkey)
-      .then((response) => {
+      .then((res) => cacheProfile(res))
-        if (response.ok) {
+      .catch(console.error);
-          return response.json();
+  }, [fetchProfile, cacheProfile, pubkey]);
-        } else if (response.status === 404) {
-          return Promise.reject('error 404');
-        } else {
-          return Promise.reject('some other error: ' + response.status);
-        }
-      })
-      .then((data) => cacheProfile(data))
-      .catch((error) => console.log('error is', error));
-  }, [cacheProfile, pubkey]);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/extend.tsx

@@ -4,10 +4,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { fetch } from '@tauri-apps/api/http';
 import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
@@ -15,6 +16,19 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
   const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState({ picture: null, name: null, username: null });
 
+  const fetchProfile = useCallback(async (id: string) => {
+    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+      method: 'GET',
+      timeout: 30,
+    });
+    return res.data;
+  }, []);
+
+  const getCacheProfile = useCallback(async () => {
+    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
+    return result[0];
+  }, [db, pubkey]);
+
   const insertCacheProfile = useCallback(
     async (event) => {
       // insert to database
@@ -25,33 +39,19 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
     [db, pubkey]
   );
 
-  const getCacheProfile = useCallback(async () => {
+  useEffect(() => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
+          fetchProfile(pubkey)
-            .then((response) => {
+            .then((res) => insertCacheProfile(res))
-              if (response.ok) {
+            .catch(console.error);
-                return response.json();
-              } else if (response.status === 404) {
-                return Promise.reject('error 404');
-              } else {
-                return Promise.reject('some other error: ' + response.status);
-              }
-            })
-            .then((data) => insertCacheProfile(data))
-            .catch((error) => console.log('error is', error));
         }
       })
       .catch(console.error);
-  }, [getCacheProfile, insertCacheProfile, pubkey]);
+  }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
   return (
     <div className="flex items-start gap-2">

src/components/user/mention.tsx

@@ -2,11 +2,25 @@ import { DatabaseContext } from '@components/contexts/database';
 
 import { truncate } from '@utils/truncate';
 
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { fetch } from '@tauri-apps/api/http';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ name: null });
+  const [profile, setProfile] = useState(null);
+
+  const fetchProfile = useCallback(async (id: string) => {
+    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+      method: 'GET',
+      timeout: 30,
+    });
+    return res.data;
+  }, []);
+
+  const getCacheProfile = useCallback(async () => {
+    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
+    return result[0];
+  }, [db, pubkey]);
 
   const insertCacheProfile = useCallback(
     async (event) => {
@@ -18,33 +32,19 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
     [db, pubkey]
   );
 
-  const getCacheProfile = useCallback(async () => {
+  useEffect(() => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
+          fetchProfile(pubkey)
-            .then((response) => {
+            .then((res) => insertCacheProfile(res))
-              if (response.ok) {
+            .catch(console.error);
-                return response.json();
-              } else if (response.status === 404) {
-                return Promise.reject('error 404');
-              } else {
-                return Promise.reject('some other error: ' + response.status);
-              }
-            })
-            .then((data) => insertCacheProfile(data))
-            .catch((error) => console.log('error is', error));
         }
       })
       .catch(console.error);
-  }, [getCacheProfile, insertCacheProfile, pubkey]);
+  }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
-  return <span className="text-fuchsia-500">@{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}</span>;
+  return <span className="text-fuchsia-500">@{profile ? profile.name : truncate(pubkey, 16, ' .... ')}</span>;
 });

src/components/user/mini.tsx

@@ -3,13 +3,27 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { truncate } from '@utils/truncate';
 
+import { fetch } from '@tauri-apps/api/http';
 import Avatar from 'boring-avatars';
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState({ picture: null, name: null });
 
+  const fetchProfile = useCallback(async (id: string) => {
+    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+      method: 'GET',
+      timeout: 30,
+    });
+    return res.data;
+  }, []);
+
+  const getCacheProfile = useCallback(async () => {
+    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
+    return result[0];
+  }, [db, pubkey]);
+
   const insertCacheProfile = useCallback(
     async (event) => {
       // insert to database
@@ -20,33 +34,19 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
     [db, pubkey]
   );
 
-  const getCacheProfile = useCallback(async () => {
+  useEffect(() => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
+          fetchProfile(pubkey)
-            .then((response) => {
+            .then((res) => insertCacheProfile(res))
-              if (response.ok) {
+            .catch(console.error);
-                return response.json();
-              } else if (response.status === 404) {
-                return Promise.reject('error 404');
-              } else {
-                return Promise.reject('some other error: ' + response.status);
-              }
-            })
-            .then((data) => insertCacheProfile(data))
-            .catch((error) => console.log('error is', error));
         }
       })
       .catch(console.error);
-  }, [getCacheProfile, insertCacheProfile, pubkey]);
+  }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
   return (
     <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">