import React, { FC } from "react"; import { useRouter } from "next/router"; import { Dialog, Transition } from "@headlessui/react"; // hooks import useToast from "hooks/use-toast"; // components import { PageForm } from "./page-form"; // types import { IPage } from "types"; // store import { useMobxStore } from "lib/mobx/store-provider"; // helpers import { trackEvent } from "helpers/event-tracker.helper"; type Props = { data?: IPage | null; handleClose: () => void; isOpen: boolean; projectId: string; }; export const CreateUpdatePageModal: FC = (props) => { const { isOpen, handleClose, data, projectId } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // store const { page: { createPage, updatePage }, } = useMobxStore(); const { setToastAlert } = useToast(); const onClose = () => { handleClose(); }; const createProjectPage = async (payload: IPage) => { if (!workspaceSlug) return; createPage(workspaceSlug.toString(), projectId, payload) .then((res) => { router.push(`/${workspaceSlug}/projects/${projectId}/pages/${res.id}`); onClose(); setToastAlert({ type: "success", title: "Success!", message: "Page created successfully.", }); trackEvent("PAGE_CREATE", { ...res, case: "SUCCESS", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Page could not be created. Please try again.", }); trackEvent("PAGE_CREATE", { case: "FAILED", }); }); }; const updateProjectPage = async (payload: IPage) => { if (!data || !workspaceSlug) return; return updatePage(workspaceSlug.toString(), projectId, data.id, payload) .then((res) => { onClose(); setToastAlert({ type: "success", title: "Success!", message: "Page updated successfully.", }); trackEvent("PAGE_UPDATE", { ...res, case: "SUCCESS", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Page could not be updated. Please try again.", }); trackEvent("PAGE_UPDATE", { case: "FAILED", }); }); }; const handleFormSubmit = async (formData: IPage) => { if (!workspaceSlug || !projectId) return; if (!data) await createProjectPage(formData); else await updateProjectPage(formData); }; return (
); };