feat: update board name

src/app/boards/[...id]/page.tsx

@@ -10,6 +10,7 @@ import {
   type DropResult,
   Draggable,
 } from "react-beautiful-dnd";
+import { useFormik } from "formik";
 
 import { api } from "~/trpc/react";
 import { useBoard } from "~/app/providers/board";
@@ -29,6 +30,11 @@ interface Card {
   title: string;
 }
 
+interface FormValues {
+  boardId: string;
+  name: string;
+}
+
 type PublicListId = string;
 
 export default function BoardPage() {
@@ -38,7 +44,23 @@ export default function BoardPage() {
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
 
-  const boardId = params?.id?.length && params.id[0];
+  const boardId = params?.id?.length ? params.id[0] : null;
+
+  const updateBoard = api.board.update.useMutation();
+
+  const formik = useFormik({
+    initialValues: {
+      boardId: boardId ?? "",
+      name: boardData?.name ? boardData.name : "",
+    },
+    onSubmit: (values: FormValues) => {
+      updateBoard.mutate({
+        boardId: values.boardId,
+        name: values.name,
+      });
+    },
+    enableReinitialize: true,
+  });
 
   if (!boardId) return <></>;
 
@@ -113,9 +135,20 @@ export default function BoardPage() {
   return (
     <div>
       <div className="mb-8 flex w-full justify-between">
-        <h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
+        <form
-          {boardData?.name}
+          onSubmit={formik.handleSubmit}
-        </h1>
+          className="focus-visible:outline-none"
+        >
+          <input
+            type="name"
+            id="name"
+            name="name"
+            value={formik.values.name}
+            onChange={formik.handleChange}
+            onBlur={formik.submitForm}
+            className="block border-0 bg-transparent p-0 py-1.5 font-medium tracking-tight text-dark-1000 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem] sm:leading-6"
+          />
+        </form>
         <div>
           <button
             type="button"

src/server/api/routers/board.ts

@@ -74,4 +74,17 @@ export const boardRouter = createTRPCRouter({
         createdBy: userId,
       });
     }),
+    update: publicProcedure
+      .input(
+        z.object({ 
+          boardId: z.string().min(12),
+          name: z.string().min(1),
+        }))
+      .mutation(({ ctx, input }) => {
+        const userId = ctx.session?.user.id;
+
+        if (!userId) return;
+
+        return ctx.db.update(boards).set({ name: input.name }).where(eq(boards.publicId, input.boardId));
+      }),
 });

src/server/api/routers/card.ts

@@ -52,26 +52,26 @@ export const cardRouter = createTRPCRouter({
       })
     }),
     byId: publicProcedure
-    .input(z.object({ id: z.string().min(12) }))
+      .input(z.object({ id: z.string().min(12) }))
-    .query(({ ctx, input }) => 
+      .query(({ ctx, input }) => 
-      ctx.db.query.cards.findFirst({
+        ctx.db.query.cards.findFirst({
-        where: eq(cards.publicId, input.id),
+          where: eq(cards.publicId, input.id),
-      })
+        })
-    ),
+      ),
     update: publicProcedure
-    .input(
+      .input(
-      z.object({ 
+        z.object({ 
-        cardId: z.string().min(12),
+          cardId: z.string().min(12),
-        title: z.string().min(1),
+          title: z.string().min(1),
-        description: z.string(),
+          description: z.string(),
-      }))
+        }))
-    .mutation(({ ctx, input }) => {
+      .mutation(({ ctx, input }) => {
-      const userId = ctx.session?.user.id;
+        const userId = ctx.session?.user.id;
 
-      if (!userId) return;
+        if (!userId) return;
 
-      return ctx.db.update(cards).set({ title: input.title, description: input.description }).where(eq(cards.publicId, input.cardId));
+        return ctx.db.update(cards).set({ title: input.title, description: input.description }).where(eq(cards.publicId, input.cardId));
-    }),
+      }),
     reorder: publicProcedure
       .input(
         z.object({