From 18de6f03d86ab8000cd32595a9de4a4f9d2f48b4 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Tue, 13 Aug 2024 14:53:21 +0100
Subject: [PATCH] feat: create new list immediately adds to the board

---
 src/providers/board.tsx                     |  20 +++
 src/views/board/components/ListDropdown.tsx |   2 +-
 src/views/board/components/NewCardForm.tsx  |   1 -
 src/views/board/components/NewListForm.tsx  | 166 ++++++++++----------
 4 files changed, 108 insertions(+), 81 deletions(-)

diff --git a/src/providers/board.tsx b/src/providers/board.tsx
index 98fcab88..c4772176 100644
--- a/src/providers/board.tsx
+++ b/src/providers/board.tsx
@@ -12,6 +12,7 @@ import { usePopup } from "~/providers/popup";
 import {
   type GetBoardByIdOutput,
   type NewCardInput,
+  type NewListInput,
   type ReorderCardInput,
   type ReorderListInput,
 } from "~/types/router.types";
@@ -22,6 +23,7 @@ interface BoardContextProps {
   updateList: (params: ReorderListInput) => void;
   updateCard: (params: ReorderCardInput) => void;
   addCard: (params: NewCardInput) => void;
+  addList: (params: NewListInput) => void;
   refetchBoard: () => void;
 }
 
@@ -129,6 +131,23 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
     setBoardData({ ...boardData, lists: updatedLists });
   };
 
+  const addList = ({ name, boardPublicId }: NewListInput) => {
+    if (!boardData) return;
+
+    const newList = {
+      publicId: generateUID(),
+      name,
+      boardId: 1,
+      boardPublicId,
+      cards: [],
+      index: boardData.lists.length,
+    };
+
+    const updatedLists = [...boardData.lists, newList];
+
+    setBoardData({ ...boardData, lists: updatedLists });
+  };
+
   const updateList = ({
     boardId,
     listId,
@@ -159,6 +178,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
         updateList,
         updateCard,
         addCard,
+        addList,
         refetchBoard,
       }}
     >
