LFG !!!

src/components/user/large.tsx

@@ -1,6 +1,6 @@
-import { DatabaseContext } from '@components/contexts/database';
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { createCacheProfile, getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
@@ -8,14 +8,11 @@ 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, useEffect, useState } from 'react';
-
-truncate;
+import { memo, useCallback, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserLarge = memo(function UserLarge({ pubkey, time }: { pubkey: string; time: any }) {
-  const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState(null);
 
   const fetchProfile = useCallback(async (id: string) => {
@@ -26,34 +23,20 @@ export const UserLarge = memo(function UserLarge({ pubkey, time }: { pubkey: str
     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) => {
-      // update state
-      setProfile(JSON.parse(event.content));
-      // insert to database
-      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
-    },
-    [db, pubkey]
-  );
-
   useEffect(() => {
-    getCacheProfile()
-      .then((res) => {
-        if (res !== undefined) {
-          setProfile(JSON.parse(res.metadata));
-        } else {
-          fetchProfile(pubkey)
-            .then((res) => insertCacheProfile(res))
-            .catch(console.error);
-        }
-      })
-      .catch(console.error);
-  }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
+    getCacheProfile(pubkey).then((res) => {
+      if (res) {
+        setProfile(JSON.parse(res.metadata));
+      } else {
+        fetchProfile(pubkey)
+          .then((res: any) => {
+            setProfile(JSON.parse(res.content));
+            createCacheProfile(pubkey, res.content);
+          })
+          .catch(console.error);
+      }
+    });
+  }, [fetchProfile, pubkey]);
 
   return (
     <div className="flex items-center gap-2">