import { FC, useState } from "react"; import Link from "next/link"; import { observer } from "mobx-react-lite"; // icons import { AlertCircle, Archive, ArchiveRestoreIcon, FileText, Globe2, LinkIcon, Lock, Pencil, Star, Trash2, } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; import { useMobxStore } from "lib/mobx/store-provider"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; import { renderShortDate, render24HourFormatTime, renderLongDateFormat } 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); // store const { page: { archivePage, removeFromFavorites, addToFavorites, makePublic, makePrivate, restorePage }, user: { 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 userCanEdit = !!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)}

    )} {!page.archived_at && userCanEdit && ( {page.is_favorite ? ( ) : ( )} )} {!page.archived_at && userCanEdit && ( {page.access ? ( ) : ( )} )} projectMember.member.id === page.created_by)?.member .display_name ?? "" } on ${renderLongDateFormat(`${page.created_at}`)}`} > {page.archived_at ? ( {userCanEdit && ( <>
    Restore page
    Delete page
    )}
    Copy page link
    ) : ( {userCanEdit && ( <>
    Edit page
    Archive page
    )}
    Copy page link
    )}
  • ); });