import Link from "next/link"; import { useRouter } from "next/router"; import { mutate } from "swr"; // react-beautiful-dnd import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd"; // headless ui import { Disclosure, Transition } from "@headlessui/react"; // services import projectService from "services/project.service"; // hooks import useToast from "hooks/use-toast"; // ui import { CustomMenu, Tooltip } from "components/ui"; // icons import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; import { ArchiveOutlined, ArticleOutlined, ContrastOutlined, DatasetOutlined, ExpandMoreOutlined, FilterNoneOutlined, PhotoFilterOutlined, SettingsOutlined, } from "@mui/icons-material"; // helpers import { truncateText } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import { IProject } from "types"; // fetch-keys import { PROJECTS_LIST } from "constants/fetch-keys"; type Props = { project: IProject; sidebarCollapse: boolean; provided?: DraggableProvided; snapshot?: DraggableStateSnapshot; handleDeleteProject: () => void; handleCopyText: () => void; shortContextMenu?: boolean; }; const navigation = (workspaceSlug: string, projectId: string) => [ { name: "Issues", href: `/${workspaceSlug}/projects/${projectId}/issues`, Icon: FilterNoneOutlined, }, { name: "Cycles", href: `/${workspaceSlug}/projects/${projectId}/cycles`, Icon: ContrastOutlined, }, { name: "Modules", href: `/${workspaceSlug}/projects/${projectId}/modules`, Icon: DatasetOutlined, }, { name: "Views", href: `/${workspaceSlug}/projects/${projectId}/views`, Icon: PhotoFilterOutlined, }, { name: "Pages", href: `/${workspaceSlug}/projects/${projectId}/pages`, Icon: ArticleOutlined, }, { name: "Settings", href: `/${workspaceSlug}/projects/${projectId}/settings`, Icon: SettingsOutlined, }, ]; export const SingleSidebarProject: React.FC = ({ project, sidebarCollapse, provided, snapshot, handleDeleteProject, handleCopyText, shortContextMenu = false, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); 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, }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }) ); }; const handleRemoveFromFavorites = () => { if (!workspaceSlug) 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).catch(() => setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }) ); }; return ( {({ open }) => ( <>
{provided && ( )}
{project.emoji ? ( {renderEmoji(project.emoji)} ) : project.icon_prop ? (
{renderEmoji(project.icon_prop)}
) : ( {project?.name.charAt(0)} )} {!sidebarCollapse && (

{project.name}

)}
{!sidebarCollapse && ( )}
{!sidebarCollapse && ( {!shortContextMenu && ( Delete project )} {!project.is_favorite && ( Add to favorites )} {project.is_favorite && ( Remove from favorites )} Copy project link {project.archive_in > 0 && ( router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`) } >
Archived Issues
)}
)}
{navigation(workspaceSlug as string, project?.id).map((item) => { if ( (item.name === "Cycles" && !project.cycle_view) || (item.name === "Modules" && !project.module_view) || (item.name === "Views" && !project.issue_views_view) || (item.name === "Pages" && !project.page_view) ) return; return (
{!sidebarCollapse && item.name}
); })}
)}
); };