feat: delete boards

src/app/boards/[...id]/components/BoardDropdown.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { HiEllipsisHorizontal } from "react-icons/hi2";
+import { useModal } from "~/app/providers/modal";
+
+export default function BoardDropdown() {
+  const { openModal } = useModal();
+
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-dark-200">
+          <HiEllipsisHorizontal size={25} className="text-dark-900" />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="flex">
+            <Menu.Item>
+              {() => (
+                <button
+                  onClick={() => openModal("DELETE_BOARD")}
+                  className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                >
+                  Delete board
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

src/app/boards/[...id]/components/DeleteBoardConfirmation.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { api } from "~/trpc/react";
+import { useBoard } from "~/app/providers/board";
+import { useModal } from "~/app/providers/modal";
+
+export function DeleteBoardConfirmation() {
+  const router = useRouter();
+  const { boardData } = useBoard();
+  const { closeModal } = useModal();
+
+  const deleteBoard = api.board.delete.useMutation({
+    onSuccess: () => {
+      closeModal();
+      router.push(`/boards`);
+    },
+  });
+
+  return (
+    <>
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-dark-1000">
+          Are you sure you want to delete this board?
+        </h2>
+        <p className="text-sm font-medium text-dark-900">
+          {"This action can't be undone."}
+        </p>
+      </div>
+      <div className="mt-5 flex justify-end sm:mt-6">
+        <button
+          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-dark-600 bg-dark-300 px-3 py-2 text-sm font-semibold text-dark-1000 shadow-sm focus-visible:outline-none"
+          onClick={() => closeModal()}
+        >
+          Cancel
+        </button>
+        <button
+          onClick={() =>
+            deleteBoard.mutate({
+              boardPublicId: boardData.publicId,
+            })
+          }
+          className="inline-flex justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+        >
+          Delete
+        </button>
+      </div>
+    </>
+  );
+}

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

@@ -18,10 +18,12 @@ import { useModal } from "~/app/providers/modal";
 
 import Modal from "~/app/_components/modal";
 
-import { DeleteListConfirmation } from "./DeleteListConfirmation";
-import ListDropdown from "./ListDropdown";
-import { NewCardForm } from "./NewCardForm";
-import { NewListForm } from "./NewListForm";
+import BoardDropdown from "./components/BoardDropdown";
+import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
+import { DeleteListConfirmation } from "./components/DeleteListConfirmation";
+import ListDropdown from "./components/ListDropdown";
+import { NewCardForm } from "./components/NewCardForm";
+import { NewListForm } from "./components/NewListForm";
 
 interface List {
   publicId: string;
@@ -169,10 +171,10 @@ export default function BoardPage() {
             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>
+        <div className="flex items-center">
           <button
             type="button"
-            className="inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="mr-2 inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
             onClick={() => openNewListForm(boardId)}
           >
             <HiOutlinePlusSmall
@@ -181,6 +183,7 @@ export default function BoardPage() {
             />
             New list
           </button>
+          <BoardDropdown />
         </div>
       </div>
 
@@ -292,6 +295,7 @@ export default function BoardPage() {
         </DragDropContext>
       </div>
       <Modal>
+        {modalContentType === "DELETE_BOARD" && <DeleteBoardConfirmation />}
         {modalContentType === "DELETE_LIST" && (
           <DeleteListConfirmation listPublicId={selectedPublicListId} />
         )}

src/app/boards/components/BoardsList.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { api } from "~/trpc/react";
 
-export function Boards() {
+export function BoardsList() {
   const { data } = api.board.all.useQuery();
 
   if (data?.length === 0) return <></>;

src/app/boards/components/NewBoardForm.tsx

@@ -13,11 +13,15 @@ interface FormValues {
 }
 
 export function NewBoardForm() {
+  const utils = api.useUtils();
   const { closeModal } = useModal();
 
+  const refetchBoards = () => utils.board.all.refetch();
+
   const createBoard = api.board.create.useMutation({
-    onSuccess() {
+    onSuccess: async () => {
       closeModal();
+      await refetchBoards();
     },
   });
 

src/app/boards/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { HiOutlinePlusSmall } from "react-icons/hi2";
-import { Boards } from "./boards";
+import { BoardsList } from "./components/BoardsList";
 
 import { useModal } from "~/app/providers/modal";
 import Modal from "~/app/_components/modal";
 
-import { NewBoardForm } from "~/app/boards/create";
+import { NewBoardForm } from "~/app/boards/components/NewBoardForm";
 
 export default function BoardsPage() {
   const { openModal } = useModal();
@@ -37,7 +37,7 @@ export default function BoardsPage() {
       </Modal>
 
       <div className="flex flex-row">
-        <Boards />
+        <BoardsList />
       </div>
     </div>
   );