disable syncing once synced

web/src/components/sync-button.tsx

@@ -1,21 +1,29 @@
-import { client } from "#/lib/eden";
-import { toast } from "sonner";
-import { Button } from "./ui/button";
 import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { client } from "#/lib/eden";
+import { Button } from "./ui/button";
 import { Item, ItemActions, ItemDescription, ItemTitle } from "./ui/item";
 
 export function SyncButton() {
 	const query = useQueryClient();
+	const [syncing, setSyncing] = useState(false);
 	return (
 		<Item className="px-0 justify-between">
 			<ItemDescription>Sync your data</ItemDescription>
 			<ItemActions>
 				<Button
+					disabled={syncing}
 					onClick={async () => {
 						toast.promise(
 							(async () => {
+								setSyncing(true);
+								try {
 									await client.api.sync.post();
+								} finally {
+									setSyncing(false);
 									query.invalidateQueries();
+								}
 							})(),
 							{
 								loading: "Syncing...",

web/src/hooks/user.ts

@@ -1,5 +1,5 @@
-import { authClient } from "#/lib/auth-client";
 import type { AuthSession } from "#/lib/auth.serverfn";
+import { authClient } from "#/lib/auth-client";
 import { Route } from "#/routes/__root";
 
 interface UserData {
@@ -17,5 +17,5 @@ export function useUser() {
 		null) as AuthSession["session"] | null;
 	const user = clientSession?.user ?? routeContext.session?.user ?? null;
 	const isLoading = !routeContext.session && isClientSessionPending;
-  return { user, session, isLoading } satisfies UserData;
+	return { user, session, isLoading } as UserData;
 }

web/src/routes/index.tsx

@@ -1,17 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PartyQr } from "#/components/party-qr";
 import { SyncButton } from "#/components/sync-button";
 import { MainContent } from "#/components/ui/main-content";
 import { UserInfo } from "#/components/user-info";
-import { PartyQr } from "#/components/party-qr";
+import { useUser } from "#/hooks/user";
-import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({ component: App });
 
 function App() {
+	const { user } = useUser();
 	return (
 		<MainContent>
 			<UserInfo />
-      <SyncButton />
+			{!user?.lastSyncAt && <SyncButton />}
-      <PartyQr />
+			{user && <PartyQr />}
 		</MainContent>
 	);
 }