wip: migrate to zustand

src/app/chat/components/list.tsx

@@ -1,25 +1,23 @@
 import ChatsListItem from "@app/chat/components/item";
 import ChatsListSelfItem from "@app/chat/components/self";
-
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
-import { getChatsByPubkey } from "@utils/storage";
-
-import useSWR from "swr";
-
-const fetcher = ([, pubkey]) => getChatsByPubkey(pubkey);
+import { useActiveAccount } from "@stores/accounts";
+import { useChats } from "@stores/chats";
+import { useEffect } from "react";
 
 export default function ChatsList() {
-	const { account, isLoading, isError } = useActiveAccount();
+	const account = useActiveAccount((state: any) => state.account);
+	const chats = useChats((state: any) => state.chats);
+	const fetchChats = useChats((state: any) => state.fetch);
 
-	const { data: chats, error }: any = useSWR(
-		!isLoading && !isError && account ? ["chats", account.pubkey] : null,
-		fetcher,
-	);
+	useEffect(() => {
+		if (!account) return;
+		fetchChats(account.pubkey);
+	}, [fetchChats]);
 
 	return (
 		<div className="flex flex-col gap-1">
 			<ChatsListSelfItem />
-			{!chats || error ? (
+			{!chats ? (
 				<>
 					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
 						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />

src/app/chat/components/messageList.tsx

@@ -1,15 +1,12 @@
 import { ChatMessageItem } from "@app/chat/components/messages/item";
-
+import { useActiveAccount } from "@stores/accounts";
 import { sortedChatMessagesAtom } from "@stores/chat";
-
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
-
 import { useAtomValue } from "jotai";
 import { useCallback, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 export default function ChatMessageList() {
-	const { account } = useActiveAccount();
+	const account = useActiveAccount((state: any) => state.account);
 
 	const virtuosoRef = useRef(null);
 	const data = useAtomValue(sortedChatMessagesAtom);

src/app/chat/components/messages/form.tsx

@@ -1,12 +1,9 @@
 import { ImagePicker } from "@shared/form/imagePicker";
 import { RelayContext } from "@shared/relayProvider";
-
+import { useActiveAccount } from "@stores/accounts";
 import { chatContentAtom } from "@stores/chat";
 import { WRITEONLY_RELAYS } from "@stores/constants";
-
 import { dateToUnix } from "@utils/date";
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
-
 import { useAtom } from "jotai";
 import { useResetAtom } from "jotai/utils";
 import { getEventHash, getSignature, nip04 } from "nostr-tools";
@@ -16,7 +13,7 @@ export default function ChatMessageForm({
 	receiverPubkey,
 }: { receiverPubkey: string }) {
 	const pool: any = useContext(RelayContext);
-	const { account, isLoading, isError } = useActiveAccount();
+	const account = useActiveAccount((state: any) => state.account);
 
 	const [value, setValue] = useAtom(chatContentAtom);
 	const resetValue = useResetAtom(chatContentAtom);
@@ -29,25 +26,23 @@ export default function ChatMessageForm({
 	);
 
 	const submitEvent = () => {
-		if (!isError && !isLoading && account) {
-			encryptMessage(account.privkey)
-				.then((encryptedContent) => {
-					const event: any = {
-						content: encryptedContent,
-						created_at: dateToUnix(),
-						kind: 4,
-						pubkey: account.pubkey,
-						tags: [["p", receiverPubkey]],
-					};
-					event.id = getEventHash(event);
-					event.sig = getSignature(event, account.privkey);
-					// publish note
-					pool.publish(event, WRITEONLY_RELAYS);
-					// reset state
-					resetValue();
-				})
-				.catch(console.error);
-		}
+		encryptMessage(account.privkey)
+			.then((encryptedContent) => {
+				const event: any = {
+					content: encryptedContent,
+					created_at: dateToUnix(),
+					kind: 4,
+					pubkey: account.pubkey,
+					tags: [["p", receiverPubkey]],
+				};
+				event.id = getEventHash(event);
+				event.sig = getSignature(event, account.privkey);
+				// publish note
+				pool.publish(event, WRITEONLY_RELAYS);
+				// reset state
+				resetValue();
+			})
+			.catch(console.error);
 	};
 
 	const handleEnterPress = (e) => {

src/app/chat/components/self.tsx

@@ -1,11 +1,8 @@
 import { Image } from "@shared/image";
-
+import { useActiveAccount } from "@stores/accounts";
 import { DEFAULT_AVATAR } from "@stores/constants";
-
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { shortenKey } from "@utils/shortenKey";
-
 import { twMerge } from "tailwind-merge";
 
 export default function ChatsListSelfItem() {
@@ -14,12 +11,11 @@ export default function ChatsListSelfItem() {
 	const searchParams: any = pageContext.urlParsed.search;
 	const pagePubkey = searchParams.pubkey;
 
-	const { account, isLoading, isError } = useActiveAccount();
+	const account = useActiveAccount((state: any) => state.account);
 
 	return (
 		<>
-			{isError && <div>error</div>}
-			{isLoading && !account ? (
+			{!account ? (
 				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>

src/app/chat/pages/index.page.tsx

@@ -1,13 +1,9 @@
 import ChatMessageForm from "@app/chat/components/messages/form";
-
 import { RelayContext } from "@shared/relayProvider";
-
+import { useActiveAccount } from "@stores/accounts";
 import { chatMessagesAtom } from "@stores/chat";
 import { READONLY_RELAYS } from "@stores/constants";
-
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 import { usePageContext } from "@utils/hooks/usePageContext";
-
 import { useSetAtom } from "jotai";
 import { useResetAtom } from "jotai/utils";
 import { Suspense, lazy, useContext, useEffect } from "react";
@@ -17,13 +13,12 @@ const ChatMessageList = lazy(() => import("@app/chat/components/messageList"));
 
 export function Page() {
 	const pool: any = useContext(RelayContext);
+	const account = useActiveAccount((state: any) => state.account);
+
 	const pageContext = usePageContext();
 	const searchParams: any = pageContext.urlParsed.search;
-
 	const pubkey = searchParams.pubkey;
 
-	const { account } = useActiveAccount();
-
 	const setChatMessages = useSetAtom(chatMessagesAtom);
 	const resetChatMessages = useResetAtom(chatMessagesAtom);