import { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR, { mutate } from "swr"; import { Plus } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { PageService } from "services/page.service"; import { ProjectMemberService } from "services/project"; // hooks import useToast from "hooks/use-toast"; // components import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SinglePageListItem } from "components/pages"; import { EmptyState } from "components/common"; // ui import { Loader } from "@plane/ui"; // images import emptyPage from "public/empty-state/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; }; // services const pageService = new PageService(); const projectMemberService = new ProjectMemberService(); export const PagesView: React.FC = observer(({ pages, viewType }) => { // states const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false); const [selectedPageToUpdate, setSelectedPageToUpdate] = useState(null); const [deletePageModal, setDeletePageModal] = useState(false); const [selectedPageToDelete, setSelectedPageToDelete] = useState(null); const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore(); const user = userStore.currentUser ?? undefined; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { data: people } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null, workspaceSlug && projectId ? () => projectMemberService.fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : 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.toString()), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = true; return p; }), false ); mutate( MY_PAGES_LIST(projectId.toString()), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = true; return p; }), false ); mutate(FAVORITE_PAGES_LIST(projectId.toString()), (prevData) => [page, ...(prevData ?? [])], false); pageService .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), { page: page.id, }) .then(() => { mutate(RECENT_PAGES_LIST(projectId.toString())); 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.toString()), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = false; return p; }), false ); mutate( MY_PAGES_LIST(projectId.toString()), (prevData) => (prevData ?? []).map((p) => { if (p.id === page.id) p.is_favorite = false; return p; }), false ); mutate( FAVORITE_PAGES_LIST(projectId.toString()), (prevData) => (prevData ?? []).filter((p) => p.id !== page.id), false ); pageService .removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id) .then(() => { mutate(RECENT_PAGES_LIST(projectId.toString())); 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 || !user) return; mutate( ALL_PAGES_LIST(projectId.toString()), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), false ); mutate( MY_PAGES_LIST(projectId.toString()), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), false ); mutate( FAVORITE_PAGES_LIST(projectId.toString()), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), false ); pageService.patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData).then(() => { mutate(RECENT_PAGES_LIST(projectId.toString())); }); }; return ( <> {workspaceSlug && projectId && ( <> setCreateUpdatePageModal(false)} data={selectedPageToUpdate} user={user} workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} /> )} {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} /> ))}
) ) : ( , text: "New Page", onClick: () => commandPaletteStore.toggleCreatePageModal(true), }} /> )}
) : viewType === "list" ? ( ) : viewType === "detailed" ? ( ) : ( )} ); });