dan/itpdp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

disable syncing once synced

Browse source
This commit is contained in:
Daniel Bulant 2026-05-01 18:40:36 +02:00
parent a1beff806b
commit 5c2d2c8cf0
No known key found for this signature in database
3 changed files with 60 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
web/src/components/sync-button.tsx
View file

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

26
web/src/hooks/user.ts
View file

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

20
web/src/routes/index.tsx
View file

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