feat: create new list immediately adds to the board

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,
       }}
     >

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>

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();

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 }) {
+type NewListFormInput = NewListInput & {
-  const utils = api.useUtils();
+  isCreateAnotherEnabled: boolean;
-  const { boardData } = useBoard();
-  const { closeModal } = useModal();
-  const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
-
-  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: () => {
+    onSuccess: () => refetchBoard(),
-      try {
+    onError: () => {
-        if (!isCreateAnotherEnabled) closeModal();
+      closeModal();
-        return refetchBoard();
+      refetchBoard();
-      } catch (e) {
+      showPopup({
-        console.log(e);
+        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,29 +82,16 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
         </button>
       </div>
 
-      <Formik
+      <form onSubmit={handleSubmit(onSubmit)}>
-        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"
         >
           Name
         </label>
-          <Field
+        <input
           id="list-name"
-            name="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">
@@ -93,7 +100,9 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
           </span>
           <Switch
             checked={isCreateAnotherEnabled}
-              onChange={setIsCreateAnotherEnabled}
+            onChange={() =>
+              setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
+            }
             className={classNames(
               isCreateAnotherEnabled
                 ? "bg-indigo-600"
@@ -119,8 +128,7 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
             Create list
           </button>
         </div>
-        </Form>
+      </form>
-      </Formik>
     </>
   );
 }