import React, { useEffect } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // react-hook-form import { useForm, Controller } from "react-hook-form"; // react-color import { TwitterPicker } from "react-color"; // headless ui import { 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 } from "components/ui"; // types import type { ICurrentUserResponse, IState, IStateResponse } from "types"; // fetch-keys import { STATES_LIST } from "constants/fetch-keys"; // constants import { GROUP_CHOICES } from "constants/project"; type Props = { data: IState | null; onClose: () => void; selectedGroup: StateGroup | null; user: ICurrentUserResponse | undefined; }; export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null; const defaultValues: Partial = { name: "", color: "#858e96", group: "backlog", }; export const CreateUpdateStateInline: React.FC = ({ data, onClose, selectedGroup, user, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { register, handleSubmit, formState: { errors, isSubmitting }, watch, reset, control, } = useForm({ defaultValues, }); useEffect(() => { if (!data) return; reset(data); }, [data, reset]); useEffect(() => { if (data) return; reset({ ...defaultValues, group: selectedGroup ?? "backlog", }); }, [selectedGroup, data, reset]); const handleClose = () => { onClose(); reset({ name: "", color: "#000000", group: "backlog" }); }; const onSubmit = async (formData: IState) => { if (!workspaceSlug || !projectId || isSubmitting) return; const payload: IState = { ...formData, }; if (!data) { await stateService .createState(workspaceSlug.toString(), projectId.toString(), { ...payload }, user) .then((res) => { mutate( STATES_LIST(projectId.toString()), (prevData) => { if (!prevData) return prevData; return { ...prevData, [res.group]: [...prevData[res.group], res], }; }, false ); handleClose(); setToastAlert({ type: "success", title: "Success!", message: "State created successfully.", }); }) .catch((err) => { if (err.status === 400) setToastAlert({ type: "error", title: "Error!", message: "State with that name already exists. Please try again with another name.", }); else setToastAlert({ type: "error", title: "Error!", message: "State could not be created. Please try again.", }); }); } else { await stateService .updateState( workspaceSlug.toString(), projectId.toString(), data.id, { ...payload, }, user ) .then(() => { mutate(STATES_LIST(projectId.toString())); handleClose(); setToastAlert({ type: "success", title: "Success!", message: "State updated successfully.", }); }) .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 updated. Please try again.", }); }); } }; return (
{({ open }) => ( <> {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
{data && ( ( k === value.toString()) ? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES] : "Select group" } input > {Object.keys(GROUP_CHOICES).map((key) => ( {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]} ))} )} /> )} Cancel {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"} ); };