import React, { useEffect } from "react"; // swr import { mutate } from "swr"; // react hook form import { useForm, Controller } from "react-hook-form"; // react color import { TwitterPicker } from "react-color"; // headless import { Popover, Transition } from "@headlessui/react"; // constants import { STATE_LIST } from "constants/fetch-keys"; // services import stateService from "lib/services/state.service"; // ui import { Button, Input } from "ui"; // types import type { IState } from "types"; type Props = { workspaceSlug?: string; projectId?: string; data: IState | null; onClose: () => void; selectedGroup: StateGroup | null; }; export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null; export const CreateUpdateStateInline: React.FC = ({ workspaceSlug, projectId, data, onClose, selectedGroup, }) => { const { register, handleSubmit, formState: { errors }, setError, watch, reset, control, } = useForm({ defaultValues: { name: "", color: "#000000", group: "backlog", }, }); const handleClose = () => { onClose(); reset({ name: "", color: "#000000", group: "backlog" }); }; const onSubmit = async (formData: IState) => { if (!workspaceSlug || !projectId) return; const payload: IState = { ...formData, }; if (!data) { await stateService .createState(workspaceSlug, projectId, { ...payload, group: selectedGroup }) .then((res) => { mutate(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false); handleClose(); }) .catch((err) => { Object.keys(err).map((key) => { setError(key as keyof IState, { message: err[key].join(", "), }); }); }); } else { await stateService .updateState(workspaceSlug, projectId, data.id, { ...payload, group: selectedGroup ?? "backlog", }) .then((res) => { mutate( STATE_LIST(projectId), (prevData) => { const newData = prevData?.map((item) => { if (item.id === res.id) { return res; } return item; }); return newData; }, false ); handleClose(); }) .catch((err) => { Object.keys(err).map((key) => { setError(key as keyof IState, { message: err[key].join(", "), }); }); }); } }; useEffect(() => { if (data === null) return; reset(data); }, [data]); return (
{({ open }) => ( <> {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
); };