dhkatzandClaude Opus 5.5
64c552330b
apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
"use client";
|
|
// Forms that run a server action and show its answer, with buttons that show when they're working.
|
|
import { useActionState } from "react";
|
|
import { useFormStatus } from "react-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { ActionState } from "@/lib/actions";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Action = (state: ActionState, form: FormData) => Promise<ActionState>;
|
|
|
|
export function ActionForm({
|
|
action,
|
|
fields = {},
|
|
className,
|
|
children,
|
|
}: {
|
|
action: Action;
|
|
/** Hidden fields sent with the form. */
|
|
fields?: Record<string, string | number>;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [state, formAction] = useActionState(action, null);
|
|
return (
|
|
<form action={formAction} className={cn("space-y-3", className)}>
|
|
{Object.entries(fields).map(([name, value]) => (
|
|
<input key={name} type="hidden" name={name} value={value} />
|
|
))}
|
|
{children}
|
|
<FormMessage state={state} />
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export function FormMessage({ state }: { state: ActionState }) {
|
|
if (state?.error) return <ErrorText>{state.error}</ErrorText>;
|
|
if (state?.notice)
|
|
return (
|
|
<p role="status" className="text-sm text-muted-foreground">
|
|
{state.notice}
|
|
</p>
|
|
);
|
|
return null;
|
|
}
|
|
|
|
export function ErrorText({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<p role="alert" className="text-sm text-red-700 dark:text-red-400">
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* A submit button that shows pending while its form is being sent. With name and value, it's one of several
|
|
* buttons in the form, and only shows pending when it was the one pressed. With confirm, it asks first.
|
|
*/
|
|
export function SubmitButton({
|
|
name,
|
|
value,
|
|
pendingLabel,
|
|
confirm,
|
|
children,
|
|
...props
|
|
}: Omit<React.ComponentProps<typeof Button>, "type" | "name" | "value" | "onClick"> & {
|
|
name?: string;
|
|
value?: string;
|
|
pendingLabel?: string;
|
|
confirm?: string;
|
|
}) {
|
|
const status = useFormStatus();
|
|
const mine = status.pending && (name === undefined || status.data?.get(name) === value);
|
|
return (
|
|
<Button
|
|
type="submit"
|
|
name={name}
|
|
value={value}
|
|
disabled={status.pending}
|
|
onClick={(e) => {
|
|
if (confirm && !window.confirm(confirm)) e.preventDefault();
|
|
}}
|
|
{...props}
|
|
>
|
|
{mine ? (pendingLabel ?? children) : children}
|
|
</Button>
|
|
);
|
|
}
|