fix: app hang when loading

2024-07-31 10:13:48 +07:00
parent 48eb2f5339
commit db4a7c1037
14 changed files with 181 additions and 219 deletions
--- a/src/commands.ts
+++ b/src/commands.ts
@@ -47,7 +47,7 @@ try {
    else return { status: "error", error: e  as any };
 }
 },
-async getContactList() : Promise<Result<string[], null>> {
+async getContactList() : Promise<Result<string[], string>> {
 try {
    return { status: "ok", data: await TAURI_INVOKE("get_contact_list") };
 } catch (e) {
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,4 @@
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { QueryClient } from "@tanstack/react-query";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { type } from "@tauri-apps/plugin-os";
 import { StrictMode } from "react";
@@ -9,18 +7,7 @@ import "./global.css";
 // Import the generated route tree
 import { routeTree } from "./routes.gen";

-const queryClient = new QueryClient({
-	defaultOptions: {
-		queries: {
-			gcTime: 1000 * 60 * 60 * 24,
-		},
-	},
-});
-
-const persister = createSyncStoragePersister({
-	storage: window.localStorage,
-});
-
+const queryClient = new QueryClient();
 const platform = type();

 const router = createRouter({
@@ -44,12 +31,9 @@ if (!rootElement.innerHTML) {
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
 		<StrictMode>
-			<PersistQueryClientProvider
-				client={queryClient}
-				persistOptions={{ persister }}
-			>
+			<QueryClientProvider client={queryClient}>
 				<RouterProvider router={router} />
-			</PersistQueryClientProvider>
+			</QueryClientProvider>
 		</StrictMode>,
 	);
 }
--- a/src/routes/$account.chats.$id.lazy.tsx
+++ b/src/routes/$account.chats.$id.lazy.tsx
@@ -2,7 +2,7 @@ import { commands } from "@/commands";
 import { cn, getReceivers, groupEventByDate, time } from "@/commons";
 import { Spinner } from "@/components/spinner";
 import { User } from "@/components/user";
-import { ArrowUp, Paperclip } from "@phosphor-icons/react";
+import { ArrowUp } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
--- a/src/routes/$account.chats.lazy.tsx
+++ b/src/routes/$account.chats.lazy.tsx
@@ -19,7 +19,7 @@ import { message } from "@tauri-apps/plugin-dialog";
 import type { NostrEvent } from "nostr-tools";
 import { useCallback, useEffect, useState, useTransition } from "react";

-type Payload = {
+type EventPayload = {
 	event: string;
 	sender: string;
 };
@@ -90,6 +90,8 @@ function ChatList() {
 			}
 		},
 		select: (data) => data.sort((a, b) => b.created_at - a.created_at),
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
 	});

 	useEffect(() => {
@@ -103,14 +105,14 @@ function ChatList() {
 	}, []);

 	useEffect(() => {
-		const unlisten = listen<Payload>("event", async (data) => {
+		const unlisten = listen<EventPayload>("event", async (data) => {
 			const event: NostrEvent = JSON.parse(data.payload.event);
 			const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);

 			if (chats) {
-				const exist = chats.find((ev) => ev.pubkey === event.pubkey);
+				const index = chats.findIndex((item) => item.pubkey === event.pubkey);

-				if (!exist) {
+				if (index === -1) {
 					await queryClient.setQueryData(
 						["chats"],
 						(prevEvents: NostrEvent[]) => {
@@ -121,16 +123,12 @@ function ChatList() {
 						},
 					);
 				} else {
-					const index = chats.findIndex((item) => item.pubkey === event.pubkey);
 					const newEvents = [...chats];
+					newEvents[index] = {
+						...event,
+					};

-					if (index !== -1) {
-						newEvents[index] = {
-							...event,
-						};
-
-						await queryClient.setQueryData(["chats"], newEvents);
-					}
+					await queryClient.setQueryData(["chats"], newEvents);
 				}
 			}
 		});
@@ -147,7 +145,7 @@ function ChatList() {
 			className="overflow-hidden flex-1 w-full"
 		>
 			<ScrollArea.Viewport className="relative h-full px-1.5">
-				{isLoading ? (
+				{isLoading || !data.length ? (
 					<div>
 						{[...Array(5).keys()].map((i) => (
 							<div
--- a/src/routes/create-account.lazy.tsx
+++ b/src/routes/create-account.lazy.tsx
@@ -38,7 +38,10 @@ function Screen() {
 	};

 	return (
-		<div className="size-full flex items-center justify-center">
+		<div
+			data-tauri-drag-region
+			className="size-full flex items-center justify-center"
+		>
 			<div className="w-[320px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
 					<h1 className="leading-tight text-xl font-semibold">New Identity</h1>
@@ -61,7 +64,7 @@ function Screen() {
 								placeholder="https://"
 								value={picture}
 								onChange={(e) => setPicture(e.target.value)}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
 							/>
 						</div>
 						<div className="flex flex-col gap-1">
@@ -76,7 +79,7 @@ function Screen() {
 								type="text"
 								value={name}
 								onChange={(e) => setName(e.target.value)}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
 							/>
 						</div>
 					</Frame>
--- a/src/routes/import-key.lazy.tsx
+++ b/src/routes/import-key.lazy.tsx
@@ -48,7 +48,10 @@ function Screen() {
 	};

 	return (
-		<div className="size-full flex items-center justify-center">
+		<div
+			data-tauri-drag-region
+			className="size-full flex items-center justify-center"
+		>
 			<div className="w-[320px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
 					<h1 className="leading-tight text-xl font-semibold">
@@ -75,7 +78,7 @@ function Screen() {
 									placeholder="nsec or ncryptsec..."
 									value={key}
 									onChange={(e) => setKey(e.target.value)}
-									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
 								/>
 								<button
 									type="button"
@@ -98,7 +101,7 @@ function Screen() {
 								type="password"
 								value={password}
 								onChange={(e) => setPassword(e.target.value)}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
 							/>
 						</div>
 					</Frame>
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -54,7 +54,10 @@ function Screen() {
 	};

 	return (
-		<div className="size-full flex items-center justify-center">
+		<div
+			data-tauri-drag-region
+			className="size-full flex items-center justify-center"
+		>
 			<div className="w-[320px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
 					<h3 className="leading-tight text-neutral-700 dark:text-neutral-300">
--- a/src/routes/new.lazy.tsx
+++ b/src/routes/new.lazy.tsx
@@ -6,7 +6,10 @@ export const Route = createLazyFileRoute("/new")({

 function Screen() {
 	return (
-		<div className="size-full flex items-center justify-center">
+		<div
+			data-tauri-drag-region
+			className="size-full flex items-center justify-center"
+		>
 			<div className="w-[320px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
 					<h1 className="leading-tight text-xl font-semibold">
@@ -22,7 +25,7 @@ function Screen() {
 					</Link>
 					<Link
 						to="/nostr-connect"
-						className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-950 dark:bg-neutral-900 rounded-lg inline-flex items-center justify-center"
+						className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-100 dark:bg-white dark:text-black rounded-lg inline-flex items-center justify-center"
 					>
 						Login with Nostr Connect
 					</Link>
--- a/src/routes/nostr-connect.lazy.tsx
+++ b/src/routes/nostr-connect.lazy.tsx
@@ -51,7 +51,10 @@ function Screen() {
 	};

 	return (
-		<div className="size-full flex items-center justify-center">
+		<div
+			data-tauri-drag-region
+			className="size-full flex items-center justify-center"
+		>
 			<div className="w-[320px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
 					<h1 className="leading-tight text-xl font-semibold">Nostr Connect</h1>
@@ -74,7 +77,7 @@ function Screen() {
 								placeholder="bunker://..."
 								value={uri}
 								onChange={(e) => setUri(e.target.value)}
-								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
+								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
 							/>
 							<button
 								type="button"