import React from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // react-color import { TwitterPicker } from "react-color"; // headless ui import { Dialog, Popover, Transition } from "@headlessui/react"; // services import stateService from "services/state.service"; // hooks import useToast from "hooks/use-toast"; // ui import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; // icons import { ChevronDownIcon } from "@heroicons/react/24/outline"; // types import type { IState, IStateResponse } from "types"; // fetch keys import { STATES_LIST } from "constants/fetch-keys"; // constants import { GROUP_CHOICES } from "constants/project"; // types type Props = { isOpen: boolean; projectId: string; handleClose: () => void; }; const defaultValues: Partial = { name: "", description: "", color: "#858e96", group: "backlog", }; export const CreateStateModal: React.FC = ({ isOpen, projectId, handleClose }) => { const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const { register, formState: { errors, isSubmitting }, handleSubmit, watch, control, reset, } = useForm({ defaultValues, }); const onClose = () => { handleClose(); reset(defaultValues); }; const onSubmit = async (formData: IState) => { if (!workspaceSlug) return; const payload: IState = { ...formData, }; await stateService .createState(workspaceSlug as string, projectId, payload) .then((res) => { mutate( STATES_LIST(projectId.toString()), (prevData) => { if (!prevData) return prevData; return { ...prevData, [res.group]: [...prevData[res.group], res], }; }, false ); onClose(); }) .catch((err) => { if (err.status === 400) setToastAlert({ type: "error", title: "Error!", message: "Another state exists with the same name. Please try again with another name.", }); else setToastAlert({ type: "error", title: "Error!", message: "State could not be created. Please try again.", }); }); }; return (
Create State
( {Object.keys(GROUP_CHOICES).map((key) => ( {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]} ))} )} />
{({ open }) => ( <> Color {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}