59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { loadSession, signOut, type Person } from "@/lib/auth-client";
|
|
import { SignInForm } from "./SignInForm";
|
|
import { Logo } from "./Logo";
|
|
import { Feed } from "./Feed";
|
|
|
|
type State = { kind: "loading" } | { kind: "out" } | { kind: "in"; person: Person };
|
|
|
|
export function App() {
|
|
const [state, setState] = useState<State>({ kind: "loading" });
|
|
const [signingOut, setSigningOut] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let live = true;
|
|
loadSession().then((person) => {
|
|
if (live) setState(person ? { kind: "in", person } : { kind: "out" });
|
|
});
|
|
return () => {
|
|
live = false;
|
|
};
|
|
}, []);
|
|
|
|
async function handleSignOut() {
|
|
if (signingOut) return;
|
|
setSigningOut(true);
|
|
await signOut();
|
|
setSigningOut(false);
|
|
setState({ kind: "out" });
|
|
}
|
|
|
|
if (state.kind === "loading") {
|
|
return (
|
|
<main className="center">
|
|
<p aria-live="polite">Loading...</p>
|
|
</main>
|
|
);
|
|
}
|
|
if (state.kind === "out") {
|
|
return <SignInForm onSignedIn={(person) => setState({ kind: "in", person })} />;
|
|
}
|
|
return (
|
|
<main className="shell">
|
|
<header>
|
|
<Logo size={32} />
|
|
<div>
|
|
<strong>{state.person.name}</strong>
|
|
<span>{state.person.email}</span>
|
|
</div>
|
|
<button type="button" onClick={handleSignOut} disabled={signingOut}>
|
|
{signingOut ? "Signing out..." : "Sign out"}
|
|
</button>
|
|
</header>
|
|
<Feed onSignedOut={() => setState({ kind: "out" })} />
|
|
</main>
|
|
);
|
|
}
|