import React, { useState, FC } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { Disclosure, Transition } from "@headlessui/react"; import useSWR from "swr"; // icons import { ChevronDownIcon, PlusIcon, Cog6ToothIcon, RectangleStackIcon, RectangleGroupIcon, } from "@heroicons/react/24/outline"; import { CyclesIcon } from "components/icons"; // hooks import useToast from "hooks/use-toast"; import useTheme from "hooks/use-theme"; // services import projectService from "services/project.service"; // components import { CreateProjectModal } from "components/project"; // ui import { CustomMenu, Loader } from "components/ui"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // fetch-keys import { PROJECTS_LIST } from "constants/fetch-keys"; const navigation = (workspaceSlug: string, projectId: string) => [ { name: "Issues", href: `/${workspaceSlug}/projects/${projectId}/issues`, icon: RectangleStackIcon, }, { name: "Cycles", href: `/${workspaceSlug}/projects/${projectId}/cycles`, icon: CyclesIcon, }, { name: "Modules", href: `/${workspaceSlug}/projects/${projectId}/modules`, icon: RectangleGroupIcon, }, { name: "Settings", href: `/${workspaceSlug}/projects/${projectId}/settings`, icon: Cog6ToothIcon, }, ]; export const ProjectSidebarList: FC = () => { // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // states const [isCreateProjectModal, setCreateProjectModal] = useState(false); // theme const { collapsed: sidebarCollapse } = useTheme(); // toast handler const { setToastAlert } = useToast(); // fetching projects list const { data: projects } = useSWR( workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null, () => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null) ); const handleCopyText = (projectId: string) => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Project link copied to clipboard.", }); }); }; return ( <>
{projects ? ( <> {projects.length > 0 ? ( projects.map((project) => ( {({ open }) => ( <>
{project.icon ? ( {String.fromCodePoint(parseInt(project.icon))} ) : ( {project?.name.charAt(0)} )} {!sidebarCollapse && ( {project?.name} )} {!sidebarCollapse && ( handleCopyText(project.id)}> Copy project link )}
{navigation(workspaceSlug as string, project?.id).map((item) => { const hi = "hi"; if (item.name === "Cycles" && !project.cycle_view) return; if (item.name === "Modules" && !project.module_view) return; return ( ); })} )}
)) ) : (
{!sidebarCollapse && (

You don{"'"}t have any project yet

)}
)} ) : (
)}
); };