migrated activeAccount state to rehook

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.3",
+    "@rehooks/local-storage": "^2.4.4",
     "@supabase/supabase-js": "^2.15.0",
     "@tauri-apps/api": "^1.2.0",
     "dayjs": "^1.11.7",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@radix-ui/react-icons': ^1.3.0
   '@radix-ui/react-popover': ^1.0.5
   '@radix-ui/react-tabs': ^1.0.3
+  '@rehooks/local-storage': ^2.4.4
   '@supabase/supabase-js': ^2.15.0
   '@tailwindcss/typography': ^0.5.9
   '@tauri-apps/api': ^1.2.0
@@ -60,6 +61,7 @@ dependencies:
   '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@radix-ui/react-popover': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
   '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
+  '@rehooks/local-storage': 2.4.4_react@18.2.0
   '@supabase/supabase-js': 2.15.0
   '@tauri-apps/api': 1.2.0
   dayjs: 1.11.7
@@ -997,6 +999,15 @@ packages:
       '@babel/runtime': 7.21.0
     dev: false
 
+  /@rehooks/local-storage/2.4.4_react@18.2.0:
+    resolution:
+      { integrity: sha512-zE+kfOkG59n/1UTxdmbwktIosclr67Nlbf2MzUJ9mNtCSypVscNHeD1qT6JCSo5Pjj8DO893IKWNLJqKKzDL/Q== }
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@rushstack/eslint-patch/1.2.0:
     resolution:
       { integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg== }

src/components/channels/createChannelModal.tsx

