wip

src/app/space/components/addFeed.tsx

@@ -1,12 +1,15 @@
 import { Dialog, Transition } from "@headlessui/react";
+import { createBlock } from "@libs/storage";
 import { CancelIcon } from "@shared/icons";
-import { useActiveAccount } from "@stores/accounts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAccount } from "@utils/hooks/useAccount";
 import { nip19 } from "nostr-tools";
 import { Fragment, useState } from "react";
 import { useForm } from "react-hook-form";
 
 export function AddFeedBlock({ parentState }: { parentState: any }) {
-	const addBlock = useActiveAccount((state: any) => state.addBlock);
+	const queryClient = useQueryClient();
+	const { account } = useAccount();
 
 	const [loading, setLoading] = useState(false);
 	const [isOpen, setIsOpen] = useState(true);
@@ -18,6 +21,13 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 		parentState(false);
 	};
 
+	const block = useMutation({
+		mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
+
 	const {
 		register,
 		handleSubmit,
@@ -35,7 +45,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 		}
 
 		// insert to database
-		addBlock(1, data.title, pubkey);
+		block.mutate({ kind: 1, title: data.title, content: pubkey });
 
 		setTimeout(() => {
 			setLoading(false);
@@ -43,7 +53,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 			reset();
 			// close modal
 			closeModal();
-		}, 1000);
+		}, 1200);
 	};
 
 	return (
@@ -70,7 +80,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 						leaveFrom="opacity-100 scale-100"
 						leaveTo="opacity-0 scale-95"
 					>
-						<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
+						<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 bg-zinc-900">
 							<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
 								<div className="flex flex-col gap-2">
 									<div className="flex items-center justify-between">
@@ -102,7 +112,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 							<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
 								<form
 									onSubmit={handleSubmit(onSubmit)}
-									className="flex h-full w-full flex-col gap-4"
+									className="flex h-full w-full flex-col gap-4 mb-0"
 								>
 									<div className="flex flex-col gap-1">
 										<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">

src/app/space/components/addImage.tsx

@@ -1,28 +1,29 @@
 import { Dialog, Transition } from "@headlessui/react";
+import { createBlock } from "@libs/storage";
 import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import { CancelIcon } from "@shared/icons";
 import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
-import { useActiveAccount } from "@stores/accounts";
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { open } from "@tauri-apps/api/dialog";
 import { Body, fetch } from "@tauri-apps/api/http";
 import { createBlobFromFile } from "@utils/createBlobFromFile";
 import { dateToUnix } from "@utils/date";
+import { useAccount } from "@utils/hooks/useAccount";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 export function AddImageBlock({ parentState }: { parentState: any }) {
 	const ndk = useContext(RelayContext);
+	const queryClient = useQueryClient();
 
-	const [account, addBlock] = useActiveAccount((state: any) => [
-		state.account,
-		state.addBlock,
-	]);
 	const [loading, setLoading] = useState(false);
 	const [isOpen, setIsOpen] = useState(true);
 	const [image, setImage] = useState("");
 
+	const { account } = useAccount();
+
 	const tags = useRef(null);
 
 	const closeModal = () => {
@@ -88,6 +89,13 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 		}
 	};
 
+	const block = useMutation({
+		mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
+
 	const onSubmit = (data: any) => {
 		setLoading(true);
 
@@ -105,8 +113,8 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 		// publish event
 		event.publish();
 
-		// insert to database
-		addBlock(0, data.title, data.content);
+		// mutate
+		block.mutate({ kind: 0, title: data.title, content: data.content });
 
 		setTimeout(() => {
 			setLoading(false);
@@ -114,7 +122,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 			reset();
 			// close modal
 			closeModal();
-		}, 1000);
+		}, 1200);
 	};
 
 	useEffect(() => {
@@ -145,7 +153,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 						leaveFrom="opacity-100 scale-100"
 						leaveTo="opacity-0 scale-95"
 					>
-						<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
+						<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 bg-zinc-900">
 							<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
 								<div className="flex flex-col gap-2">
 									<div className="flex items-center justify-between">
@@ -177,7 +185,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 							<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
 								<form
 									onSubmit={handleSubmit(onSubmit)}
-									className="flex h-full w-full flex-col gap-4"
+									className="flex h-full w-full flex-col gap-4 mb-0"
 								>
 									<input
 										type={"hidden"}

src/app/space/components/blocks/feed.tsx

@@ -1,9 +1,12 @@
-import { getNotesByAuthor } from "@libs/storage";
+import { getNotesByAuthor, removeBlock } from "@libs/storage";
 import { Note } from "@shared/notes/note";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { TitleBar } from "@shared/titleBar";
-import { useActiveAccount } from "@stores/accounts";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import {
+	useInfiniteQuery,
+	useMutation,
+	useQueryClient,
+} from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useEffect, useRef } from "react";
 
@@ -11,12 +14,7 @@ const ITEM_PER_PAGE = 10;
 const TIME = Math.floor(Date.now() / 1000);
 
 export function FeedBlock({ params }: { params: any }) {
-	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
-
-	const close = () => {
-		removeBlock(params.id, true);
-	};
-
+	const queryClient = useQueryClient();
 	const {
 		status,
 		data,
@@ -65,6 +63,13 @@ export function FeedBlock({ params }: { params: any }) {
 		}
 	}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
 
+	const block = useMutation({
+		mutationFn: (id: string) => removeBlock(id),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
+
 	const renderItem = (index: string | number) => {
 		const note = notes[index];
 
@@ -78,7 +83,7 @@ export function FeedBlock({ params }: { params: any }) {
 
 	return (
 		<div className="shrink-0 w-[400px] border-r border-zinc-900">
-			<TitleBar title={params.title} onClick={() => close()} />
+			<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
 			<div
 				ref={parentRef}
 				className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto"

src/app/space/components/blocks/following.tsx

@@ -4,7 +4,6 @@ import { Note } from "@shared/notes/note";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { RelayContext } from "@shared/relayProvider";
 import { TitleBar } from "@shared/titleBar";
-import { useActiveAccount } from "@stores/accounts";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { dateToUnix } from "@utils/date";
@@ -63,17 +62,16 @@ export function FollowingBlock({ block }: { block: number }) {
 	}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
 
 	useEffect(() => {
-		let sub: NDKSubscription;
+		const follows = account ? JSON.parse(account.follows) : [];
 
-		if (account) {
-			const follows = JSON.parse(account.follows);
-			const filter: NDKFilter = {
-				kinds: [1, 6],
-				authors: follows,
-				since: dateToUnix(),
-			};
+		const filter: NDKFilter = {
+			kinds: [1, 6],
+			authors: follows,
+			since: dateToUnix(),
+		};
 
-			sub = ndk.subscribe(filter);
+		const sub = account ? ndk.subscribe(filter) : null;
+		if (sub) {
 			sub.addListener("event", (event: NDKEvent) => {
 				createNote(
 					event.id,
@@ -87,7 +85,9 @@ export function FollowingBlock({ block }: { block: number }) {
 		}
 
 		return () => {
-			sub.stop();
+			if (sub) {
+				sub.stop();
+			}
 		};
 	}, [account]);
 

src/app/space/components/blocks/image.tsx

@@ -1,25 +1,30 @@
+import { removeBlock } from "@libs/storage";
 import { Image } from "@shared/image";
 import { TitleBar } from "@shared/titleBar";
-import { useActiveAccount } from "@stores/accounts";
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 export function ImageBlock({ params }: { params: any }) {
-	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
+	const queryClient = useQueryClient();
 
-	const close = () => {
-		removeBlock(params.id, true);
-	};
+	const block = useMutation({
+		mutationFn: (id: string) => removeBlock(id),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
 
 	return (
-		<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
-			<TitleBar title={params.title} onClick={() => close()} />
-			<div className="w-full flex-1 p-3">
-				<Image
-					src={params.content}
-					fallback={DEFAULT_AVATAR}
-					alt={params.title}
-					className="w-full h-full object-cover rounded-md"
-				/>
+		<div className="shrink-0 w-[350px] h-full flex flex-col justify-between border-r border-zinc-900">
+			<div className="flex-1 w-full h-full overflow-hidden p-3">
+				<div className="w-full h-full">
+					<Image
+						src={params.content}
+						fallback={DEFAULT_AVATAR}
+						alt={params.title}
+						className="w-full h-full object-cover rounded-xl border-t border-zinc-800/50"
+					/>
+				</div>
 			</div>
 		</div>
 	);

src/app/space/components/blocks/thread.tsx

@@ -1,4 +1,4 @@
-import { getNoteByID } from "@libs/storage";
+import { getNoteByID, removeBlock } from "@libs/storage";
 import { Kind1 } from "@shared/notes/contents/kind1";
 import { Kind1063 } from "@shared/notes/contents/kind1063";
 import { NoteMetadata } from "@shared/notes/metadata";
@@ -7,11 +7,12 @@ import { RepliesList } from "@shared/notes/replies/list";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { TitleBar } from "@shared/titleBar";
 import { User } from "@shared/user";
-import { useActiveAccount } from "@stores/accounts";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { parser } from "@utils/parser";
 
 export function ThreadBlock({ params }: { params: any }) {
+	const queryClient = useQueryClient();
+
 	const { status, data, isFetching } = useQuery(
 		["thread", params.content],
 		async () => {
@@ -19,16 +20,18 @@ export function ThreadBlock({ params }: { params: any }) {
 		},
 	);
 
-	const content = data ? parser(data) : null;
-	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
+	const block = useMutation({
+		mutationFn: (id: string) => removeBlock(id),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
 
-	const close = () => {
-		removeBlock(params.id, false);
-	};
+	const content = data ? parser(data) : null;
 
 	return (
 		<div className="shrink-0 w-[400px] border-r border-zinc-900">
-			<TitleBar title={params.title} onClick={() => close()} />
+			<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
 			<div className="scrollbar-hide flex w-full h-full flex-col gap-1.5 pt-1.5 pb-20 overflow-y-auto">
 				{status === "loading" || isFetching ? (
 					<div className="px-3 py-1.5">

src/app/space/index.tsx

@@ -4,15 +4,41 @@ import { FollowingBlock } from "@app/space/components/blocks/following";
 import { ImageBlock } from "@app/space/components/blocks/image";
 import { ThreadBlock } from "@app/space/components/blocks/thread";
 import { getBlocks } from "@libs/storage";
-
-const blocks = await getBlocks();
+import { LoaderIcon } from "@shared/icons";
+import { useQuery } from "@tanstack/react-query";
 
 export function SpaceScreen() {
+	const {
+		status,
+		data: blocks,
+		isFetching,
+	} = useQuery(
+		["blocks"],
+		async () => {
+			return await getBlocks();
+		},
+		{
+			staleTime: Infinity,
+			refetchOnMount: false,
+			refetchOnReconnect: false,
+			refetchOnWindowFocus: false,
+		},
+	);
+
 	return (
 		<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden scrollbar-hide">
 			<FollowingBlock block={1} />
-			{!blocks ? (
-				<p>Loading...</p>
+			{status === "loading" ? (
+				<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
+					<div
+						data-tauri-drag-region
+						className="group overflow-hidden h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
+					/>
+
+					<div className="w-full flex-1 flex items-center justify-center p-3">
+						<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
+					</div>
+				</div>
 			) : (
 				blocks.map((block: any) => {
 					switch (block.kind) {
@@ -27,6 +53,18 @@ export function SpaceScreen() {
 					}
 				})
 			)}
+			{isFetching && (
+				<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
+					<div
+						data-tauri-drag-region
+						className="group overflow-hidden h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
+					/>
+
+					<div className="w-full flex-1 flex items-center justify-center p-3">
+						<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
+					</div>
+				</div>
+			)}
 			<div className="shrink-0 w-[90px]">
 				<div className="w-full h-full inline-flex items-center justify-center">
 					<AddBlock />