chore: remove formik

2024-08-24 07:25:37 +01:00
parent 015020185f
commit 8c6e50ed2f
8 changed files with 151 additions and 167 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
    "@trpc/server": "next",
    "@vercel/postgres": "^0.7.2",
    "drizzle-orm": "^0.28.5",
-    "formik": "^2.4.5",
    "next": "^14.1.3",
    "postgres": "^3.4.4",
    "react": "18.2.0",
--- a/src/views/board/components/List.tsx
+++ b/src/views/board/components/List.tsx
@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import { HiOutlinePlusSmall } from "react-icons/hi2";
 import { Draggable } from "react-beautiful-dnd";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";

 import { api } from "~/utils/api";
 import { useModal } from "~/providers/modal";
@@ -42,20 +42,20 @@ export default function List({

  const updateList = api.list.update.useMutation();

-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit, setValue } = useForm<FormValues>({
+    defaultValues: {
      listPublicId: list.publicId,
      name: list.name,
    },
-    onSubmit: (values: FormValues) => {
-      updateList.mutate({
-        listPublicId: values.listPublicId,
-        name: values.name,
-      });
-    },
-    enableReinitialize: true,
  });

+  const onSubmit = (values: FormValues) => {
+    updateList.mutate({
+      listPublicId: values.listPublicId,
+      name: values.name,
+    });
+  };
+
  return (
    <Draggable key={list.publicId} draggableId={list.publicId} index={index}>
      {(provided) => (
@@ -68,17 +68,15 @@ export default function List({
        >
          <div className="flex justify-between">
            <form
-              onSubmit={formik.handleSubmit}
+              onSubmit={handleSubmit(onSubmit)}
              className="focus-visible:outline-none"
            >
              <input
-                type="name"
                id="name"
-                name="name"
-                value={formik.values.name}
-                onChange={formik.handleChange}
-                onBlur={formik.submitForm}
-                className="font-mediumfocus:ring-0 mb-4 block border-0 bg-transparent px-4 pt-1 text-sm text-neutral-900 focus-visible:outline-none dark:text-dark-1000"
+                type="text"
+                {...register("name")}
+                onBlur={handleSubmit(onSubmit)}
+                className="mb-4 block border-0 bg-transparent px-4 pt-1 text-sm font-medium text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000"
              />
            </form>
            <div>
--- a/src/views/board/index.tsx
+++ b/src/views/board/index.tsx
@@ -8,7 +8,7 @@ import {
  type DropResult,
  Draggable,
 } from "react-beautiful-dnd";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";

 import { api } from "~/utils/api";
 import { useBoard } from "~/providers/board";
@@ -40,20 +40,20 @@ export default function BoardPage() {

  const updateBoard = api.board.update.useMutation();

-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit, setValue } = useForm<UpdateBoardInput>({
+    values: {
      boardPublicId: boardId ?? "",
-      name: boardData?.name ? boardData.name : "",
+      name: "",
    },
-    onSubmit: (values: UpdateBoardInput) => {
-      updateBoard.mutate({
-        boardPublicId: values.boardPublicId,
-        name: values.name,
-      });
-    },
-    enableReinitialize: true,
  });

+  const onSubmit = (values: UpdateBoardInput) => {
+    updateBoard.mutate({
+      boardPublicId: values.boardPublicId,
+      name: values.name,
+    });
+  };
+
  const { data, isSuccess, isLoading } = api.board.byId.useQuery(
    { boardPublicId: boardId ?? "" },
    {
@@ -64,8 +64,9 @@ export default function BoardPage() {
  useEffect(() => {
    if (isSuccess && data) {
      setBoardData(data);
+      setValue("name", data.name || "");
    }
-  }, [isSuccess, data, setBoardData]);
+  }, [isSuccess, data, setBoardData, setValue]);

  if (!boardId || !boardData) return <></>;

@@ -136,16 +137,14 @@ export default function BoardPage() {
          </div>
        ) : (
          <form
-            onSubmit={formik.handleSubmit}
+            onSubmit={handleSubmit(onSubmit)}
            className="focus-visible:outline-none"
          >
            <input
-              type="name"
              id="name"
-              name="name"
-              value={formik.values.name}
-              onChange={formik.handleChange}
-              onBlur={formik.submitForm}
+              type="text"
+              {...register("name")}
+              onBlur={handleSubmit(onSubmit)}
              className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]"
            />
          </form>
--- a/src/views/card/components/LabelSelector.tsx
+++ b/src/views/card/components/LabelSelector.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
 import { HiMiniPlus } from "react-icons/hi2";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";

 import { useModal } from "~/providers/modal";

@@ -33,18 +33,16 @@ export default function LabelSelector({
    },
  });

-  const formik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
-        labels?.map((label) => [label.publicId, label.selected]) ?? [],
-      ),
-    },
-    onSubmit: (values) => {
-      console.log({ values });
-    },
-    enableReinitialize: true,
+  const { register, handleSubmit, setValue, watch } = useForm({
+    values: Object.fromEntries(
+      labels?.map((label) => [label.publicId, label.selected]) ?? [],
+    ),
  });

+  const onSubmit = (values: Record<string, boolean>) => {
+    console.log({ values });
+  };
+
  const selectedLabels = labels.filter((label) => label.selected);

  return (
@@ -99,36 +97,32 @@ export default function LabelSelector({
          >
            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
              <div className="p-2">
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                  {labels?.map((label) => (
                    <Menu.Item key={label.publicId}>
                      {() => (
                        <div
                          key={label.publicId}
                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                          onClick={async (e) => {
-                            e.preventDefault();
-                            await formik.setFieldValue(
-                              label.publicId,
-                              !formik.values[label.publicId],
-                            );
+                          onClick={async () => {
+                            const newValue = !watch(label.publicId);
+                            setValue(label.publicId, newValue);

                            addOrRemoveLabel.mutate({
                              cardPublicId,
                              labelPublicId: label.publicId,
                            });

-                            await formik.submitForm();
+                            handleSubmit(onSubmit)();
                          }}
                        >
                          <input
                            id={label.publicId}
-                            name={label.publicId}
                            type="checkbox"
                            className="h-[14px] w-[14px] rounded bg-transparent"
                            onClick={(event) => event.stopPropagation()}
-                            onChange={formik.handleChange}
-                            checked={formik.values[label.publicId]}
+                            {...register(label.publicId)}
+                            checked={watch(label.publicId)}
                          />
                          <label
                            htmlFor={label.publicId}
--- a/src/views/card/components/ListSelector.tsx
+++ b/src/views/card/components/ListSelector.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";

 interface ListSelectorProps {
  cardPublicId: string;
@@ -28,18 +28,16 @@ export default function ListSelector({
    },
  });

-  const formik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
-        lists?.map((list) => [list.publicId, list.selected]) ?? [],
-      ),
-    },
-    onSubmit: (values) => {
-      console.log({ values });
-    },
-    enableReinitialize: true,
+  const { register, handleSubmit, setValue, watch } = useForm({
+    values: Object.fromEntries(
+      lists?.map((list) => [list.publicId, list.selected]) ?? [],
+    ),
  });

+  const onSubmit = (values: Record<string, boolean>) => {
+    console.log({ values });
+  };
+
  const selectedList = lists.find((list) => list.selected);

  return (
@@ -68,40 +66,41 @@ export default function ListSelector({
          >
            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
              <div className="p-2">
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                  {lists?.map((list) => (
                    <Menu.Item key={list.publicId}>
-                      <div
-                        key={list.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            list.publicId,
-                            !formik.values[list.publicId],
-                          );
+                      {() => (
+                        <div
+                          key={list.publicId}
+                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                          onClick={async () => {
+                            const newValue = !watch(list.publicId);
+                            setValue(list.publicId, newValue);

-                          updateCardList.mutate({
-                            cardId: cardPublicId,
-                            newListId: list.publicId,
-                          });
+                            updateCardList.mutate({
+                              cardId: cardPublicId,
+                              newListId: list.publicId,
+                            });

-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={list.publicId}
-                          name={list.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[list.publicId]}
-                        />
-                        <label htmlFor={list.publicId} className="ml-3 text-sm">
-                          {list.name}
-                        </label>
-                      </div>
+                            handleSubmit(onSubmit)();
+                          }}
+                        >
+                          <input
+                            id={list.publicId}
+                            type="checkbox"
+                            className="h-[14px] w-[14px] rounded bg-transparent"
+                            onClick={(event) => event.stopPropagation()}
+                            {...register(list.publicId)}
+                            checked={watch(list.publicId)}
+                          />
+                          <label
+                            htmlFor={list.publicId}
+                            className="ml-3 text-sm"
+                          >
+                            {list.name}
+                          </label>
+                        </div>
+                      )}
                    </Menu.Item>
                  ))}
                </form>
--- a/src/views/card/components/MemberSelector.tsx
+++ b/src/views/card/components/MemberSelector.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
 import { HiMiniPlus } from "react-icons/hi2";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";

 interface MemberSelectorProps {
  cardPublicId: string;
@@ -17,7 +17,7 @@ interface MemberSelectorProps {
  isLoading: boolean;
 }

-export default function LabelSelector({
+export default function MemberSelector({
  cardPublicId,
  members,
  isLoading,
@@ -32,18 +32,16 @@ export default function LabelSelector({
    },
  });

-  const formik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
-        members?.map((member) => [member.publicId, member.selected]) ?? [],
-      ),
-    },
-    onSubmit: (values) => {
-      console.log({ values });
-    },
-    enableReinitialize: true,
+  const { register, handleSubmit, setValue, watch } = useForm({
+    values: Object.fromEntries(
+      members?.map((member) => [member.publicId, member.selected]) ?? [],
+    ),
  });

+  const onSubmit = (values: Record<string, boolean>) => {
+    console.log({ values });
+  };
+
  const selectedMembers = members.filter((member) => member.selected);

  return (
@@ -95,43 +93,41 @@ export default function LabelSelector({
          >
            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
              <div className="p-2">
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                  {members?.map((member) => (
                    <Menu.Item key={member.publicId}>
-                      <div
-                        key={member.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            member.publicId,
-                            !formik.values[member.publicId],
-                          );
+                      {() => (
+                        <div
+                          key={member.publicId}
+                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                          onClick={async () => {
+                            const newValue = !watch(member.publicId);
+                            setValue(member.publicId, newValue);

-                          addOrRemoveMember.mutate({
-                            cardPublicId,
-                            workspaceMemberPublicId: member.publicId,
-                          });
+                            addOrRemoveMember.mutate({
+                              cardPublicId,
+                              workspaceMemberPublicId: member.publicId,
+                            });

-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={member.publicId}
-                          name={member.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[member.publicId]}
-                        />
-                        <label
-                          htmlFor={member.publicId}
-                          className="ml-3 text-sm"
+                            handleSubmit(onSubmit)();
+                          }}
                        >
-                          {member?.user?.name}
-                        </label>
-                      </div>
+                          <input
+                            id={member.publicId}
+                            type="checkbox"
+                            className="h-[14px] w-[14px] rounded bg-transparent"
+                            onClick={(event) => event.stopPropagation()}
+                            {...register(member.publicId)}
+                            checked={watch(member.publicId)}
+                          />
+                          <label
+                            htmlFor={member.publicId}
+                            className="ml-3 text-sm"
+                          >
+                            {member?.user?.name}
+                          </label>
+                        </div>
+                      )}
                    </Menu.Item>
                  ))}
                </form>
--- a/src/views/card/index.tsx
+++ b/src/views/card/index.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { useFormik } from "formik";
+import { useForm } from "react-hook-form";
 import ContentEditable from "react-contenteditable";
 import { IoChevronForwardSharp } from "react-icons/io5";

@@ -74,22 +74,22 @@ export default function CardPage() {

  const updateCard = api.card.update.useMutation();

-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit, setValue, watch } = useForm<FormValues>({
+    values: {
      cardId: cardId ?? "",
-      title: data?.title ? data.title : "",
-      description: data?.description ? data.description : "",
+      title: data?.title ?? "",
+      description: data?.description ?? "",
    },
-    onSubmit: (values: FormValues) => {
-      updateCard.mutate({
-        cardId: values.cardId,
-        title: values.title,
-        description: values.description,
-      });
-    },
-    enableReinitialize: true,
  });

+  const onSubmit = (values: FormValues) => {
+    updateCard.mutate({
+      cardId: values.cardId,
+      title: values.title,
+      description: values.description,
+    });
+  };
+
  if (!cardId) return <></>;

  return (
@@ -113,15 +113,16 @@ export default function CardPage() {
                size={18}
                className="mx-2 text-light-900 dark:text-dark-900"
              />
-              <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
+              <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="w-full space-y-6"
+              >
                <div>
                  <input
                    type="text"
                    id="title"
-                    name="title"
-                    value={formik.values.title}
-                    onChange={formik.handleChange}
-                    onBlur={formik.submitForm}
+                    {...register("title")}
+                    onBlur={handleSubmit(onSubmit)}
                    className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
                  />
                </div>
@@ -133,16 +134,14 @@ export default function CardPage() {
          )}
        </div>
        <div className="mb-8 flex w-full max-w-2xl justify-between">
-          <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="w-full space-y-6">
            <div className="mt-2">
              <ContentEditable
                placeholder="Add description..."
-                html={formik.values.description}
+                html={watch("description")}
                disabled={false}
-                onChange={(e) =>
-                  formik.setFieldValue("description", e.target.value)
-                }
-                onBlur={formik.submitForm}
+                onChange={(e) => setValue("description", e.target.value)}
+                onBlur={handleSubmit(onSubmit)}
                className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
              />
            </div>