import React, { useState, FC } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // hooks import useToast from "hooks/use-toast"; import useTheme from "hooks/use-theme"; import useUserAuth from "hooks/use-user-auth"; // services import projectService from "services/project.service"; // components import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project"; // ui import { Loader } from "components/ui"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import { IFavoriteProject, IProject } from "types"; // fetch-keys import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys"; export const ProjectSidebarList: FC = () => { const [deleteProjectModal, setDeleteProjectModal] = useState(false); const [projectToDelete, setProjectToDelete] = useState(null); // router const router = useRouter(); const { workspaceSlug } = router.query; const { user } = useUserAuth(); // states const [isCreateProjectModal, setCreateProjectModal] = useState(false); // theme const { collapsed: sidebarCollapse } = useTheme(); // toast handler const { setToastAlert } = useToast(); const { data: favoriteProjects } = useSWR( workspaceSlug ? FAVORITE_PROJECTS_LIST(workspaceSlug.toString()) : null, () => (workspaceSlug ? projectService.getFavoriteProjects(workspaceSlug.toString()) : null) ); const { data: projects } = useSWR( workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null, () => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null) ); const normalProjects = projects?.filter((p) => !p.is_favorite) ?? []; const handleAddToFavorites = (project: IProject) => { if (!workspaceSlug) return; projectService .addProjectToFavorites(workspaceSlug as string, { project: project.id, }) .then(() => { mutate( PROJECTS_LIST(workspaceSlug as string), (prevData) => (prevData ?? []).map((p) => ({ ...p, is_favorite: p.id === project.id ? true : p.is_favorite, })), false ); mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string)); setToastAlert({ type: "success", title: "Success!", message: "Successfully added the project to favorites.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }); }); }; const handleRemoveFromFavorites = (project: IProject) => { if (!workspaceSlug) return; projectService .removeProjectFromFavorites(workspaceSlug as string, project.id) .then(() => { mutate( PROJECTS_LIST(workspaceSlug as string), (prevData) => (prevData ?? []).map((p) => ({ ...p, is_favorite: p.id === project.id ? false : p.is_favorite, })), false ); mutate( FAVORITE_PROJECTS_LIST(workspaceSlug as string), (prevData) => (prevData ?? []).filter((p) => p.project !== project.id), false ); setToastAlert({ type: "success", title: "Success!", message: "Successfully removed the project from favorites.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Couldn't remove the project from favorites. Please try again.", }); }); }; const handleDeleteProject = (project: IProject) => { setProjectToDelete(project); setDeleteProjectModal(true); }; 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 ( <> setDeleteProjectModal(false)} data={projectToDelete} user={user} />
{favoriteProjects && favoriteProjects.length > 0 && (
{!sidebarCollapse &&
Favorites
} {favoriteProjects.map((favoriteProject) => { const project = favoriteProject.project_detail; return ( handleDeleteProject(project)} handleCopyText={() => handleCopyText(project.id)} handleRemoveFromFavorites={() => handleRemoveFromFavorites(project)} /> ); })}
)}
{!sidebarCollapse &&
Projects
} {projects ? ( <> {normalProjects.length > 0 ? ( normalProjects.map((project) => ( handleDeleteProject(project)} handleCopyText={() => handleCopyText(project.id)} handleAddToFavorites={() => handleAddToFavorites(project)} /> )) ) : (
{!sidebarCollapse && (

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

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