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) ); return ( <>
{projects ? ( <> {projects.length > 0 ? ( projects.map((project) => ( {({ open }) => ( <>
{project.icon ? ( {String.fromCodePoint(parseInt(project.icon))} ) : ( {project?.name.charAt(0)} )} {!sidebarCollapse && ( {project?.name} )} {!sidebarCollapse && ( copyTextToClipboard( `https://app.plane.so/${workspaceSlug}/projects/${project?.id}/issues/` ).then(() => { setToastAlert({ title: "Link Copied", message: "Link copied to clipboard", type: "success", }); }) } > Copy link )}
{navigation(workspaceSlug as string, project?.id).map((item) => ( ))} )}
)) ) : (
{!sidebarCollapse && (

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

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