import React, { useEffect } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // react-hook-form import { useForm } from "react-hook-form"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // components import { ModuleForm } from "components/modules"; // services import modulesService from "services/modules.service"; // hooks import useToast from "hooks/use-toast"; // helpers import { renderDateFormat } from "helpers/date-time.helper"; // types import type { IModule } from "types"; // fetch-keys import { MODULE_LIST } from "constants/fetch-keys"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; data?: IModule; }; const defaultValues: Partial = { name: "", description: "", status: null, lead: null, members_list: [], }; export const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, data }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const handleClose = () => { setIsOpen(false); reset(defaultValues); }; const { reset, setError } = useForm({ defaultValues, }); const createModule = async (payload: Partial) => { await modulesService .createModule(workspaceSlug as string, projectId as string, payload) .then(() => { mutate(MODULE_LIST(projectId as string)); handleClose(); setToastAlert({ title: "Success", type: "success", message: "Module created successfully", }); }) .catch((err) => { Object.keys(err).map((key) => { setError(key as keyof typeof defaultValues, { message: err[key].join(", "), }); }); }); }; const updateModule = async (payload: Partial) => { await modulesService .updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload) .then((res) => { mutate( MODULE_LIST(projectId as string), (prevData) => { const newData = prevData?.map((item) => { if (item.id === res.id) { return res; } return item; }); return newData; }, false ); handleClose(); setToastAlert({ title: "Success", type: "success", message: "Module updated successfully", }); }) .catch((err) => { Object.keys(err).map((key) => { setError(key as keyof typeof defaultValues, { message: err[key].join(", "), }); }); }); }; const handleFormSubmit = async (formData: Partial) => { if (!workspaceSlug || !projectId) return; const payload: Partial = { ...formData, }; if (!data) await createModule(payload); else await updateModule(payload); }; useEffect(() => { if (data) { setIsOpen(true); reset(data); } else { reset(defaultValues); } }, [data, setIsOpen, reset]); return (
); };