wip: migrate to zustand

src/app/auth/pages/create/step-2/index.page.tsx

@@ -1,8 +1,8 @@
 import { AvatarUploader } from "@shared/avatarUploader";
 import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
 import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from "@stores/constants";
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 import { getEventHash, getSignature } from "nostr-tools";
 import { useContext, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -11,8 +11,10 @@ import { navigate } from "vite-plugin-ssr/client/router";
 export function Page() {
 	const pool: any = useContext(RelayContext);
 
-	const { account } = useActiveAccount();
-
+	const [account, fetchAccount] = useActiveAccount((state: any) => [
+		state.account,
+		state.fetch,
+	]);
 	const [image, setImage] = useState(DEFAULT_AVATAR);
 	const [loading, setLoading] = useState(false);
 
@@ -50,6 +52,10 @@ export function Page() {
 		);
 	};
 
+	useEffect(() => {
+		fetchAccount();
+	}, [fetchAccount]);
+
 	useEffect(() => {
 		setValue("picture", image);
 	}, [setValue, image]);

src/app/auth/pages/create/step-3/index.page.tsx

@@ -1,8 +1,8 @@
 import { User } from "@app/auth/components/user";
 import CheckCircleIcon from "@icons/checkCircle";
 import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
 import { WRITEONLY_RELAYS } from "@stores/constants";
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 import { updateAccount } from "@utils/storage";
 import { arrayToNIP02 } from "@utils/transform";
 import { getEventHash, getSignature } from "nostr-tools";
@@ -111,8 +111,10 @@ const initialList = [
 export function Page() {
 	const pool: any = useContext(RelayContext);
 
-	const { account } = useActiveAccount();
-
+	const [account, updateFollows] = useActiveAccount((state: any) => [
+		state.account,
+		state.updateFollows,
+	]);
 	const [loading, setLoading] = useState(false);
 	const [follows, setFollows] = useState([]);
 
@@ -128,9 +130,12 @@ export function Page() {
 	const submit = async () => {
 		setLoading(true);
 
-		// update account follows
+		// update account follows in database
 		updateAccount("follows", follows, account.pubkey);
 
+		// update account follows in state
+		updateFollows(JSON.stringify(follows));
+
 		const tags = arrayToNIP02(follows);
 
 		const event: any = {

src/app/auth/pages/import/step-2/index.page.tsx

@@ -1,18 +1,19 @@
 import { User } from "@app/auth/components/user";
 import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
 import { READONLY_RELAYS } from "@stores/constants";
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 import { updateAccount } from "@utils/storage";
 import { nip02ToArray } from "@utils/transform";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import useSWRSubscription from "swr/subscription";
 import { navigate } from "vite-plugin-ssr/client/router";
 
 export function Page() {
 	const pool: any = useContext(RelayContext);
 
-	const { account } = useActiveAccount();
-
+	const [account, fetchAccount, updateFollows] = useActiveAccount(
+		(state: any) => [state.account, state.fetch, state.updateFollows],
+	);
 	const [loading, setLoading] = useState(false);
 	const [follows, setFollows] = useState([]);
 
@@ -42,9 +43,12 @@ export function Page() {
 		// follows as list
 		const followsList = nip02ToArray(follows);
 
-		// update account follows
+		// update account follows in database
 		updateAccount("follows", followsList, account.pubkey);
 
+		// update account follows in store
+		updateFollows(JSON.stringify(followsList));
+
 		// redirect to home
 		setTimeout(
 			() => navigate("/app/prefetch", { overwriteLastHistoryEntry: true }),
@@ -52,6 +56,10 @@ export function Page() {
 		);
 	};
 
+	useEffect(() => {
+		fetchAccount();
+	}, [fetchAccount]);
+
 	return (
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">