diff --git a/src/views/board/components/ListDropdown.tsx b/src/views/board/components/ListDropdown.tsx
index b62846d5..8114fd7c 100644
--- a/src/views/board/components/ListDropdown.tsx
+++ b/src/views/board/components/ListDropdown.tsx
@@ -39,7 +39,7 @@ export default function ListDropdown({
             <Menu.Item>
               <button
                 onClick={handleOpenDeleteListConfirmation}
-                className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm hover:bg-light-400 dark:hover:bg-dark-400"
+                className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
               >
                 Delete list
               </button>
diff --git a/src/views/board/components/NewCardForm.tsx b/src/views/board/components/NewCardForm.tsx
index 861ce2bd..11fdef58 100644
--- a/src/views/board/components/NewCardForm.tsx
+++ b/src/views/board/components/NewCardForm.tsx
@@ -31,7 +31,6 @@ function classNames(...classes: string[]): string {
 }
 
 export function NewCardForm({ listPublicId }: NewCardFormProps) {
-  const utils = api.useUtils();
   const { boardData, addCard, refetchBoard } = useBoard();
   const { showPopup } = usePopup();
   const { closeModal } = useModal();
diff --git a/src/views/board/components/NewListForm.tsx b/src/views/board/components/NewListForm.tsx
index 5ea3f3f4..b47ef9c2 100644
--- a/src/views/board/components/NewListForm.tsx
+++ b/src/views/board/components/NewListForm.tsx
@@ -1,44 +1,49 @@
 import { useState, useEffect } from "react";
 import { api } from "~/utils/api";
+import { useForm } from "react-hook-form";
 
 import { HiXMark } from "react-icons/hi2";
 import { Switch } from "@headlessui/react";
 
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 
 import { type NewListInput } from "~/types/router.types";
 
-import { Formik, Form, Field } from "formik";
-
 function classNames(...classes: string[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
-export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
-  const utils = api.useUtils();
-  const { boardData } = useBoard();
-  const { closeModal } = useModal();
-  const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
+type NewListFormInput = NewListInput & {
+  isCreateAnotherEnabled: boolean;
+};
 
-  const refetchBoard = async () => {
-    if (boardData?.publicId) {
-      try {
-        await utils.board.byId.refetch({ boardPublicId: boardData.publicId });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  };
+export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
+  const { refetchBoard, addList } = useBoard();
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+
+  const { register, handleSubmit, reset, setValue, watch } =
+    useForm<NewListFormInput>({
+      defaultValues: {
+        name: "",
+        boardPublicId: boardPublicId,
+        isCreateAnotherEnabled: false,
+      },
+    });
+
+  const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
 
   const createList = api.list.create.useMutation({
-    onSuccess: () => {
-      try {
-        if (!isCreateAnotherEnabled) closeModal();
-        return refetchBoard();
-      } catch (e) {
-        console.log(e);
-      }
+    onSuccess: () => refetchBoard(),
+    onError: () => {
+      closeModal();
+      refetchBoard();
+      showPopup({
+        header: "Unable to create list",
+        message: "Please try again later, or contact customer support.",
+      });
     },
   });
 
@@ -48,6 +53,21 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
     if (nameElement) nameElement.focus();
   }, []);
 
+  const onSubmit = (data: NewListInput) => {
+    addList(data);
+    const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
+    if (!isCreateAnotherEnabled) closeModal();
+    reset({
+      name: "",
+      isCreateAnotherEnabled,
+    });
+
+    createList.mutate({
+      name: data.name,
+      boardPublicId,
+    });
+  };
+
   return (
     <>
       <div className="flex w-full items-center justify-between pb-4">
@@ -62,65 +82,53 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
         </button>
       </div>
 
-      <Formik
-        initialValues={{
-          name: "",
-          boardPublicId: "",
-        }}
-        onSubmit={(values: NewListInput, { resetForm }) => {
-          createList.mutate({
-            name: values.name,
-            boardPublicId,
-          });
-          resetForm();
-        }}
-      >
-        <Form>
-          <label
-            htmlFor="list-name"
-            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label
+          htmlFor="list-name"
+          className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
+        >
+          Name
+        </label>
+        <input
+          id="list-name"
+          {...register("name", { required: true })}
+          className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+        />
+        <div className="mt-3 flex items-center justify-end">
+          <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
+            Create more
+          </span>
+          <Switch
+            checked={isCreateAnotherEnabled}
+            onChange={() =>
+              setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
+            }
+            className={classNames(
+              isCreateAnotherEnabled
+                ? "bg-indigo-600"
+                : "bg-light-800 dark:bg-dark-800",
+              "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
+            )}
           >
-            Name
-          </label>
-          <Field
-            id="list-name"
-            name="name"
-            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-          />
-          <div className="mt-3 flex items-center justify-end">
-            <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
-              Create more
-            </span>
-            <Switch
-              checked={isCreateAnotherEnabled}
-              onChange={setIsCreateAnotherEnabled}
+            <span className="sr-only">Create more</span>
+            <span
+              aria-hidden="true"
               className={classNames(
-                isCreateAnotherEnabled
-                  ? "bg-indigo-600"
-                  : "bg-light-800 dark:bg-dark-800",
-                "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
+                isCreateAnotherEnabled ? "translate-x-2" : "translate-x-0",
+                "pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
               )}
-            >
-              <span className="sr-only">Create more</span>
-              <span
-                aria-hidden="true"
-                className={classNames(
-                  isCreateAnotherEnabled ? "translate-x-2" : "translate-x-0",
-                  "pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-                )}
-              />
-            </Switch>
-          </div>
-          <div className="mt-5 sm:mt-6">
-            <button
-              type="submit"
-              className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-            >
-              Create list
-            </button>
-          </div>
-        </Form>
-      </Formik>
+            />
+          </Switch>
+        </div>
+        <div className="mt-5 sm:mt-6">
+          <button
+            type="submit"
+            className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
+          >
+            Create list
+          </button>
+        </div>
+      </form>
     </>
   );
 }