import React from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { mutate } from "swr"; // services import projectService from "services/project.service"; // hooks import useToast from "hooks/use-toast"; // ui import { CustomMenu, Tooltip } from "components/ui"; // icons import { CalendarDaysIcon, LinkIcon, PencilIcon, PlusIcon, StarIcon, TrashIcon, } from "@heroicons/react/24/outline"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import type { IProject } from "types"; // fetch-keys import { PROJECTS_LIST } from "constants/fetch-keys"; export type ProjectCardProps = { project: IProject; setToJoinProject: (id: string | null) => void; setDeleteProject: (id: string | null) => void; }; export const SingleProjectCard: React.FC = ({ project, setToJoinProject, setDeleteProject, }) => { const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const isOwner = project.member_role === 20; const isMember = project.member_role === 15; const handleAddToFavorites = () => { if (!workspaceSlug) return; mutate( PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }), (prevData) => (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)), false ); projectService .addProjectToFavorites(workspaceSlug as string, { project: project.id, }) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Successfully added the project to favorites.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }); }); }; const handleRemoveFromFavorites = () => { if (!workspaceSlug || !project) return; mutate( PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }), (prevData) => (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)), false ); projectService .removeProjectFromFavorites(workspaceSlug as string, project.id) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Successfully removed the project from favorites.", }); }) .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.", }); }); }; return ( <>
{project.name}
{!project.is_member ? ( ) : ( Joined )} {project.is_favorite && ( )}

{project.name}

{project.emoji ? ( {renderEmoji(project.emoji)} ) : project.icon_prop ? ( renderEmoji(project.icon_prop) ) : null}

{truncateText(project.description ?? "", 100)}

{renderShortDateWithYearFormat(project.created_at)}
{project.is_member ? (
{(isOwner || isMember) && ( )} {isOwner && ( setDeleteProject(project.id)}> Delete project )} {project.is_favorite ? ( Remove from favorites ) : ( Add to favorites )} Copy project link
) : null}
); };