fixed duplicate connection

src/components/connectors/note.tsx

@@ -8,7 +8,7 @@ import { useLocalStorage } from '@rehooks/local-storage';
 import { memo, useCallback, useContext, useRef } from 'react';
 
 export const NoteConnector = memo(function NoteConnector() {
-  const db: any = useContext(DatabaseContext);
+  const { db }: any = useContext(DatabaseContext);
   const relayPool: any = useContext(RelayContext);
 
   const now = useRef(new Date());

src/components/contexts/database.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { writeStorage } from '@rehooks/local-storage';
-import { createContext, useEffect, useMemo } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
 export const DatabaseContext = createContext({});
 
-const initDB = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
+const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
 
 export default function DatabaseProvider({ children }: { children: React.ReactNode }) {
-  const db = useMemo(() => initDB, []);
+  const [done, setDone] = useState(false);
 
   useEffect(() => {
     const getRelays = async () => {
@@ -40,17 +40,18 @@ export default function DatabaseProvider({ children }: { children: React.ReactNo
       writeStorage('follows', arr);
     };
 
-    if (db !== null) {
     getRelays().catch(console.error);
     getAccount()
       .then((res) => {
         if (res) {
           getFollows(res.id).catch(console.error);
         }
+        setDone(true);
       })
       .catch(console.error);
-    }
+  }, []);
-  }, [db]);
 
+  if (done === true) {
     return <DatabaseContext.Provider value={{ db }}>{children}</DatabaseContext.Provider>;
   }
+}

src/components/navigatorBar/index.tsx

@@ -9,7 +9,7 @@ import { useLocalStorage } from '@rehooks/local-storage';
 
 export default function NavigatorBar() {
   const [currentUser]: any = useLocalStorage('current-user');
-  const profile = currentUser.metadata !== undefined ? JSON.parse(currentUser.metadata) : { display_name: null, username: null };
+  const profile = JSON.parse(currentUser.metadata);
 
   return (
     <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">

src/components/note/atoms/user.tsx

@@ -39,7 +39,6 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
   useEffect(() => {
     const initialProfile = async () => {
       const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-      db.close;
       return result;
     };
 

src/components/note/atoms/userWithUsername.tsx

@@ -26,11 +26,7 @@ export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pub
       const metadata: any = JSON.parse(rawMetadata.content);
       if (profile.picture === null || profile.name === null) {
         setProfile(metadata);
-        await db.execute(
+        await db.execute(`INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`);
-          `INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(
-            metadata
-          )}')`
-        );
       } else {
         return;
       }
@@ -41,10 +37,7 @@ export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pub
 
   useEffect(() => {
     const initialProfile = async () => {
-      const result: any = await db.select(
+      const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`);
-        `SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`
-      );
-      db.close;
       return result;
     };
 
@@ -61,30 +54,16 @@ export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pub
     <div className="relative flex items-start gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
         {profile.picture ? (
-          <ImageWithFallback
+          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
-            src={profile.picture}
-            alt={pubkey}
-            fill={true}
-            className="rounded-full object-cover"
-          />
         ) : (
-          <Avatar
+          <Avatar size={44} name={pubkey} variant="beam" colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']} />
-            size={44}
-            name={pubkey}
-            variant="beam"
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-          />
         )}
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">
           <div className="flex flex-col gap-1 text-sm">
-            <span className="font-bold leading-tight">
+            <span className="font-bold leading-tight">{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}</span>
-              {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
+            <span className="text-zinc-500">{profile.username ? profile.username : truncate(pubkey, 16, ' .... ')}</span>
-            </span>
-            <span className="text-zinc-500">
-              {profile.username ? profile.username : truncate(pubkey, 16, ' .... ')}
-            </span>
           </div>
           <div>
             <DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />

src/pages/feed/following.tsx

@@ -7,20 +7,22 @@ import { Placeholder } from '@components/note/placeholder';
 import { Repost } from '@components/note/repost';
 import { Single } from '@components/note/single';
 
+import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
 import { useCallback } from 'react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 export default function Page() {
-  const db: any = useContext(DatabaseContext);
+  const { db }: any = useContext(DatabaseContext);
-  const [data, setData] = useState(() => []);
+  const [data]: any = useLocalStorage('notes');
+
   const limit = useRef(30);
   const offset = useRef(0);
 
   useEffect(() => {
     const getData = async () => {
       const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
-      setData(result);
+      writeStorage('notes', result);
     };
 
     getData().catch(console.error);
@@ -30,7 +32,7 @@ export default function Page() {
     offset.current += limit.current;
     // next query
     const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current} OFFSET ${offset.current}`);
-    setData((data) => [...data, ...result]);
+    writeStorage('notes', (data) => [...data, ...result]);
   }, [db]);
 
   const ItemContent = useCallback(

src/pages/index.tsx

@@ -15,7 +15,6 @@ export default function Page() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    console.log(currentUser);
     if (!currentUser) {
       setTimeout(() => {
         setLoading(false);

src/pages/profile/update.tsx

@@ -53,7 +53,6 @@ export default function Page() {
     // save account to database
     const db = await Database.load('sqlite:lume.db');
     await db.execute(`UPDATE accounts SET metadata = '${JSON.stringify(data)}' WHERE pubkey = "${currentUser.pubkey}"`);
-    await db.close();
 
     // set currentUser in global state
     currentUser.set({