import React, { useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; import { useRouter } from "next/router"; import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Pencil, Trash2, UserPlus } from "lucide-react"; // types import type { IProject } from "@plane/types"; // ui import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast, ContextMenu, TContextMenuItem, } from "@plane/ui"; // components import { FavoriteStar } from "@/components/core"; import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project"; // constants import { EUserProjectRoles } from "@/constants/project"; // helpers import { cn } from "@/helpers/common.helper"; import { renderFormattedDate } from "@/helpers/date-time.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useProject } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { project: IProject; }; export const ProjectCard: React.FC = observer((props) => { const { project } = props; // states const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false); const [joinProjectModalOpen, setJoinProjectModal] = useState(false); const [restoreProject, setRestoreProject] = useState(false); // refs const projectCardRef = useRef(null); // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { addProjectToFavorites, removeProjectFromFavorites } = useProject(); // hooks const { isMobile } = usePlatformOS(); project.member_role; // derived values const projectMembersIds = project.members?.map((member) => member.member_id); // auth const isOwner = project.member_role === EUserProjectRoles.ADMIN; const isMember = project.member_role === EUserProjectRoles.MEMBER; // archive const isArchived = !!project.archived_at; const handleAddToFavorites = () => { if (!workspaceSlug) return; const addToFavoritePromise = addProjectToFavorites(workspaceSlug.toString(), project.id); setPromiseToast(addToFavoritePromise, { loading: "Adding project to favorites...", success: { title: "Success!", message: () => "Project added to favorites.", }, error: { title: "Error!", message: () => "Couldn't add the project to favorites. Please try again.", }, }); }; const handleRemoveFromFavorites = () => { if (!workspaceSlug) return; const removeFromFavoritePromise = removeProjectFromFavorites(workspaceSlug.toString(), project.id); setPromiseToast(removeFromFavoritePromise, { loading: "Removing project from favorites...", success: { title: "Success!", message: () => "Project removed from favorites.", }, error: { title: "Error!", message: () => "Couldn't remove the project from favorites. Please try again.", }, }); }; const projectLink = `${workspaceSlug}/projects/${project.id}/issues`; const handleCopyText = () => copyUrlToClipboard(projectLink).then(() => setToast({ type: TOAST_TYPE.SUCCESS, title: "Link Copied!", message: "Project link copied to clipboard.", }) ); const handleOpenInNewTab = () => window.open(`/${projectLink}`, "_blank"); const MENU_ITEMS: TContextMenuItem[] = [ { key: "edit", action: () => router.push(`/${workspaceSlug}/projects/${project.id}/settings`), title: "Edit", icon: Pencil, shouldRender: !isArchived && (isOwner || isMember), }, { key: "join", action: () => setJoinProjectModal(true), title: "Join", icon: UserPlus, shouldRender: !project.is_member && !isArchived, }, { key: "open-new-tab", action: handleOpenInNewTab, title: "Open in new tab", icon: ExternalLink, shouldRender: project.is_member, }, { key: "copy-link", action: handleCopyText, title: "Copy link", icon: LinkIcon, shouldRender: true, }, { key: "restore", action: () => setRestoreProject(true), title: "Restore", icon: ArchiveRestoreIcon, shouldRender: isArchived && isOwner, }, { key: "delete", action: () => setDeleteProjectModal(true), title: "Delete", icon: Trash2, shouldRender: isArchived && isOwner, }, ]; return ( <> {/* Delete Project Modal */} setDeleteProjectModal(false)} /> {/* Join Project Modal */} {workspaceSlug && ( setJoinProjectModal(false)} /> )} {/* Restore project modal */} {workspaceSlug && project && ( setRestoreProject(false)} archive={false} /> )} { if (!project.is_member || isArchived) { e.preventDefault(); e.stopPropagation(); if (!isArchived) setJoinProjectModal(true); } }} className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100" >
{project.name}

{project.name}

{project.identifier}

{project.network === 0 && }
{!isArchived && (
{ e.preventDefault(); e.stopPropagation(); if (project.is_favorite) handleRemoveFromFavorites(); else handleAddToFavorites(); }} selected={project.is_favorite} />
)}

{project.description && project.description.trim() !== "" ? project.description : `Created on ${renderFormattedDate(project.created_at)}`}

0 ? `${project.members.length} Members` : "No Member" } position="top" > {projectMembersIds && projectMembersIds.length > 0 ? (
{projectMembersIds.map((memberId) => { const member = project.members?.find((m) => m.member_id === memberId); if (!member) return null; return ( ); })}
) : ( No Member Yet )}
{isArchived &&
Archived
}
{isArchived ? ( isOwner && (
{ e.preventDefault(); e.stopPropagation(); setRestoreProject(true); }} >
Restore
{ e.preventDefault(); e.stopPropagation(); setDeleteProjectModal(true); }} >
) ) : ( <> {project.is_member && (isOwner || isMember ? ( { e.stopPropagation(); }} href={`/${workspaceSlug}/projects/${project.id}/settings`} > ) : ( Joined ))} {!project.is_member && (
)} )}
); });