import React, { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { LinkIcon, Lock, Pencil, Star } from "lucide-react"; import Link from "next/link"; // hooks import { useProject } from "hooks/store"; import useToast from "hooks/use-toast"; // components import { DeleteProjectModal, JoinProjectModal } from "components/project"; // ui import { Avatar, AvatarGroup, Button, Tooltip } from "@plane/ui"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import type { IProject } from "@plane/types"; // constants import { EUserProjectRoles } from "constants/project"; export type ProjectCardProps = { project: IProject; }; export const ProjectCard: React.FC = observer((props) => { const { project } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // toast alert const { setToastAlert } = useToast(); // states const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false); const [joinProjectModalOpen, setJoinProjectModal] = useState(false); // store hooks const { addProjectToFavorites, removeProjectFromFavorites } = useProject(); project.member_role; const isOwner = project.member_role === EUserProjectRoles.ADMIN; const isMember = project.member_role === EUserProjectRoles.MEMBER; const handleAddToFavorites = () => { if (!workspaceSlug) return; addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }); }); }; const handleRemoveFromFavorites = () => { if (!workspaceSlug || !project) return; removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }); }); }; const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Project link copied to clipboard.", }); }); }; const projectMembersIds = project.members?.map((member) => member.member_id); return ( <> {/* Delete Project Modal */} setDeleteProjectModal(false)} /> {/* Join Project Modal */} {workspaceSlug && ( setJoinProjectModal(false)} /> )} {/* Card Information */}
{ if (project.is_member) router.push(`/${workspaceSlug?.toString()}/projects/${project.id}/issues`); else setJoinProjectModal(true); }} className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100" >
{project.name}
{project.emoji ? renderEmoji(project.emoji) : project.icon_prop ? renderEmoji(project.icon_prop) : null}

{project.name}

{project.identifier}

{project.network === 0 && }

{project.description}

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 )}
{(isOwner || isMember) && ( { e.stopPropagation(); }} href={`/${workspaceSlug}/projects/${project.id}/settings`} > )} {!project.is_member ? (
) : null}
); });