feat(template): view created template

backend/controllers/template/template.go

@@ -5,6 +5,8 @@ import (
 	"backend/utils/jwt"
 	res "backend/utils/responses"
 	"net/http"
+	"strconv"
+	"time"
 
 	"github.com/gin-gonic/gin"
 	"github.com/go-playground/validator/v10"
@@ -60,6 +62,13 @@ func Create(c *gin.Context) {
 	res.Success(c, gin.H{"message": "Successfully created template"})
 }
 
+type TemplatePreview struct {
+	Id        int       `json:"id"`
+	Name      string    `json:"name"`
+	UserID    int       `json:"user_id"`
+	CreatedAt time.Time `json:"created_at"`
+}
+
 func Get(c *gin.Context) {
 	// Get user from context
 	user, err := jwt.GetUser(c)
@@ -75,7 +84,44 @@ func Get(c *gin.Context) {
 		return
 	}
 
-	res.Success(c, templates)
+	templatePreview := make([]TemplatePreview, len(templates))
+	for i, t := range templates {
+		templatePreview[i] = TemplatePreview{
+			Id:        t.ID,
+			Name:      t.Name,
+			UserID:    t.UserID,
+			CreatedAt: t.CreatedAt,
+		}
+	}
+
+	res.Success(c, templatePreview)
+}
+
+func GetID(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	user, err := jwt.GetUser(c)
+	if err != nil {
+		res.NeedsToLogin(c)
+		return
+	}
+
+	templates, err := template.Get("id = $1 AND user_id = $2", id, user.Id)
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	if len(templates) == 0 {
+		res.Error(c, "Template not found", http.StatusNotFound)
+		return
+	}
+
+	res.Success(c, gin.H{"template": templates[0]})
 }
 
 func Update(c *gin.Context) {

backend/routes/routes.go

@@ -26,6 +26,7 @@ func SetupRoutes() *gin.Engine {
 	// Template routes (REST FUCKING GOOOOO)
 	templates := auth.Group("/templates")
 	templates.GET("", template.Get)
+	templates.GET(":id", template.GetID)
 	templates.POST("", template.Create)
 	// PUT (Edit)
 	// DELETE (Delete)

frontend/src/components/Template.tsx

@@ -1,23 +1,13 @@
-import { withForm } from "@/hooks/formHook";
+import type { TemplatePreview } from "@/types/api";
+import { Link } from "@tanstack/react-router";
 
-const Template = withForm({
+export default function Template({ template }: { template: TemplatePreview }) {
-    defaultValues: {
+    return (
-        name: "",
+        <Link to={"/templates/$templateId"} params={{ templateId: template.id.toString() }}>
-        template: "",
+            <div className="p-4 border rounded-lg hover:bg-muted/40">
-    },
+                <h2 className="text-xl font-semibold">{template.name}</h2>
-    props: {},
-    render({ form }) {
-        return (
-            <div className="mt-4 flex flex-col gap-4">
-                <form.AppField
-                    name="name"
-                    children={(f) => <f.TextField maxLength={50} label="Name" placeholder="Template name" />}
-                />
-
-                <form.AppField name="template" children={(f) => <f.RichTextEdit />} />
             </div>
-        );
+        </Link>
-    },
+    );
-});
+}
 
-export default Template;

frontend/src/routeTree.gen.ts

@@ -14,8 +14,10 @@ import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TemplatesIndexRouteImport } from './routes/templates/index'
 import { Route as TemplatesCreateRouteImport } from './routes/templates/create'
+import { Route as TemplatesTemplateIdRouteImport } from './routes/templates/$templateId'
 import { Route as CoverCreateRouteImport } from './routes/cover/create'
 import { Route as CoverCoverIdRouteImport } from './routes/cover/$coverId'
+import { Route as TemplatesEditTemplateIdRouteImport } from './routes/templates/edit.$templateId'
 import { Route as CoverEditCoverIdRouteImport } from './routes/cover/edit.$coverId'
 
 const RegisterRoute = RegisterRouteImport.update({
@@ -43,6 +45,11 @@ const TemplatesCreateRoute = TemplatesCreateRouteImport.update({
   path: '/templates/create',
   getParentRoute: () => rootRouteImport,
 } as any)
+const TemplatesTemplateIdRoute = TemplatesTemplateIdRouteImport.update({
+  id: '/templates/$templateId',
+  path: '/templates/$templateId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CoverCreateRoute = CoverCreateRouteImport.update({
   id: '/cover/create',
   path: '/cover/create',
@@ -53,6 +60,11 @@ const CoverCoverIdRoute = CoverCoverIdRouteImport.update({
   path: '/cover/$coverId',
   getParentRoute: () => rootRouteImport,
 } as any)
+const TemplatesEditTemplateIdRoute = TemplatesEditTemplateIdRouteImport.update({
+  id: '/templates/edit/$templateId',
+  path: '/templates/edit/$templateId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CoverEditCoverIdRoute = CoverEditCoverIdRouteImport.update({
   id: '/cover/edit/$coverId',
   path: '/cover/edit/$coverId',
@@ -65,9 +77,11 @@ export interface FileRoutesByFullPath {
   '/register': typeof RegisterRoute
   '/cover/$coverId': typeof CoverCoverIdRoute
   '/cover/create': typeof CoverCreateRoute
+  '/templates/$templateId': typeof TemplatesTemplateIdRoute
   '/templates/create': typeof TemplatesCreateRoute
   '/templates': typeof TemplatesIndexRoute
   '/cover/edit/$coverId': typeof CoverEditCoverIdRoute
+  '/templates/edit/$templateId': typeof TemplatesEditTemplateIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -75,9 +89,11 @@ export interface FileRoutesByTo {
   '/register': typeof RegisterRoute
   '/cover/$coverId': typeof CoverCoverIdRoute
   '/cover/create': typeof CoverCreateRoute
+  '/templates/$templateId': typeof TemplatesTemplateIdRoute
   '/templates/create': typeof TemplatesCreateRoute
   '/templates': typeof TemplatesIndexRoute
   '/cover/edit/$coverId': typeof CoverEditCoverIdRoute
+  '/templates/edit/$templateId': typeof TemplatesEditTemplateIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -86,9 +102,11 @@ export interface FileRoutesById {
   '/register': typeof RegisterRoute
   '/cover/$coverId': typeof CoverCoverIdRoute
   '/cover/create': typeof CoverCreateRoute
+  '/templates/$templateId': typeof TemplatesTemplateIdRoute
   '/templates/create': typeof TemplatesCreateRoute
   '/templates/': typeof TemplatesIndexRoute
   '/cover/edit/$coverId': typeof CoverEditCoverIdRoute
+  '/templates/edit/$templateId': typeof TemplatesEditTemplateIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -98,9 +116,11 @@ export interface FileRouteTypes {
     | '/register'
     | '/cover/$coverId'
     | '/cover/create'
+    | '/templates/$templateId'
     | '/templates/create'
     | '/templates'
     | '/cover/edit/$coverId'
+    | '/templates/edit/$templateId'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -108,9 +128,11 @@ export interface FileRouteTypes {
     | '/register'
     | '/cover/$coverId'
     | '/cover/create'
+    | '/templates/$templateId'
     | '/templates/create'
     | '/templates'
     | '/cover/edit/$coverId'
+    | '/templates/edit/$templateId'
   id:
     | '__root__'
     | '/'
@@ -118,9 +140,11 @@ export interface FileRouteTypes {
     | '/register'
     | '/cover/$coverId'
     | '/cover/create'
+    | '/templates/$templateId'
     | '/templates/create'
     | '/templates/'
     | '/cover/edit/$coverId'
+    | '/templates/edit/$templateId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -129,9 +153,11 @@ export interface RootRouteChildren {
   RegisterRoute: typeof RegisterRoute
   CoverCoverIdRoute: typeof CoverCoverIdRoute
   CoverCreateRoute: typeof CoverCreateRoute
+  TemplatesTemplateIdRoute: typeof TemplatesTemplateIdRoute
   TemplatesCreateRoute: typeof TemplatesCreateRoute
   TemplatesIndexRoute: typeof TemplatesIndexRoute
   CoverEditCoverIdRoute: typeof CoverEditCoverIdRoute
+  TemplatesEditTemplateIdRoute: typeof TemplatesEditTemplateIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -171,6 +197,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TemplatesCreateRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/templates/$templateId': {
+      id: '/templates/$templateId'
+      path: '/templates/$templateId'
+      fullPath: '/templates/$templateId'
+      preLoaderRoute: typeof TemplatesTemplateIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/cover/create': {
       id: '/cover/create'
       path: '/cover/create'
@@ -185,6 +218,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CoverCoverIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/templates/edit/$templateId': {
+      id: '/templates/edit/$templateId'
+      path: '/templates/edit/$templateId'
+      fullPath: '/templates/edit/$templateId'
+      preLoaderRoute: typeof TemplatesEditTemplateIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/cover/edit/$coverId': {
       id: '/cover/edit/$coverId'
       path: '/cover/edit/$coverId'
@@ -201,9 +241,11 @@ const rootRouteChildren: RootRouteChildren = {
   RegisterRoute: RegisterRoute,
   CoverCoverIdRoute: CoverCoverIdRoute,
   CoverCreateRoute: CoverCreateRoute,
+  TemplatesTemplateIdRoute: TemplatesTemplateIdRoute,
   TemplatesCreateRoute: TemplatesCreateRoute,
   TemplatesIndexRoute: TemplatesIndexRoute,
   CoverEditCoverIdRoute: CoverEditCoverIdRoute,
+  TemplatesEditTemplateIdRoute: TemplatesEditTemplateIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

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) => (
+                    : templates.data?.map((template, i) => <Template template={template} key={i} />)}
-                          <div className="flex gap-2 items-center" key={i}>
-                              <p className="text-lg">{template.name}</p>
-                          </div>
-                      ))}
             </div>
         </Authorised>
     );

frontend/src/types/api.ts

@@ -20,14 +20,17 @@ export interface TokenUserInfo {
 }
 
 // -------- Templates --------
-export interface Template {
+export interface TemplatePreview {
     id: number;
-    user_id: number;
     name: string;
-    template: string;
+    user_id: number;
     created_at: string;
 }
 
+export interface Template extends TemplatePreview {
+    template: string;
+}
+
 // -------- Cover letters --------
 export interface CoverLetterPreview {
     id: number;