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"; // 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 } = 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({ type: "success", title: "Success!", message: "Module created successfully.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Module could not be created. Please try again.", }); }); }; 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) => prevData?.map((p) => { if (p.id === res.id) return { ...p, ...payload }; return p; }), false ); handleClose(); setToastAlert({ type: "success", title: "Success!", message: "Module updated successfully.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Module could not be updated. Please try again.", }); }); }; const handleFormSubmit = async (formData: Partial) => { if (!workspaceSlug || !projectId) return; const payload: Partial = { ...formData, members_list: formData.members, }; if (!data) await createModule(payload); else await updateModule(payload); }; return (
); };