@@ -4,6 +4,7 @@ import { dateToUnix } from '@utils/getDate';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
+import useLocalStorage from '@rehooks/local-storage';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -12,6 +13,8 @@ export const CreateChannelModal = () => {
   const [pool, relays]: any = useContext(RelayContext);
   const [open, setOpen] = useState(false);
 
+  const [activeAccount]: any = useLocalStorage('activeAccount');
+
   const {
     register,
     handleSubmit,
@@ -19,14 +22,12 @@ export const CreateChannelModal = () => {
     formState: { isDirty, isValid },
   } = useForm();
 
-  const insertChannelToDB = useCallback(async (id, data) => {
+  const insertChannelToDB = useCallback(async (id, data, account) => {
     const { createChannel } = await import('@utils/bindings');
-    return await createChannel({ event_id: id, content: data });
+    return await createChannel({ event_id: id, content: data, account_id: account });
   }, []);
 
   const onSubmit = (data) => {
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
-
     const event: any = {
       content: JSON.stringify(data),
       created_at: dateToUnix(),
@@ -40,7 +41,7 @@ export const CreateChannelModal = () => {
     // publish channel
     pool.publish(event, relays);
     // save to database
-    insertChannelToDB(event.id, data);
+    insertChannelToDB(event.id, data, activeAccount.id);
     // close modal
     setOpen(false);
     // reset form

src/components/chats/chatList.tsx

@@ -2,17 +2,16 @@ import { ChatListItem } from '@components/chats/chatListItem';
 import { ChatModal } from '@components/chats/chatModal';
 import { ImageWithFallback } from '@components/imageWithFallback';
 
-import { activeAccountAtom } from '@stores/account';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { useAtomValue } from 'jotai';
+import useLocalStorage from '@rehooks/local-storage';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 export default function ChatList() {
   const router = useRouter();
 
-  const activeAccount: any = useAtomValue(activeAccountAtom);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const accountProfile = JSON.parse(activeAccount.metadata);
 
   const [list, setList] = useState([]);

src/components/chats/chatModal.tsx

@@ -1,15 +1,13 @@
 import { ChatModalUser } from '@components/chats/chatModalUser';
 
-import { activeAccountAtom } from '@stores/account';
-
 import * as Dialog from '@radix-ui/react-dialog';
 import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
-import { useAtomValue } from 'jotai';
+import useLocalStorage from '@rehooks/local-storage';
 import { useCallback, useEffect, useState } from 'react';
 
 export const ChatModal = () => {
   const [plebs, setPlebs] = useState([]);
-  const activeAccount: any = useAtomValue(activeAccountAtom);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
 
   const fetchPlebsByAccount = useCallback(async (id) => {
     const { getPlebs } = await import('@utils/bindings');

src/components/chats/messageList.tsx

@@ -1,14 +1,15 @@
 import MessageListItem from '@components/chats/messageListItem';
 
+import useLocalStorage from '@rehooks/local-storage';
 import { useCallback, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 export const MessageList = ({ data }: { data: any }) => {
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const virtuosoRef = useRef(null);
 
   const itemContent: any = useCallback(
     (index: string | number) => {
-      const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
       return (
         <MessageListItem
           data={data[index]}
@@ -17,7 +18,7 @@ export const MessageList = ({ data }: { data: any }) => {
         />
       );
     },
-    [data]
+    [activeAccount.privkey, activeAccount.pubkey, data]
   );
 
   const computeItemKey = useCallback(

src/components/eventCollector.tsx

@@ -1,11 +1,11 @@
 import { RelayContext } from '@components/relaysProvider';
 
-import { lastLoginAtom } from '@stores/account';
 import { hasNewerNoteAtom } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
 import { getParentID, pubkeyArray } from '@utils/transform';
 
+import useLocalStorage, { writeStorage } from '@rehooks/local-storage';
 import { TauriEvent } from '@tauri-apps/api/event';
 import { appWindow, getCurrent } from '@tauri-apps/api/window';
 import { useSetAtom } from 'jotai';
@@ -14,10 +14,11 @@ import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 export default function EventCollector() {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const setLastLoginAtom = useSetAtom(lastLoginAtom);
+  const [isOnline] = useState(true);
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
 
-  const [isOnline] = useState(true);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
+  const [follows] = useLocalStorage('activeAccountFollows');
 
   const now = useRef(new Date());
   const unsubscribe = useRef(null);
@@ -27,9 +28,6 @@ export default function EventCollector() {
     const { createChat } = await import('@utils/bindings');
     const { createChannel } = await import('@utils/bindings');
 
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
-    const follows = JSON.parse(localStorage.getItem('activeAccountFollows'));
-
     unsubscribe.current = pool.subscribe(
       [
         {
@@ -79,19 +77,19 @@ export default function EventCollector() {
         }
       }
     );
-  }, [pool, relays, setHasNewerNote]);
+  }, [activeAccount.id, activeAccount.pubkey, follows, pool, relays, setHasNewerNote]);
 
   useEffect(() => {
     subscribe();
     getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, () => {
-      setLastLoginAtom(now.current);
+      writeStorage('lastLogin', now.current);
       appWindow.close();
     });
 
     return () => {
       unsubscribe.current;
     };
-  }, [setHasNewerNote, setLastLoginAtom, subscribe]);
+  }, [setHasNewerNote, subscribe]);
 
   return (
     <div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">

src/components/form/base.tsx

@@ -6,6 +6,7 @@ import { noteContentAtom } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
 
+import useLocalStorage from '@rehooks/local-storage';
 import { useAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -17,9 +18,9 @@ export default function FormBase() {
   const [value, setValue] = useAtom(noteContentAtom);
   const resetValue = useResetAtom(noteContentAtom);
 
-  const submitEvent = () => {
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
+  const [activeAccount]: any = useLocalStorage('activeAccount');
 
+  const submitEvent = () => {
     const event: any = {
       content: value,
       created_at: dateToUnix(),

src/components/form/chat.tsx

@@ -3,12 +3,14 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { dateToUnix } from '@utils/getDate';
 
+import useLocalStorage from '@rehooks/local-storage';
 import { getEventHash, nip04, signEvent } from 'nostr-tools';
 import { useCallback, useContext, useState } from 'react';
 
 export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) {
   const [pool, relays]: any = useContext(RelayContext);
   const [value, setValue] = useState('');
+  const [activeAccount]: any = useLocalStorage('activeAccount');
 
   const encryptMessage = useCallback(
     async (privkey: string) => {
@@ -18,7 +20,6 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
   );
 
   const submitEvent = useCallback(() => {
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
     encryptMessage(activeAccount.privkey)
       .then((encryptedContent) => {
         const event: any = {
@@ -36,7 +37,7 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
         setValue('');
       })
       .catch(console.error);
-  }, [encryptMessage, receiverPubkey, pool, relays]);
+  }, [encryptMessage, activeAccount.privkey, activeAccount.pubkey, receiverPubkey, pool, relays]);
 
   const handleEnterPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {

src/components/form/comment.tsx

@@ -1,22 +1,19 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
-import { activeAccountAtom } from '@stores/account';
-
 import { dateToUnix } from '@utils/getDate';
 
-import destr from 'destr';
-import { useAtomValue } from 'jotai';
+import useLocalStorage from '@rehooks/local-storage';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount: any = useAtomValue(activeAccountAtom);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const [value, setValue] = useState('');
 
-  const profile = destr(activeAccount.metadata);
+  const profile = JSON.parse(activeAccount.metadata);
 
   const submitEvent = () => {
     const event: any = {

src/components/multiAccounts/activeAccount.tsx

@@ -29,20 +29,19 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   const insertFollowsToStorage = useCallback(
     async (tags) => {
       const { createPleb } = await import('@utils/bindings');
-      const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
 
       for (const tag of tags) {
         const metadata: any = await fetchMetadata(tag[1], pool, relays);
         createPleb({
-          pleb_id: tag[1] + '-lume' + activeAccount.id.toString(),
+          pleb_id: tag[1] + '-lume' + user.id.toString(),
           pubkey: tag[1],
           kind: 0,
           metadata: metadata.content,
-          account_id: activeAccount.id,
+          account_id: user.id,
         }).catch(console.error);
       }
     },
-    [pool, relays]
+    [pool, relays, user.id]
   );
 
   useEffect(() => {

src/components/multiAccounts/index.tsx

@@ -6,15 +6,15 @@ import { APP_VERSION } from '@stores/constants';
 import LumeSymbol from '@assets/icons/Lume';
 
 import { PlusIcon } from '@radix-ui/react-icons';
+import useLocalStorage from '@rehooks/local-storage';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 
 export default function MultiAccounts() {
   const [users, setUsers] = useState([]);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
 
   const renderAccount = useCallback((user: { pubkey: string }) => {
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
-
     if (user.pubkey === activeAccount.pubkey) {
       return <ActiveAccount key={user.pubkey} user={user} />;
     } else {

src/components/note/meta/comment.tsx

@@ -2,16 +2,13 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
-import { activeAccountAtom } from '@stores/account';
-
 import { dateToUnix } from '@utils/getDate';
 
 import CommentIcon from '@assets/icons/comment';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import { SizeIcon } from '@radix-ui/react-icons';
-import destr from 'destr';
-import { useAtomValue } from 'jotai';
+import useLocalStorage from '@rehooks/local-storage';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useState } from 'react';
@@ -35,8 +32,8 @@ export const NoteComment = memo(function NoteComment({
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
 
-  const activeAccount: any = useAtomValue(activeAccountAtom);
-  const profile = destr(activeAccount.metadata);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
+  const profile = JSON.parse(activeAccount.metadata);
 
   const openThread = () => {
     router.push(`/newsfeed/${eventID}`);

src/components/note/meta/reaction.tsx

@@ -1,13 +1,11 @@
 import { RelayContext } from '@components/relaysProvider';
 
-import { activeAccountAtom } from '@stores/account';
-
 import { dateToUnix } from '@utils/getDate';
 
 import LikeIcon from '@assets/icons/like';
 import LikedIcon from '@assets/icons/liked';
 
-import { useAtomValue } from 'jotai';
+import useLocalStorage from '@rehooks/local-storage';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useEffect, useState } from 'react';
 
@@ -22,8 +20,7 @@ export const NoteReaction = memo(function NoteReaction({
 }) {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount: any = useAtomValue(activeAccountAtom);
-
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(0);
 

src/components/note/parent.tsx

@@ -8,6 +8,7 @@ import { UserMention } from '@components/user/mention';
 
 import { getParentID } from '@utils/transform';
 
+import useLocalStorage from '@rehooks/local-storage';
 import destr from 'destr';
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
@@ -15,12 +16,13 @@ import reactStringReplace from 'react-string-replace';
 export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const [pool, relays]: any = useContext(RelayContext);
 
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const [event, setEvent] = useState(null);
+
   const unsubscribe = useRef(null);
 
   const fetchEvent = useCallback(async () => {
     const { createNote } = await import('@utils/bindings');
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
 
     unsubscribe.current = pool.subscribe(
       [
@@ -54,7 +56,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
         unsubscribeOnEose: true,
       }
     );
-  }, [id, pool, relays]);
+  }, [activeAccount.id, id, pool, relays]);
 
   const checkNoteExist = useCallback(async () => {
     const { getNoteById } = await import('@utils/bindings');

src/components/note/repost.tsx

@@ -4,6 +4,7 @@ import { UserMention } from '@components/user/mention';
 
 import { getParentID } from '@utils/transform';
 
+import useLocalStorage from '@rehooks/local-storage';
 import destr from 'destr';
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
@@ -11,12 +12,13 @@ import reactStringReplace from 'react-string-replace';
 export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
   const [pool, relays]: any = useContext(RelayContext);
 
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const [event, setEvent] = useState(null);
+
   const unsubscribe = useRef(null);
 
   const fetchEvent = useCallback(async () => {
     const { createNote } = await import('@utils/bindings');
-    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
 
     unsubscribe.current = pool.subscribe(
       [
@@ -50,7 +52,7 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
         unsubscribeOnEose: true,
       }
     );
-  }, [id, pool, relays]);
+  }, [activeAccount.id, id, pool, relays]);
 
   const checkNoteExist = useCallback(async () => {
     const { getNoteById } = await import('@utils/bindings');

src/pages/chats/[pubkey].tsx

@@ -5,9 +5,7 @@ import { MessageList } from '@components/chats/messageList';
 import FormChat from '@components/form/chat';
 import { RelayContext } from '@components/relaysProvider';
 
-import { activeAccountAtom } from '@stores/account';
-
-import { useAtomValue } from 'jotai';
+import useLocalStorage from '@rehooks/local-storage';
 import { useRouter } from 'next/router';
 import {
   JSXElementConstructor,
@@ -25,7 +23,7 @@ export default function Page() {
   const router = useRouter();
   const pubkey: any = router.query.pubkey || null;
 
-  const activeAccount: any = useAtomValue(activeAccountAtom);
+  const [activeAccount]: any = useLocalStorage('activeAccount');
   const [messages, setMessages] = useState([]);
 
   useEffect(() => {

src/pages/index.tsx

@@ -1,17 +1,13 @@
 import BaseLayout from '@layouts/base';
 
-import { activeAccountAtom, activeAccountFollowsAtom } from '@stores/account';
-
 import LumeSymbol from '@assets/icons/Lume';
 
-import { useSetAtom } from 'jotai';
+import { writeStorage } from '@rehooks/local-storage';
 import { useRouter } from 'next/router';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useCallback, useEffect } from 'react';
 
 export default function Page() {
   const router = useRouter();
-  const setActiveAccount = useSetAtom(activeAccountAtom);
-  const setActiveAccountFollows = useSetAtom(activeAccountFollowsAtom);
 
   const fetchActiveAccount = useCallback(async () => {
     const { getAccounts } = await import('@utils/bindings');
@@ -29,10 +25,10 @@ export default function Page() {
         if (res.length > 0) {
           // fetch follows
           fetchFollowsByAccount(res[0].id).then((follows) => {
-            setActiveAccountFollows(follows);
+            writeStorage('activeAccountFollows', follows);
           });
           // update local storage
-          setActiveAccount(res[0]);
+          writeStorage('activeAccount', res[0]);
           // redirect
           router.replace('/init');
         } else {
@@ -40,7 +36,7 @@ export default function Page() {
         }
       })
       .catch(console.error);
-  }, [fetchActiveAccount, setActiveAccount, fetchFollowsByAccount, setActiveAccountFollows, router]);
+  }, [fetchActiveAccount, fetchFollowsByAccount, router]);
 
   return (
     <div className="relative h-full overflow-hidden">

src/pages/init.tsx

@@ -7,6 +7,7 @@ import { getParentID, pubkeyArray } from '@utils/transform';
 
 import LumeSymbol from '@assets/icons/Lume';
 
+import { useLocalStorage } from '@rehooks/local-storage';
 import { invoke } from '@tauri-apps/api/tauri';
 import { useRouter } from 'next/router';
 import {
@@ -30,11 +31,13 @@ export default function Page() {
 
   const [eose, setEose] = useState(false);
 
+  const [lastLogin] = useLocalStorage('lastLogin');
+  const [activeAccount]: any = useLocalStorage('activeAccount');
+  const [follows] = useLocalStorage('activeAccountFollows');
+
   const fetchData = useCallback(
     async (since: Date) => {
       const { createNote } = await import('@utils/bindings');
-      const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
-      const follows = JSON.parse(localStorage.getItem('activeAccountFollows'));
 
       unsubscribe.current = pool.subscribe(
         [
@@ -67,20 +70,19 @@ export default function Page() {
         }
       );
     },
-    [pool, relays]
+    [activeAccount.id, follows, pool, relays]
   );
 
   const isNoteExist = useCallback(async () => {
     invoke('count_total_notes').then((res: number) => {
       if (res > 0) {
-        const lastLogin = JSON.parse(localStorage.getItem('lastLogin'));
         const parseDate = new Date(lastLogin);
         fetchData(parseDate);
       } else {
         fetchData(hoursAgo(24, now.current));
       }
     });
-  }, [fetchData]);
+  }, [fetchData, lastLogin]);
 
   useEffect(() => {
     if (eose === false) {

src/stores/account.tsx

@@ -1,14 +0,0 @@
-import { atomWithStorage, createJSONStorage } from 'jotai/utils';
-
-const createMyJsonStorage = () => {
-  const storage = createJSONStorage(() => localStorage);
-  const getItem = (key) => {
-    const value = storage.getItem(key);
-    return value;
-  };
-  return { ...storage, getItem };
-};
-
-export const activeAccountAtom = atomWithStorage('activeAccount', {}, createMyJsonStorage());
-export const activeAccountFollowsAtom = atomWithStorage('activeAccountFollows', [], createMyJsonStorage());
-export const lastLoginAtom = atomWithStorage('lastLogin', [], createMyJsonStorage());