import React, { useState, FC, useRef, useEffect } from "react"; import { useRouter } from "next/router"; import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd"; import { Disclosure, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // hooks import useToast from "hooks/use-toast"; // components import { CreateProjectModal, ProjectSidebarListItem } from "components/project"; // icons import { ChevronDown, ChevronRight, Plus } from "lucide-react"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; import { orderArrayBy } from "helpers/array.helper"; // types import { IProject } from "types"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; export const ProjectSidebarList: FC = observer(() => { // states const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false); const [isProjectModalOpen, setIsProjectModalOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); // scroll animation state // refs const containerRef = useRef(null); const { theme: { sidebarCollapsed }, project: { joinedProjects, favoriteProjects, orderProjectsWithSortOrder, updateProjectView }, commandPalette: { toggleCreateProjectModal }, trackEvent: { setTrackElement }, user: { currentWorkspaceRole }, } = useMobxStore(); // router const router = useRouter(); const { workspaceSlug } = router.query; // toast const { setToastAlert } = useToast(); const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; const orderedJoinedProjects: IProject[] | undefined = joinedProjects ? orderArrayBy(joinedProjects, "sort_order", "ascending") : undefined; const orderedFavProjects: IProject[] | undefined = favoriteProjects ? orderArrayBy(favoriteProjects, "sort_order", "ascending") : undefined; const handleCopyText = (projectId: string) => { copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Project link copied to clipboard.", }); }); }; const onDragEnd = async (result: DropResult) => { const { source, destination, draggableId } = result; if (!destination || !workspaceSlug) return; if (source.index === destination.index) return; const updatedSortOrder = orderProjectsWithSortOrder(source.index, destination.index, draggableId); updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder }).catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again.", }); }); }; const isCollapsed = sidebarCollapsed || false; /** * Implementing scroll animation styles based on the scroll length of the container */ useEffect(() => { const handleScroll = () => { if (containerRef.current) { const scrollTop = containerRef.current.scrollTop; setIsScrolled(scrollTop > 0); } }; const currentContainerRef = containerRef.current; if (currentContainerRef) { currentContainerRef.addEventListener("scroll", handleScroll); } return () => { if (currentContainerRef) { currentContainerRef.removeEventListener("scroll", handleScroll); } }; }, []); return ( <> {workspaceSlug && ( { setIsProjectModalOpen(false); }} setToFavorite={isFavoriteProjectCreate} workspaceSlug={workspaceSlug.toString()} /> )}
{(provided) => (
{orderedFavProjects && orderedFavProjects.length > 0 && ( {({ open }) => ( <> {!isCollapsed && (
Favorites {open ? ( ) : ( )} {isAuthorizedUser && ( )}
)} {orderedFavProjects.map((project, index) => ( {(provided, snapshot) => (
handleCopyText(project.id)} shortContextMenu />
)}
))}
{provided.placeholder} )}
)}
)}
{(provided) => (
{orderedJoinedProjects && orderedJoinedProjects.length > 0 && ( {({ open }) => ( <> {!isCollapsed && (
Projects {open ? ( ) : ( )} {isAuthorizedUser && ( )}
)} {orderedJoinedProjects.map((project, index) => ( {(provided, snapshot) => (
handleCopyText(project.id)} />
)}
))}
{provided.placeholder} )}
)}
)}
{isAuthorizedUser && joinedProjects && joinedProjects.length === 0 && ( )}
); });