import { FC, useState } from "react"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import { AlertCircle, Archive, ArchiveRestoreIcon, FileText, Globe2, LinkIcon, Lock, Pencil, Star, Trash2, } from "lucide-react"; // hooks import { useMember, usePage, useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; import { renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper"; // ui import { CustomMenu, Tooltip } from "@plane/ui"; // components import { CreateUpdatePageModal, DeletePageModal } from "components/pages"; // constants import { EUserProjectRoles } from "constants/project"; export interface IPagesListItem { workspaceSlug: string; projectId: string; pageId: string; } export const PagesListItem: FC = observer((props) => { const { workspaceSlug, projectId, pageId } = props; // states const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false); const [deletePageModal, setDeletePageModal] = useState(false); // store hooks const { currentUser, membership: { currentProjectRole }, } = useUser(); const { getArchivedPageById, getUnArchivedPageById, archivePage, removeFromFavorites, addToFavorites, makePrivate, makePublic, restorePage, } = usePage(); const { project: { getProjectMemberDetails }, } = useMember(); // toast alert const { setToastAlert } = useToast(); // derived values const pageDetails = getUnArchivedPageById(pageId) ?? getArchivedPageById(pageId); const handleCopyUrl = (e: any) => { e.preventDefault(); e.stopPropagation(); copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${pageId}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Page link copied to clipboard.", }); }); }; const handleAddToFavorites = (e: any) => { e.preventDefault(); e.stopPropagation(); addToFavorites(workspaceSlug, projectId, pageId) .then(() => { 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 = (e: any) => { e.preventDefault(); e.stopPropagation(); removeFromFavorites(workspaceSlug, projectId, pageId) .then(() => { 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 handleMakePublic = (e: any) => { e.preventDefault(); e.stopPropagation(); makePublic(workspaceSlug, projectId, pageId); }; const handleMakePrivate = (e: any) => { e.preventDefault(); e.stopPropagation(); makePrivate(workspaceSlug, projectId, pageId); }; const handleArchivePage = (e: any) => { e.preventDefault(); e.stopPropagation(); archivePage(workspaceSlug, projectId, pageId); }; const handleRestorePage = (e: any) => { e.preventDefault(); e.stopPropagation(); restorePage(workspaceSlug, projectId, pageId); }; const handleDeletePage = (e: any) => { e.preventDefault(); e.stopPropagation(); setDeletePageModal(true); }; const handleEditPage = (e: any) => { e.preventDefault(); e.stopPropagation(); setCreateUpdatePageModal(true); }; if (!pageDetails) return null; const ownerDetails = getProjectMemberDetails(pageDetails.owned_by); const isCurrentUserOwner = pageDetails.owned_by === currentUser?.id; const userCanEdit = isCurrentUserOwner || (currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole)); const userCanChangeAccess = isCurrentUserOwner; const userCanArchive = isCurrentUserOwner || currentProjectRole === EUserProjectRoles.ADMIN; const userCanDelete = isCurrentUserOwner || currentProjectRole === EUserProjectRoles.ADMIN; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; return ( <> setCreateUpdatePageModal(false)} data={pageDetails} projectId={projectId} /> setDeletePageModal(false)} data={pageDetails} />
  • {pageDetails.name}

    {pageDetails.label_details.length > 0 && pageDetails.label_details.map((label) => (
    {label.name}
    ))}
    {pageDetails.archived_at ? (

    {renderFormattedTime(pageDetails.archived_at)}

    ) : (

    {renderFormattedTime(pageDetails.updated_at)}

    )} {isEditingAllowed && ( {pageDetails.is_favorite ? ( ) : ( )} )} {userCanChangeAccess && ( {pageDetails.access ? ( ) : ( )} )} {pageDetails.archived_at ? ( <> {userCanArchive && (
    Restore page
    )} {userCanDelete && isEditingAllowed && (
    Delete page
    )} ) : ( <> {userCanEdit && isEditingAllowed && (
    Edit page
    )} {userCanArchive && isEditingAllowed && (
    Archive page
    )} )}
    Copy page link
  • ); });