import { useEffect, useState } from "react"; import { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // services import workspaceService from "services/workspace.service"; // hooks import useToast from "hooks/use-toast"; // ui import { CustomSelect, Input } from "components/ui"; // types import { IWorkspace } from "types"; // fetch-keys import { USER_WORKSPACES } from "constants/fetch-keys"; // constants import { COMPANY_SIZE } from "constants/workspace"; type Props = { onSubmit: (res: IWorkspace) => void; }; const defaultValues = { name: "", slug: "", company_size: null, }; export const CreateWorkspaceForm: React.FC = ({ onSubmit }) => { const [slugError, setSlugError] = useState(false); const { setToastAlert } = useToast(); const { register, handleSubmit, control, setValue, reset, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); const handleCreateWorkspace = async (formData: IWorkspace) => { await workspaceService .workspaceSlugCheck(formData.slug) .then(async (res) => { if (res.status === true) { setSlugError(false); await workspaceService .createWorkspace(formData) .then((res) => { setToastAlert({ type: "success", title: "Success!", message: "Workspace created successfully.", }); mutate(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]); onSubmit(res); }) .catch((err) => { console.error(err); }); } else setSlugError(true); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Some error occurred while creating workspace. Please try again.", }); }); }; useEffect(() => { reset(defaultValues); }, [reset]); return (
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-")) } validations={{ required: "Workspace name is required", }} error={errors.name} />
Workspace slug
{"https://app.plane.so/"}
{slugError && ( Workspace URL is already taken! )}
Company size
( {COMPANY_SIZE?.map((item) => ( {item.label} ))} )} /> {errors.company_size && ( {errors.company_size.message} )}
); };