shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tweak form spacing and refactor to react hook form

Browse Source
This commit is contained in:
Henry
2024-08-13 23:19:38 +01:00
parent 04c6576228
commit 918acf8b99
1 changed files with 34 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/NewWorkspaceForm.tsx
View File

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