feat: create new cards

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { api } from "~/trpc/react";
+
+import { HiXMark } from "react-icons/hi2";
+
+import { useBoard } from "~/app/providers/board";
+import { useModal } from "~/app/providers/modal";
+
+import { Formik, Form, Field } from "formik";
+
+interface FormValues {
+  title: string;
+}
+
+interface listPublicId {
+  listPublicId: string;
+}
+
+export function NewCardForm({ listPublicId }: listPublicId) {
+  const utils = api.useUtils();
+  const { boardData } = useBoard();
+  const { closeModal } = useModal();
+
+  const refetchBoard = () =>
+    utils.board.byId.refetch({ id: boardData.publicId });
+
+  const createCard = api.card.create.useMutation({
+    onSuccess: async () => {
+      try {
+        await refetchBoard();
+        closeModal();
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  });
+
+  return (
+    <>
+      <div className="flex w-full justify-between pb-4">
+        <h2 className="text-sm font-medium text-dark-1000">New card</h2>
+        <button
+          className="rounded p-1 hover:bg-dark-300"
+          onClick={() => closeModal()}
+        >
+          <HiXMark size={18} className="text-dark-900" />
+        </button>
+      </div>
+
+      <Formik
+        initialValues={{
+          title: "",
+        }}
+        onSubmit={(values: FormValues) => {
+          createCard.mutate({
+            title: values.title,
+            listPublicId,
+          });
+        }}
+      >
+        <Form>
+          <label
+            htmlFor="title"
+            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+          >
+            Title
+          </label>
+          <Field
+            id="title"
+            name="title"
+            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+          />
+          <div className="mt-5 sm:mt-6">
+            <button
+              type="submit"
+              className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+            >
+              Create card
+            </button>
+          </div>
+        </Form>
+      </Formik>
+    </>
+  );
+}

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+
 import { useParams } from "next/navigation";
 import { HiOutlinePlusSmall } from "react-icons/hi2";
 import {
@@ -11,6 +13,10 @@ import {
 
 import { api } from "~/trpc/react";
 import { useBoard } from "~/app/providers/board";
+import { useModal } from "~/app/providers/modal";
+
+import Modal from "~/app/_components/modal";
+import { NewCardForm } from "~/app/boards/[...id]/create";
 
 interface List {
   publicId: string;
@@ -23,9 +29,14 @@ interface Card {
   title: string;
 }
 
+type PublicListId = string;
+
 export default function BoardPage() {
   const params = useParams();
   const { boardData, setBoardData, updateCard, updateList } = useBoard();
+  const { openModal } = useModal();
+  const [selectedPublicListId, setSelectedPublicListId] =
+    useState<PublicListId>("");
 
   const boardId = params?.id?.length && params.id[0];
 
@@ -40,6 +51,11 @@ export default function BoardPage() {
     },
   );
 
+  const openNewCardForm = (publicListId: PublicListId) => {
+    openModal();
+    setSelectedPublicListId(publicListId);
+  };
+
   const onDragEnd = ({
     source,
     destination,
@@ -134,18 +150,29 @@ export default function BoardPage() {
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
-                      className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-4"
+                      className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-2"
                     >
+                      <div className="flex justify-between">
+                        <p className="mb-4 px-4 pt-1 text-sm font-medium text-dark-1000">
+                          {list.name}
+                        </p>
+                        <button
+                          className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400"
+                          onClick={() => openNewCardForm(list.publicId)}
+                        >
+                          <HiOutlinePlusSmall
+                            className="h-5 w-5 text-dark-900"
+                            aria-hidden="true"
+                          />
+                        </button>
+                      </div>
                       <Droppable droppableId={`${list.publicId}`} type="CARD">
                         {(provided) => (
                           <div
                             ref={provided.innerRef}
                             {...provided.droppableProps}
+                            className="h-full"
                           >
-                            <p className="mb-4 px-4 text-sm font-medium text-dark-1000">
-                              {list.name}
-                            </p>
-
                             {list.cards?.map((card, index) => (
                               <Draggable
                                 key={card.publicId}
@@ -180,6 +207,9 @@ export default function BoardPage() {
           )}
         </Droppable>
       </DragDropContext>
+      <Modal>
+        <NewCardForm listPublicId={selectedPublicListId} />
+      </Modal>
     </div>
   );
 }

src/server/api/routers/card.ts

@@ -1,7 +1,8 @@
 import { z } from "zod";
-import { eq, sql } from "drizzle-orm";
+import { desc, eq, sql } from "drizzle-orm";
 
 import { cards, lists } from "~/server/db/schema";
+import { generateUID } from "~/utils/generateUID";
 
 import {
   createTRPCRouter,
@@ -9,6 +10,47 @@ import {
 } from "~/server/api/trpc";
 
 export const cardRouter = createTRPCRouter({
+  create: publicProcedure
+    .input(
+      z.object({
+        title: z.string().min(1),
+        listPublicId: z.string().min(12),
+      }),
+    )
+    .mutation(({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+
+      if (!userId) return;
+
+      
+
+      return ctx.db.transaction(async (tx) => {
+        const list = await tx.query.lists.findFirst({
+          where: eq(lists.publicId, input.listPublicId),
+          columns: {
+            id: true
+          }
+        });
+
+        if (!list) return;
+
+        const latestCard = await tx.query.cards.findFirst({
+          where: eq(cards.listId, list.id),
+          columns: {
+            index: true
+          },
+          orderBy: desc(cards.index)
+        });
+
+        return tx.insert(cards).values({
+          publicId: generateUID(),
+          title: input.title,
+          createdBy: userId,
+          listId: list.id,
+          index: latestCard ? latestCard.index + 1 : 0
+        });
+      })
+    }),
   update: publicProcedure
   .input(
     z.object({