import { useState } from "react"; import useSWR, { mutate } from "swr"; import { useRouter } from "next/router"; // services import pagesService from "services/pages.service"; import projectService from "services/project.service"; // hooks import useToast from "hooks/use-toast"; // components import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SinglePageListItem, } from "components/pages"; // ui import { EmptyState, Loader } from "components/ui"; // images import emptyPage from "public/empty-state/empty-page.svg"; // types import { IPage, TPageViewProps } from "types"; import { ALL_PAGES_LIST, FAVORITE_PAGES_LIST, MY_PAGES_LIST, PROJECT_MEMBERS, RECENT_PAGES_LIST, } from "constants/fetch-keys"; type Props = { pages: IPage[] | undefined; viewType: TPageViewProps; }; export const PagesView: React.FC = ({ pages, viewType }) => { const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false); const [selectedPageToUpdate, setSelectedPageToUpdate] = useState(null); const [deletePageModal, setDeletePageModal] = useState(false); const [selectedPageToDelete, setSelectedPageToDelete] = useState(null); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { data: people } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) : null ); const handleEditPage = (page: IPage) => { setSelectedPageToUpdate(page); setCreateUpdatePageModal(true); }; const handleDeletePage = (page: IPage) => { setSelectedPageToDelete(page); setDeletePageModal(true); }; const handleAddToFavorites = (page: IPage) => { if (!workspaceSlug || !projectId) return; mutate( ALL_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = true; return p; }), false ); mutate( MY_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = true; return p; }), false ); mutate( FAVORITE_PAGES_LIST(projectId as string), (prevData) => [page, ...(prevData as IPage[])], false ); pagesService .addPageToFavorites(workspaceSlug as string, projectId as string, { page: page.id, }) .then(() => { mutate(RECENT_PAGES_LIST(projectId as string)); setToastAlert({ type: "success", title: "Success!", message: "Successfully added the page to favorites.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't add the page to favorites. Please try again.", }); }); }; const handleRemoveFromFavorites = (page: IPage) => { if (!workspaceSlug || !projectId) return; mutate( ALL_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = false; return p; }), false ); mutate( MY_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = false; return p; }), false ); mutate( FAVORITE_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).filter((p) => p.id !== page.id), false ); pagesService .removePageFromFavorites(workspaceSlug as string, projectId as string, page.id) .then(() => { mutate(RECENT_PAGES_LIST(projectId as string)); setToastAlert({ type: "success", title: "Success!", message: "Successfully removed the page from favorites.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the page from favorites. Please try again.", }); }); }; const partialUpdatePage = (page: IPage, formData: Partial) => { if (!workspaceSlug || !projectId) return; mutate( ALL_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), false ); mutate( MY_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), false ); mutate( FAVORITE_PAGES_LIST(projectId as string), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), false ); pagesService .patchPage(workspaceSlug as string, projectId as string, page.id, formData) .then(() => { mutate(RECENT_PAGES_LIST(projectId as string)); }); }; return ( <> setCreateUpdatePageModal(false)} data={selectedPageToUpdate} /> {pages ? ( pages.length > 0 ? ( viewType === "list" ? (
    {pages.map((page) => ( handleEditPage(page)} handleDeletePage={() => handleDeletePage(page)} handleAddToFavorites={() => handleAddToFavorites(page)} handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)} partialUpdatePage={partialUpdatePage} /> ))}
) : viewType === "detailed" ? (
{pages.map((page) => ( handleEditPage(page)} handleDeletePage={() => handleDeletePage(page)} handleAddToFavorites={() => handleAddToFavorites(page)} handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)} partialUpdatePage={partialUpdatePage} /> ))}
) : (
{pages.map((page) => ( handleEditPage(page)} handleDeletePage={() => handleDeletePage(page)} handleAddToFavorites={() => handleAddToFavorites(page)} handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)} partialUpdatePage={partialUpdatePage} /> ))}
) ) : ( ) ) : viewType === "list" ? ( ) : ( )} ); };