refactor initial database and state management

src/components/accountBar/index.tsx

@@ -1,19 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Account } from '@components/accountBar/account';
 
-import { currentUser } from '@stores/currentUser';
-
 import LumeSymbol from '@assets/icons/Lume';
-
-import { useStore } from '@nanostores/react';
 import { PlusIcon } from '@radix-ui/react-icons';
+import { useLocalStorage } from '@rehooks/local-storage';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
 export default function AccountBar() {
   const [users, setUsers] = useState([]);
-  const $currentUser: any = useStore(currentUser);
+  const [currentUser]: any = useLocalStorage('current-user');
 
   const getAccounts = useCallback(async () => {
     const db = await Database.load('sqlite:lume.db');
@@ -30,7 +27,7 @@ export default function AccountBar() {
     <div className="flex h-full flex-col items-center justify-between px-2 pt-12 pb-4">
       <div className="flex flex-col gap-4">
         {users.map((user, index) => (
-          <Account key={index} user={user} current={$currentUser.pubkey} />
+          <Account key={index} user={user} current={currentUser.pubkey} />
         ))}
         <Link
           href="/onboarding"

src/components/connectors/note.tsx

@@ -4,10 +4,7 @@ import { RelayContext } from '@components/contexts/relay';
 
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 
-import { follows } from '@stores/follows';
-import { relays } from '@stores/relays';
-
-import { useStore } from '@nanostores/react';
+import { useLocalStorage } from '@rehooks/local-storage';
 import { memo, useCallback, useContext, useRef } from 'react';
 
 export const NoteConnector = memo(function NoteConnector() {
@@ -16,8 +13,8 @@ export const NoteConnector = memo(function NoteConnector() {
 
   const now = useRef(new Date());
 
-  const $follows = useStore(follows);
-  const $relays = useStore(relays);
+  const [follows]: any = useLocalStorage('follows');
+  const [relays]: any = useLocalStorage('relays');
 
   const insertDB = useCallback(
     async (event: any) => {
@@ -35,11 +32,11 @@ export const NoteConnector = memo(function NoteConnector() {
     [
       {
         kinds: [1],
-        authors: $follows,
+        authors: follows,
         since: dateToUnix(hoursAgo(12, now.current)),
       },
     ],
-    $relays,
+    relays,
     (event: any) => {
       insertDB(event).catch(console.error);
     },

src/components/contexts/database.tsx

@@ -1,13 +1,56 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createContext } from 'react';
+import { writeStorage } from '@rehooks/local-storage';
+import { createContext, useEffect, useMemo } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
 export const DatabaseContext = createContext({});
 
-const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
+const initDB = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
 
 export default function DatabaseProvider({ children }: { children: React.ReactNode }) {
-  const value = db;
+  const db = useMemo(() => initDB, []);
 
-  return <DatabaseContext.Provider value={value}>{children}</DatabaseContext.Provider>;
+  useEffect(() => {
+    const getRelays = async () => {
+      const arr = [];
+      const result: any[] = await db.select('SELECT relay_url FROM relays WHERE relay_status = "1"');
+
+      result.forEach((item: { relay_url: string }) => {
+        arr.push(item.relay_url);
+      });
+
+      writeStorage('relays', arr);
+    };
+
+    const getAccount = async () => {
+      const result = await db.select(`SELECT * FROM accounts LIMIT 1`);
+      writeStorage('current-user', result[0]);
+
+      return result[0];
+    };
+
+    const getFollows = async (id: string) => {
+      const arr = [];
+      const result: any[] = await db.select(`SELECT pubkey FROM follows WHERE account = "${id}"`);
+
+      result.forEach((item: { pubkey: string }) => {
+        arr.push(item.pubkey);
+      });
+
+      writeStorage('follows', arr);
+    };
+
+    if (db !== null) {
+      getRelays().catch(console.error);
+      getAccount()
+        .then((res) => {
+          if (res) {
+            getFollows(res.id).catch(console.error);
+          }
+        })
+        .catch(console.error);
+    }
+  }, [db]);
+
+  return <DatabaseContext.Provider value={{ db }}>{children}</DatabaseContext.Provider>;
 }

src/components/navigatorBar/createPost.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { currentUser } from '@stores/currentUser';
-
-import { useStore } from '@nanostores/react';
 import * as Dialog from '@radix-ui/react-dialog';
+import { useLocalStorage } from '@rehooks/local-storage';
 import * as commands from '@uiw/react-md-editor/lib/commands';
 import dynamic from 'next/dynamic';
 import { dateToUnix, useNostr } from 'nostr-react';
@@ -17,9 +15,9 @@ export default function CreatePost() {
   const { publish } = useNostr();
   const [value, setValue] = useState('');
 
-  const $currentUser: any = useStore(currentUser);
-  const pubkey = $currentUser.pubkey;
-  const privkey = $currentUser.privkey;
+  const [currentUser]: any = useLocalStorage('current-user');
+  const pubkey = currentUser.pubkey;
+  const privkey = currentUser.privkey;
 
   const postButton = {
     name: 'post',
@@ -27,9 +25,7 @@ export default function CreatePost() {
     buttonProps: { className: 'cta-btn', 'aria-label': 'Post a message' },
     icon: (
       <div className="relative inline-flex h-10 w-16 transform cursor-pointer overflow-hidden rounded bg-zinc-900 px-2.5 ring-zinc-500/50 ring-offset-zinc-900 will-change-transform focus:outline-none focus:ring-1 focus:ring-offset-2 active:translate-y-1">
-        <span className="absolute inset-px z-10 inline-flex items-center justify-center rounded bg-zinc-900 text-zinc-200">
-          Post
-        </span>
+        <span className="absolute inset-px z-10 inline-flex items-center justify-center rounded bg-zinc-900 text-zinc-200">Post</span>
         <span className="absolute inset-0 z-0 scale-x-[2.0] blur before:absolute before:inset-0 before:top-1/2 before:aspect-square before:animate-disco before:bg-gradient-conic before:from-gray-300 before:via-fuchsia-600 before:to-orange-600"></span>
       </div>
     ),

src/components/navigatorBar/index.tsx

@@ -4,14 +4,12 @@ import { NoteConnector } from '@components/connectors/note';
 import CreatePost from '@components/navigatorBar/createPost';
 import { ProfileMenu } from '@components/navigatorBar/profileMenu';
 
-import { currentUser } from '@stores/currentUser';
-
-import { useStore } from '@nanostores/react';
 import { PlusIcon } from '@radix-ui/react-icons';
+import { useLocalStorage } from '@rehooks/local-storage';
 
 export default function NavigatorBar() {
-  const $currentUser: any = useStore(currentUser);
-  const profile = $currentUser.metadata !== undefined ? JSON.parse($currentUser.metadata) : { display_name: null, username: null };
+  const [currentUser]: any = useLocalStorage('current-user');
+  const profile = currentUser.metadata !== undefined ? JSON.parse(currentUser.metadata) : { display_name: null, username: null };
 
   return (
     <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
@@ -25,7 +23,7 @@ export default function NavigatorBar() {
           <div className="flex flex-col p-2">
             <div className="flex items-center justify-between">
               <h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
-              <ProfileMenu pubkey={$currentUser.pubkey} />
+              <ProfileMenu pubkey={currentUser.pubkey} />
             </div>
             <span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
           </div>

src/components/note/atoms/reaction.tsx

@@ -1,26 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { currentUser } from '@stores/currentUser';
-
-import { useStore } from '@nanostores/react';
 import { HeartFilledIcon, HeartIcon } from '@radix-ui/react-icons';
+import { useLocalStorage } from '@rehooks/local-storage';
 import { dateToUnix, useNostr, useNostrEvents } from 'nostr-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useState } from 'react';
 
-export default function Reaction({
-  eventID,
-  eventPubkey,
-}: {
-  eventID: string;
-  eventPubkey: string;
-}) {
+export default function Reaction({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
   const { publish } = useNostr();
   const [reaction, setReaction] = useState(0);
   const [isReact, setIsReact] = useState(false);
 
-  const $currentUser: any = useStore(currentUser);
-  const pubkey = $currentUser.pubkey;
-  const privkey = $currentUser.privkey;
+  const [currentUser]: any = useLocalStorage('current-user');
+  const pubkey = currentUser.pubkey;
+  const privkey = currentUser.privkey;
 
   const { onEvent } = useNostrEvents({
     filter: {
@@ -65,15 +57,9 @@ export default function Reaction({
   };
 
   return (
-    <button
-      onClick={(e) => handleReaction(e)}
-      className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
+    <button onClick={(e) => handleReaction(e)} className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
       <div className="rounded-lg p-1 group-hover:bg-zinc-600">
-        {isReact ? (
-          <HeartFilledIcon className="h-4 w-4 group-hover:text-red-400" />
-        ) : (
-          <HeartIcon className="h-4 w-4 text-zinc-500" />
-        )}
+        {isReact ? <HeartFilledIcon className="h-4 w-4 group-hover:text-red-400" /> : <HeartIcon className="h-4 w-4 text-zinc-500" />}
       </div>
       <span>{reaction}</span>
     </button>