syahdan/minmon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: unnest dashboard detail routes and stabilize form hooks

Browse source
This commit is contained in:
Syahdan 2026-04-29 19:20:27 +07:00
parent 41fff32f60
commit 8e9acd5006
5 changed files with 219 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

122
apps/web/src/routes/dashboard.notes.$noteId.tsx
View file

@ -1,122 +0,0 @@
import { Button } from "@minmon/ui/components/button";
import { useForm } from "@tanstack/react-form";
import { useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { toast } from "sonner";
import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
export const Route = createFileRoute("/dashboard/notes/$noteId")({
component: RouteComponent,
});
type NoteFormValues = {
serverId: string;
title: string;
category: string;
content: string;
};
function RouteComponent() {
const { noteId } = Route.useParams();
const navigate = useNavigate();
const note = useQuery(trpc.notes.byId.queryOptions({ id: noteId }));
const servers = useQuery(trpc.servers.list.queryOptions());
const updateNote = useMutation({
mutationFn: async (values: NoteFormValues) =>
trpcClient.notes.update.mutate({
id: noteId,
serverId: values.serverId,
title: values.title,
category: values.category || null,
content: values.content,
}),
onSuccess: async () => {
toast.success("Note updated");
await queryClient.invalidateQueries();
},
onError: (error) => toast.error(error.message),
});
if (note.isLoading || servers.isLoading) {
return <QueryStateCard title="Loading note" description="Fetching the selected note details." />;
}
if (note.isError || servers.isError || !note.data || !servers.data) {
return <QueryStateCard title="Note unavailable" description="The requested note could not be loaded." />;
}
const defaultValues: NoteFormValues = {
serverId: note.data.serverId,
title: note.data.title,
category: note.data.category ?? "",
content: note.data.content,
};
const form = useForm({
defaultValues,
onSubmit: async ({ value }) => {
await updateNote.mutateAsync(value);
},
});
return (
<div className="grid gap-6">
<PageSection title={note.data.title} description="View and edit this note.">
<DetailCard
title="Note summary"
description="Current note metadata and content preview."
rows={[
{ label: "Server ID", value: note.data.serverId },
{ label: "Category", value: note.data.category || "-" },
{ label: "Updated", value: new Date(note.data.updatedAt).toLocaleString() },
{ label: "Content", value: note.data.content },
]}
/>
</PageSection>
<form
className="grid gap-4"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<FormCard
title="Edit note"
description="Update note content and category."
footer={
<>
<Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/notes" })}>
Back
</Button>
<form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
{({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
</form.Subscribe>
</>
}
>
<form.Field name="serverId">
{(field) => (
<TextField
label="Server ID"
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
description={`Available: ${servers.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
/>
)}
</form.Field>
<div className="grid gap-4 md:grid-cols-2">
<form.Field name="title">{(field) => <TextField label="Title" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
<form.Field name="category">{(field) => <TextField label="Category" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
</div>
<form.Field name="content">{(field) => <TextAreaField label="Content" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} className="min-h-40" />}</form.Field>
</FormCard>
</form>
</div>
);
}