chore: clean up

src/components/user/followButton.tsx

@@ -1,21 +1,34 @@
 import { commands } from "@/commands.gen";
 import { cn } from "@/commons";
 import { Spinner } from "@/components";
-import { NostrAccount } from "@/system";
+import { useQuery } from "@tanstack/react-query";
+import { useRouteContext } from "@tanstack/react-router";
 import { message } from "@tauri-apps/plugin-dialog";
-import { useEffect, useState, useTransition } from "react";
+import { useTransition } from "react";
 import { useUserContext } from "./provider";
 
-export function UserFollowButton({
-	simple = false,
-	className,
-}: {
-	simple?: boolean;
-	className?: string;
-}) {
+export function UserFollowButton({ className }: { className?: string }) {
 	const user = useUserContext();
 
-	const [followed, setFollowed] = useState(false);
+	const { queryClient } = useRouteContext({ strict: false });
+	const {
+		isLoading,
+		isError,
+		data: isFollow,
+	} = useQuery({
+		queryKey: ["status", user.pubkey],
+		queryFn: async () => {
+			const res = await commands.checkContact(user.pubkey);
+
+			if (res.status === "ok") {
+				return res.data;
+			} else {
+				throw new Error(res.error);
+			}
+		},
+		refetchOnWindowFocus: false,
+	});
+
 	const [isPending, startTransition] = useTransition();
 
 	const toggleFollow = () => {
@@ -23,7 +36,17 @@ export function UserFollowButton({
 			const res = await commands.toggleContact(user.pubkey, null);
 
 			if (res.status === "ok") {
-				setFollowed((prev) => !prev);
+				queryClient.setQueryData(
+					["status", user.pubkey],
+					(prev: boolean) => !prev,
+				);
+
+				// invalidate cache
+				await queryClient.invalidateQueries({
+					queryKey: ["status", user.pubkey],
+				});
+
+				return;
 			} else {
 				await message(res.error, { kind: "error" });
 				return;
@@ -31,18 +54,6 @@ export function UserFollowButton({
 		});
 	};
 
-	useEffect(() => {
-		let mounted = true;
-
-		NostrAccount.checkContact(user.pubkey).then((status) => {
-			if (mounted) setFollowed(status);
-		});
-
-		return () => {
-			mounted = false;
-		};
-	}, []);
-
 	return (
 		<button
 			type="button"
@@ -50,15 +61,9 @@ export function UserFollowButton({
 			onClick={() => toggleFollow()}
 			className={cn("w-max", className)}
 		>
-			{isPending ? (
-				<Spinner className="size-4" />
-			) : followed ? (
-				!simple ? (
-					"Unfollow"
-				) : null
-			) : (
-				"Follow"
-			)}
+			{isError ? "Error" : null}
+			{isPending || isLoading ? <Spinner className="size-4" /> : null}
+			{isFollow ? "Unfollow" : "Follow"}
 		</button>
 	);
 }