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"; 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 }, trackEvent: { postHogEventTracker }, workspace: { currentWorkspace } } = useMobxStore(); const { setToastAlert } = useToast(); const onClose = () => { handleClose(); }; const createProjectPage = async (payload: IPage) => { if (!workspaceSlug) return; await 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.", }); postHogEventTracker( "PAGE_CREATED", { ...res, state: "SUCCESS", }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Page could not be created. Please try again.", }); postHogEventTracker("PAGE_CREATED", { state: "FAILED", }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); }); }; const updateProjectPage = async (payload: IPage) => { if (!data || !workspaceSlug) return; await updatePage(workspaceSlug.toString(), projectId, data.id, payload) .then((res) => { onClose(); setToastAlert({ type: "success", title: "Success!", message: "Page updated successfully.", }); postHogEventTracker("PAGE_UPDATED", { ...res, state: "SUCCESS", }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Page could not be updated. Please try again.", }); postHogEventTracker("PAGE_UPDATED", { state: "FAILED", }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); }); }; const handleFormSubmit = async (formData: IPage) => { if (!workspaceSlug || !projectId) return; if (!data) await createProjectPage(formData); else await updateProjectPage(formData); }; return (
); };