feat(template): view created template

frontend/src/routes/templates/$templateId.tsx

@@ -0,0 +1,79 @@
+import renderQueryState from "@/components/RenderQueryState";
+import Authorised from "@/layouts/Authorised";
+import requests from "@/lib/requests";
+import type { Template } from "@/types/api";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import "../../editor.css";
+import { Button } from "@/components/ui/button";
+import { EditIcon, Trash2 } from "lucide-react";
+
+export const Route = createFileRoute("/templates/$templateId")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    const { templateId } = Route.useParams();
+    const navigate = useNavigate();
+
+    const template = useQuery({
+        queryKey: ["template", templateId],
+        queryFn: () => requests.get<{ template: Template }>(`/templates/${templateId}`, {}),
+    });
+    const templateState = renderQueryState({
+        query: template,
+        noFound: "template",
+        skeleton: {
+            count: 1,
+            className: "h-[400px]",
+        },
+    });
+
+    const handleDelete = async () => {
+        const a = confirm("Are you sure?");
+        if (!a) return;
+
+        requests.delete(`/template/${templateId}`, {
+            success() {
+                navigate({ to: "/" });
+            },
+        });
+    };
+
+    return (
+        <Authorised>
+            <div className="flex items-center gap-4 mb-8 md:justify-between">
+                <h1 className="text-2xl font-semibold">{template.data?.template.name || "Loading..."}</h1>
+
+                <div className="space-x-2">
+                    <Button
+                        className="hover:bg-danger hover:text-background"
+                        variant="ghost"
+                        onClick={handleDelete}
+                    >
+                        <Trash2 />
+                    </Button>
+                    <Link
+                        to={"/templates/edit/$templateId"}
+                        params={{ templateId: template.data?.template.id.toString() || "" }}
+                    >
+                        <Button variant="outline">
+                            <EditIcon />
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+            <div className="bg-background p-4 border">
+                {templateState !== null ? (
+                    templateState
+                ) : (
+                    <div
+                        className="tiptap"
+                        dangerouslySetInnerHTML={{ __html: template.data?.template.template || "" }}
+                    />
+                )}
+            </div>
+        </Authorised>
+    );
+}

frontend/src/routes/templates/edit.$templateId.tsx

@@ -0,0 +1,85 @@
+import renderQueryState from "@/components/RenderQueryState";
+import { Button } from "@/components/ui/button";
+import { useAppForm } from "@/hooks/formHook";
+import Authorised from "@/layouts/Authorised";
+import requests from "@/lib/requests";
+import type { Template } from "@/types/api";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { z } from "zod/v4";
+
+export const Route = createFileRoute("/templates/edit/$templateId")({
+    component: RouteComponent,
+});
+
+const editSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    content: z.string().min(50, "Template is too short"),
+});
+
+function RouteComponent() {
+    const { templateId } = Route.useParams();
+    const navigate = useNavigate();
+    const loading = useState(false);
+
+    const template = useQuery({
+        queryKey: ["template", templateId],
+        queryFn: () => requests.get<{ template: Template }>(`/template/${templateId}`, {}),
+    });
+    const templateState = renderQueryState({
+        query: template,
+        noFound: "template",
+        skeleton: {
+            count: 1,
+            className: "h-[400px]",
+        },
+    });
+
+    const edit = useAppForm({
+        defaultValues: {
+            name: template.data?.template.name || "",
+            content: template.data?.template.content || null,
+        },
+        validators: {
+            onBlur: editSchema,
+        },
+        onSubmit({ value }) {
+            requests.put(`/template/${templateId}`, {
+                data: value,
+                before() {
+                    loading[1](true);
+                },
+                finally() {
+                    loading[1](false);
+                },
+                success() {
+                    navigate({ to: "/templates/$templateId", params: { templateId: templateId } });
+                },
+            });
+        },
+    });
+
+    return (
+        <Authorised>
+            <h1 className="text-2xl font-bold text-primary">Edit template</h1>
+
+            <div className="mt-4 space-y-4">
+                <edit.AppField
+                    name="name"
+                    children={(f) => <f.TextField label="Name" placeholder="Your template name" />}
+                />
+
+                {templateState !== null ? (
+                    templateState
+                ) : (
+                    <edit.AppField name="content" children={(f) => <f.RichTextEdit />} />
+                )}
+            </div>
+
+            <Button className="mt-4" onClick={edit.handleSubmit}>
+                Save
+            </Button>
+        </Authorised>
+    );
+}

frontend/src/routes/templates/index.tsx

@@ -4,8 +4,9 @@ import requests from "@/lib/requests";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
-import type { Template } from "@/types/api";
+import type { TemplatePreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
+import Template from "@/components/Template";
 
 export const Route = createFileRoute("/templates/")({
     component: RouteComponent,
@@ -14,7 +15,7 @@ export const Route = createFileRoute("/templates/")({
 function RouteComponent() {
     const templates = useQuery({
         queryKey: ["user_templates"],
-        queryFn: () => requests.get<Template[]>("/templates", {}),
+        queryFn: () => requests.get<TemplatePreview[]>("/templates", {}),
     });
     const templatesState = renderQueryState({
         query: templates,
@@ -33,14 +34,10 @@ function RouteComponent() {
                 </Link>
             </div>
 
-            <div className="flex flex-col gap-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
                 {templatesState !== null
                     ? templatesState
-                    : templates.data?.map((template, i) => (
-                          <div className="flex gap-2 items-center" key={i}>
-                              <p className="text-lg">{template.name}</p>
-                          </div>
-                      ))}
+                    : templates.data?.map((template, i) => <Template template={template} key={i} />)}
             </div>
         </Authorised>
     );