fix: ensure correct label colour when creating a new label

src/views/card/components/NewLabelForm.tsx

@@ -1,16 +1,13 @@
-import { Fragment, useState } from "react";
+import { Fragment } from "react";
 import { Listbox, Transition } from "@headlessui/react";
 import { api } from "~/utils/api";
-
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
-
 import { useModal } from "~/providers/modal";
-
+import { useForm, Controller } from "react-hook-form";
-import { Formik, Form, Field } from "formik";
 
 interface FormValues {
   name: string;
-  colour: Colour | undefined;
+  colour: Colour;
 }
 
 interface Colour {
@@ -18,7 +15,7 @@ interface Colour {
   code: string;
 }
 
-interface cardPublicId {
+interface CardPublicId {
   cardPublicId: string;
 }
 
@@ -33,11 +30,17 @@ const colours = [
   { name: "Pink", code: "#db2777" },
 ];
 
-export function NewLabelForm({ cardPublicId }: cardPublicId) {
+export function NewLabelForm({ cardPublicId }: CardPublicId) {
-  const [selected, setSelected] = useState(colours[0]);
   const utils = api.useUtils();
   const { closeModal } = useModal();
 
+  const { control, handleSubmit } = useForm<FormValues>({
+    defaultValues: {
+      name: "",
+      colour: colours[0],
+    },
+  });
+
   const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
 
   const createLabel = api.label.create.useMutation({
@@ -51,6 +54,16 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
     },
   });
 
+  const onSubmit = (values: FormValues) => {
+    if (!values.colour?.code) return;
+
+    createLabel.mutate({
+      name: values.name,
+      cardPublicId,
+      colourCode: values.colour.code,
+    });
+  };
+
   return (
     <div className="p-5">
       <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
@@ -63,45 +76,40 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
         </button>
       </div>
 
-      <Formik
+      <form onSubmit={handleSubmit(onSubmit)}>
-        initialValues={{
-          name: "",
-          colour: colours[0],
-        }}
-        onSubmit={(values: FormValues) => {
-          if (!values.colour?.code) return;
-
-          createLabel.mutate({
-            name: values.name,
-            cardPublicId,
-            colourCode: values.colour.code,
-          });
-        }}
-      >
-        <Form>
         <label
           htmlFor="name"
           className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
         >
           Name
         </label>
-          <Field
+        <Controller
-            id="name"
           name="name"
+          control={control}
+          render={({ field }) => (
+            <input
+              {...field}
+              id="name"
               className="block w-full rounded-md border-0 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:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
             />
-          <Listbox value={selected} onChange={setSelected}>
+          )}
+        />
+        <Controller
+          name="colour"
+          control={control}
+          render={({ field }) => (
+            <Listbox {...field}>
               {({ open }) => (
                 <>
                   <div className="relative mt-4">
                     <Listbox.Button className="block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
                       <span className="flex items-center">
                         <span
-                        style={{ backgroundColor: selected?.code }}
+                          style={{ backgroundColor: field.value?.code }}
                           className={`inline-block h-2 w-2 flex-shrink-0 rounded-full`}
                         />
                         <span className="ml-3 block truncate">
-                        {selected?.name}
+                          {field.value?.name}
                         </span>
                       </span>
                       <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -148,6 +156,8 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
                 </>
               )}
             </Listbox>
+          )}
+        />
         <div className="mt-5 sm:mt-6">
           <button
             type="submit"
@@ -156,8 +166,7 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
             Create label
           </button>
         </div>
-        </Form>
+      </form>
-      </Formik>
     </div>
   );
 }