fixed my buggy codes

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(() => {
-    fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
-      .then((response) => {
-        if (response.ok) {
-          return response.json();
-        } 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]);
+  useEffect(() => {
+    fetchProfile(pubkey)
+      .then((res) => cacheProfile(res))
+      .catch(console.error);
+  }, [fetchProfile, 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 () => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
+  useEffect(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
-            .then((response) => {
-              if (response.ok) {
-                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));
+          fetchProfile(pubkey)
+            .then((res) => insertCacheProfile(res))
+            .catch(console.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 () => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
+  useEffect(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
-            .then((response) => {
-              if (response.ok) {
-                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));
+          fetchProfile(pubkey)
+            .then((res) => insertCacheProfile(res))
+            .catch(console.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 () => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
+  useEffect(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
-            .then((response) => {
-              if (response.ok) {
-                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));
+          fetchProfile(pubkey)
+            .then((res) => insertCacheProfile(res))
+            .catch(console.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">