import React, { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import { useForm } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { ModuleForm } from "components/modules"; // hooks import useToast from "hooks/use-toast"; // types import type { IModule } from "types"; type Props = { isOpen: boolean; onClose: () => void; data?: IModule; workspaceSlug: string; projectId: string; }; const defaultValues: Partial = { name: "", description: "", status: "backlog", lead: null, members: [], }; export const CreateUpdateModuleModal: React.FC = observer((props) => { const { isOpen, onClose, data, workspaceSlug, projectId } = props; const [activeProject, setActiveProject] = useState(null); const { project: projectStore, module: moduleStore } = useMobxStore(); const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined; const { setToastAlert } = useToast(); const handleClose = () => { reset(defaultValues); onClose(); }; const { reset } = useForm({ defaultValues, }); const createModule = async (payload: Partial) => { if (!workspaceSlug || !projectId) return; const selectedProjectId = payload.project ?? projectId.toString(); await moduleStore .createModule(workspaceSlug.toString(), selectedProjectId, payload) .then(() => { 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) => { if (!workspaceSlug || !projectId || !data) return; const selectedProjectId = payload.project ?? projectId.toString(); await moduleStore .updateModuleDetails(workspaceSlug.toString(), selectedProjectId, data.id, payload) .then(() => { 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, }; if (!data) await createModule(payload); else await updateModule(payload); }; useEffect(() => { // if modal is closed, reset active project to null // and return to avoid activeProject being set to some other project if (!isOpen) { setActiveProject(null); return; } // if data is present, set active project to the project of the // issue. This has more priority than the project in the url. if (data && data.project) { setActiveProject(data.project); return; } // if data is not present, set active project to the project // in the url. This has the least priority. if (projects && projects.length > 0 && !activeProject) setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null); }, [activeProject, data, projectId, projects, isOpen]); return (
); });