Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/chrisvander/crate. The future of cloud storage.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113import { QueryClientProvider, useQuery, useQueryClient } from "@tanstack/preact-query"import { useEffect, useState } from "preact/hooks"import { api, getSession, sessionKey } from "../lib/api"import { createQueryClient } from "../lib/query"import { LoginForm } from "./LoginForm"import { Explorer } from "./files/Explorer"import { Navigation } from "./Navigation"import { AccountSettings } from "./AccountSettings"
type Mode = "files" | "login" | "settings"
function Account({ mode }: { mode: Mode }) { const client = useQueryClient() const session = useQuery({ queryKey: sessionKey, queryFn: ({ signal }) => getSession(signal), retry: false, }) const [error, setError] = useState("") const [loggingOut, setLoggingOut] = useState(false) const account = session.data
useEffect(() => { if (account && mode === "login") window.location.replace("/files") }, [account, mode])
const logOut = async () => { setLoggingOut(true) setError("") try { await client.cancelQueries({ queryKey: ["files"] }) const response = await api.POST("/api/v1/logout") if (!response.response.ok && response.response.status !== 401) throw new Error("Logout failed. Please try again.") client.clear() window.location.replace("/login") } catch (error) { setError(error instanceof Error ? error.message : "Logout failed.") setLoggingOut(false) } }
if (session.isPending) return ( <> <Navigation /> <main> <p role="status">Restoring your ATProto session…</p> </main> </> ) if (session.isError) return ( <> <Navigation /> <main className="flex flex-col gap-4"> <h1>Cannot restore your session</h1> <p className="error" role="alert"> {session.error.message} </p> {error && ( <p className="error" role="alert"> {error} </p> )} <button disabled={loggingOut} onClick={() => void session.refetch()}> Try again </button> <button disabled={loggingOut} onClick={() => void logOut()}> Use another account </button> </main> </> ) if (!account) return ( <> <Navigation /> <LoginForm /> </> ) if (mode === "login") return <p role="status">Opening your files…</p>
return ( <> <Navigation authenticated /> {error && ( <p className="error" role="alert"> {error} </p> )} {mode === "settings" ? ( <AccountSettings session={account} pending={loggingOut} onLogout={() => void logOut()} /> ) : loggingOut ? ( <main> <p role="status">Logging out…</p> </main> ) : ( <Explorer key={account.user.did + account.space.uri} session={account} /> )} </> )}
export default function DriveApp({ mode }: { mode: Mode }) { const [client] = useState(createQueryClient) return ( <QueryClientProvider client={client}> <Account mode={mode} /> </QueryClientProvider> )}