import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd"; import { Disclosure, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // icons import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; import { ArchiveOutlined, ArticleOutlined, ContrastOutlined, DatasetOutlined, ExpandMoreOutlined, FilterNoneOutlined, PhotoFilterOutlined, SettingsOutlined, } from "@mui/icons-material"; // hooks import useToast from "hooks/use-toast"; // ui import { CustomMenu, Icon, Tooltip } from "components/ui"; import { PenSquare } from "lucide-react"; // helpers import { renderEmoji } from "helpers/emoji.helper"; // types import { IProject } from "types"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; // components import { LeaveProjectModal, DeleteProjectModal } from "components/project"; type Props = { project: IProject; sidebarCollapse: boolean; provided?: DraggableProvided; snapshot?: DraggableStateSnapshot; 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 ProjectSidebarListItem: React.FC = observer((props) => { const { project, sidebarCollapse, provided, snapshot, handleCopyText, shortContextMenu = false } = props; // store const { projectPublish, project: projectStore }: RootStore = useMobxStore(); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // toast const { setToastAlert } = useToast(); // states const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false); const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false); const isAdmin = project.member_role === 20; const isViewerOrGuest = project.member_role === 10 || project.member_role === 5; 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) 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 handleLeaveProject = () => { setLeaveProjectModal(true); }; const handleLeaveProjectModalClose = () => { setLeaveProjectModal(false); }; const handleDeleteProjectClick = () => { setDeleteProjectModal(true); }; const handleDeleteProjectModalClose = () => { setDeleteProjectModal(false); router.push(`/${workspaceSlug}/projects`); }; 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 && isAdmin && ( Delete project )} {!project.is_favorite && ( Add to favorites )} {project.is_favorite && ( Remove from favorites )} Copy project link {/* publish project settings */} {isAdmin && ( projectPublish.handleProjectModal(project?.id)}>
{project.is_deployed ? "Publish settings" : "Publish"}
)} {project.archive_in > 0 && ( router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)} >
Archived Issues
)} router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)} >
Draft Issues
router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)} >
Settings
{/* leave project */} {isViewerOrGuest && (
Leave Project
)}
)}
{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}
); })}
)}
); });