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"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; import { render24HourFormatTime, renderFormattedDate } from "helpers/date-time.helper"; // ui import { CustomMenu, Tooltip } from "@plane/ui"; // components import { CreateUpdatePageModal, DeletePageModal } from "components/pages"; // types import { IPage } from "types"; import { EUserWorkspaceRoles } from "constants/workspace"; export interface IPagesListItem { workspaceSlug: string; projectId: string; page: IPage; } export const PagesListItem: FC = observer((props) => { const { workspaceSlug, projectId, page } = props; // states const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false); const [deletePageModal, setDeletePageModal] = useState(false); // mobx store const { page: { archivePage, removeFromFavorites, addToFavorites, makePublic, makePrivate, restorePage }, user: { currentUser, currentProjectRole }, projectMember: { projectMembers }, } = useMobxStore(); // hooks const { setToastAlert } = useToast(); const handleCopyUrl = (e: any) => { e.preventDefault(); e.stopPropagation(); copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Page link copied to clipboard.", }); }); }; const handleAddToFavorites = (e: any) => { e.preventDefault(); e.stopPropagation(); addToFavorites(workspaceSlug, projectId, page.id) .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, page.id) .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, page.id); }; const handleMakePrivate = (e: any) => { e.preventDefault(); e.stopPropagation(); makePrivate(workspaceSlug, projectId, page.id); }; const handleArchivePage = (e: any) => { e.preventDefault(); e.stopPropagation(); archivePage(workspaceSlug, projectId, page.id); }; const handleRestorePage = (e: any) => { e.preventDefault(); e.stopPropagation(); restorePage(workspaceSlug, projectId, page.id); }; const handleDeletePage = (e: any) => { e.preventDefault(); e.stopPropagation(); setDeletePageModal(true); }; const handleEditPage = (e: any) => { e.preventDefault(); e.stopPropagation(); setCreateUpdatePageModal(true); }; const ownerDetails = projectMembers?.find((projectMember) => projectMember.member.id === page.owned_by)?.member; const isCurrentUserOwner = page.owned_by === currentUser?.id; const userCanEdit = isCurrentUserOwner || (currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole)); const userCanChangeAccess = isCurrentUserOwner; const userCanArchive = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN; const userCanDelete = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; return ( <> setCreateUpdatePageModal(false)} data={page} projectId={projectId} /> setDeletePageModal(false)} data={page} />
  • {page.name}

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

    {render24HourFormatTime(page.archived_at)}

    ) : (

    {render24HourFormatTime(page.updated_at)}

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