Connect forms and lists

// features/todos/components/todo-create-form.tsx
"use client";

import { rootFormError } from "@beignet/react-hook-form";
import { useMutation } from "@tanstack/react-query";
import { useId } from "react";
import { rq } from "@/client";
import { rhf } from "@/client/forms";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { createTodo, listTodos } from "../contracts";

export function TodoCreateForm({ onCreated }: { onCreated: () => void }) {
	const titleId = useId();
	const form = rhf(createTodo).useForm({ defaultValues: { title: "" } });
	const create = useMutation(
		rq(createTodo).mutationOptions({
			invalidates: () => [rq(listTodos).contractFilter()],
			onSuccess: () => {
				form.reset();
				onCreated();
			},
			onError: (error) =>
				form.setError(
					"root",
					rootFormError(error, "Could not create the todo."),
				),
		}),
	);

	return (
		<form
			aria-label="Create todo"
			className="space-y-3"
			onSubmit={form.handleSubmit((body) => {
				if (create.isPending) return;
				form.clearErrors("root");
				create.mutate({ body });
			})}
		>
			<Label htmlFor={titleId}>New todo</Label>
			<Input
				id={titleId}
				{...form.register("title")}
				readOnly={create.isPending}
				aria-invalid={!!form.formState.errors.title}
				aria-describedby={
					form.formState.errors.title ? `${titleId}-error` : undefined
				}
			/>
			{form.formState.errors.title && (
				<p id={`${titleId}-error`} role="alert">
					{form.formState.errors.title.message}
				</p>
			)}
			{form.formState.errors.root && (
				<p role="alert">{form.formState.errors.root.message}</p>
			)}
			<Button type="submit" disabled={create.isPending}>
				{create.isPending ? "Creating…" : "Create todo"}
			</Button>
		</form>
	);
}

// features/todos/components/todo-completion-form.tsx
"use client";

import { rootFormError } from "@beignet/react-hook-form";
import { useMutation } from "@tanstack/react-query";
import { useId } from "react";
import { rq } from "@/client";
import { rhf } from "@/client/forms";
import { Button } from "@/components/ui/button";
import { listTodos, updateTodo } from "../contracts";
import type { Todo } from "../schemas";

export function TodoCompletionForm({ todo }: { todo: Todo }) {
	const completedId = useId();
	const form = rhf(updateTodo).useForm({
		values: { completed: todo.completed },
		resetOptions: { keepDirtyValues: true },
	});
	const update = useMutation(
		rq(updateTodo).mutationOptions({
			invalidates: () => [rq(listTodos).contractFilter()],
			onSuccess: (saved) => form.reset({ completed: saved.completed }),
			onError: (error) =>
				form.setError("root", rootFormError(error, "Could not save the todo.")),
		}),
	);

	return (
		<form
			aria-label={`Update ${todo.title}`}
			className="space-y-3"
			onSubmit={form.handleSubmit((body) => {
				if (update.isPending) return;
				form.clearErrors("root");
				update.mutate({ path: { id: todo.id }, body });
			})}
		>
			<h3 className="font-medium break-words">{todo.title}</h3>
			<div className="flex flex-wrap items-center gap-3">
				<input
					id={completedId}
					type="checkbox"
					{...form.register("completed")}
					disabled={update.isPending}
				/>
				<label htmlFor={completedId}>Completed</label>
				<Button type="submit" size="sm" disabled={update.isPending}>
					{update.isPending ? "Saving…" : "Save"}
				</Button>
			</div>
			{form.formState.errors.root && (
				<p role="alert">{form.formState.errors.root.message}</p>
			)}
		</form>
	);
}

// features/todos/components/todo-workbench.tsx
"use client";

import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { rq } from "@/client";
import { Button } from "@/components/ui/button";
import { listTodos } from "../contracts";
import { TodoCompletionForm } from "./todo-completion-form";
import { TodoCreateForm } from "./todo-create-form";

const pageSize = 5;

export function TodoWorkbench() {
	const [offset, setOffset] = useState(0);
	const todos = useQuery(
		rq(listTodos).queryOptions({ query: { limit: pageSize, offset } }),
	);

	return (
		<div className="max-w-2xl space-y-8">
			<TodoCreateForm onCreated={() => setOffset(0)} />
			<section aria-label="Your todos" className="space-y-4">
				<h2 className="text-lg font-semibold">Your todos</h2>
				{todos.isPending && <p role="status">Loading todos…</p>}
				{todos.isError && (
					<div role="alert" className="space-y-2">
						<p>
							{todos.data
								? "Could not refresh todos. Your last successful change may not be shown."
								: "Could not load todos. Check your connection and sign-in."}
						</p>
						<Button
							type="button"
							variant="outline"
							disabled={todos.isFetching}
							onClick={() => void todos.refetch()}
						>
							Try again
						</Button>
					</div>
				)}
				{todos.data && (
					<>
						{todos.data.items.length === 0 ? (
							<p>
								{offset === 0
									? "No todos yet. Create your first one above."
									: "No todos on this page. Go back to the previous page."}
							</p>
						) : (
							<ul className="divide-y rounded-lg border">
								{todos.data.items.map((todo) => (
									<li key={todo.id} className="p-4">
										<TodoCompletionForm todo={todo} />
									</li>
								))}
							</ul>
						)}
						{todos.isFetching && <p role="status">Refreshing todos…</p>}
					</>
				)}
				<nav
					aria-label="Todo pages"
					className="flex flex-wrap items-center gap-3"
				>
					<Button
						type="button"
						variant="outline"
						disabled={offset === 0 || todos.isFetching}
						onClick={() => setOffset((value) => Math.max(0, value - pageSize))}
					>
						Previous
					</Button>
					<span>Page {offset / pageSize + 1}</span>
					<Button
						type="button"
						variant="outline"
						disabled={
							!todos.data?.page.hasMore || todos.isFetching || todos.isError
						}
						onClick={() => setOffset((value) => value + pageSize)}
					>
						Next
					</Button>
				</nav>
			</section>
		</div>
	);
}

// app/(app)/todo-workbench/page.tsx
import { TodoWorkbench } from "@/features/todos/components/todo-workbench";

export default function TodoWorkbenchPage() {
	return (
		<div className="space-y-6">
			<h1 className="text-2xl font-semibold">Todo workbench</h1>
			<TodoWorkbench />
		</div>
	);
}

bun run format
bun beignet db migrate
bun beignet check
bun run dev