import React from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; import { Dialog, Transition } from "@headlessui/react"; // services import { PageService } from "services/page.service"; // hooks import useToast from "hooks/use-toast"; // components import { PageForm } from "./page-form"; // types import { IUser, IPage } from "types"; // fetch-keys import { ALL_PAGES_LIST, FAVORITE_PAGES_LIST, MY_PAGES_LIST, RECENT_PAGES_LIST } from "constants/fetch-keys"; import { trackEvent } from "helpers/event-tracker.helper"; type Props = { isOpen: boolean; handleClose: () => void; data?: IPage | null; user: IUser | undefined; workspaceSlug: string; projectId: string; }; // services const pageService = new PageService(); export const CreateUpdatePageModal: React.FC = (props) => { const { isOpen, handleClose, data, workspaceSlug, projectId } = props; // router const router = useRouter(); const { setToastAlert } = useToast(); const onClose = () => { handleClose(); }; const createPage = async (payload: IPage) => { await pageService .createPage(workspaceSlug as string, projectId as string, payload) .then((res) => { mutate(RECENT_PAGES_LIST(projectId as string)); mutate( MY_PAGES_LIST(projectId as string), (prevData) => { if (!prevData) return undefined; return [res, ...(prevData as IPage[])]; }, false ); mutate( ALL_PAGES_LIST(projectId as string), (prevData) => { if (!prevData) return undefined; return [res, ...(prevData as IPage[])]; }, false ); onClose(); router.push(`/${workspaceSlug}/projects/${projectId}/pages/${res.id}`); setToastAlert({ type: "success", title: "Success!", message: "Page created successfully.", }); trackEvent( 'PAGE_CREATE', { ...res, caase: "SUCCES" } ) }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Page could not be created. Please try again.", }); trackEvent( 'PAGE_CREATE', { case: "FAILED" } ) }); }; const updatePage = async (payload: IPage) => { await pageService .patchPage(workspaceSlug as string, projectId as string, data?.id ?? "", payload) .then((res) => { mutate(RECENT_PAGES_LIST(projectId as string)); mutate( FAVORITE_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === res.id) return { ...p, ...res }; return p; }), false ); mutate( MY_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === res.id) return { ...p, ...res }; return p; }), false ); mutate( ALL_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === res.id) return { ...p, ...res }; return p; }), false ); 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 createPage(formData); else await updatePage(formData); }; return (
); };