From 918acf8b99b9650aea49766944e1246288d4409c Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Tue, 13 Aug 2024 23:19:38 +0100
Subject: [PATCH] fix: tweak form spacing and refactor to react hook form

---
 src/components/NewWorkspaceForm.tsx | 71 ++++++++++++++---------------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/components/NewWorkspaceForm.tsx b/src/components/NewWorkspaceForm.tsx
index a33a4e31..9b0ff2c7 100644
--- a/src/components/NewWorkspaceForm.tsx
+++ b/src/components/NewWorkspaceForm.tsx
@@ -1,12 +1,9 @@
 import { useEffect } from "react";
 import { api } from "~/utils/api";
-
 import { HiXMark } from "react-icons/hi2";
-
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
-
-import { Formik, Form, Field } from "formik";
+import { useForm } from "react-hook-form";
 
 interface FormValues {
   name: string;
@@ -15,6 +12,11 @@ interface FormValues {
 export function NewWorkspaceForm() {
   const { closeModal } = useModal();
   const { switchWorkspace } = useWorkspace();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>();
 
   const createWorkspace = api.workspace.create.useMutation({
     onSuccess: (values) => {
@@ -35,8 +37,14 @@ export function NewWorkspaceForm() {
     if (nameElement) nameElement.focus();
   }, []);
 
+  const onSubmit = (values: FormValues) => {
+    createWorkspace.mutate({
+      name: values.name,
+    });
+  };
+
   return (
-    <>
+    <div className="p-5">
       <div className="flex w-full items-center justify-between pb-4">
         <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
           New workspace
@@ -49,38 +57,27 @@ export function NewWorkspaceForm() {
         </button>
       </div>
 
-      <Formik
-        initialValues={{
-          name: "",
-        }}
-        onSubmit={(values: FormValues) => {
-          createWorkspace.mutate({
-            name: values.name,
-          });
-        }}
-      >
-        <Form>
-          <label
-            htmlFor="workspace-name"
-            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label
+          htmlFor="workspace-name"
+          className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
+        >
+          Name
+        </label>
+        <input
+          id="workspace-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-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"
           >
-            Name
-          </label>
-          <Field
-            id="workspace-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-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 workspace
-            </button>
-          </div>
-        </Form>
-      </Formik>
-    </>
+            Create workspace
+          </button>
+        </div>
+      </form>
+    </div>
   );
 }