import React, { useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; // icons import { LinkIcon, Lock, Pencil, Star } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; // ui import { Button, Tooltip } from "@plane/ui"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import type { IProject } from "types"; // components import { DeleteProjectModal, JoinProjectModal } from "components/project"; import { AssigneesList } from "components/ui"; export type ProjectCardProps = { project: IProject; }; export const ProjectCard: React.FC = observer((props) => { const { project } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // toast const { setToastAlert } = useToast(); // states const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false); const [joinProjectModalOpen, setJoinProjectModal] = useState(false); const { project: projectStore }: RootStore = useMobxStore(); const isOwner = project.member_role === 20; const isMember = project.member_role === 15; const handleAddToFavorites = () => { if (!workspaceSlug) return; projectStore.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; projectStore.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 */}
{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.length > 0 ? (
) : ( No Member Yet )}
{(isOwner || isMember) && ( )} {!project.is_member ? (
) : null}
); });