import React, { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // services import projectService from "services/project.service"; // hooks import useProjects from "hooks/use-projects"; import useWorkspaces from "hooks/use-workspaces"; // layouts import AppLayout from "layouts/app-layout"; // components import { JoinProjectModal } from "components/project/join-project-modal"; import { ProjectCard } from "components/project"; import ConfirmProjectDeletion from "components/project/confirm-project-deletion"; // ui import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; // icons import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline"; // types import type { NextPage } from "next"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; const ProjectsPage: NextPage = () => { // router const router = useRouter(); const { workspaceSlug } = router.query; // context data const { activeWorkspace } = useWorkspaces(); const { projects } = useProjects(); // states const [deleteProject, setDeleteProject] = useState(null); const [selectedProjectToJoin, setSelectedProjectToJoin] = useState(null); return ( } right={ { const e = new KeyboardEvent("keydown", { key: "p" }); document.dispatchEvent(e); }} /> } > item.id === selectedProjectToJoin)} onClose={() => setSelectedProjectToJoin(null)} onJoin={async () => { const project = projects?.find((item) => item.id === selectedProjectToJoin); if (!project) return; await projectService .joinProject(workspaceSlug as string, { project_ids: [project.id], }) .then(async () => { mutate(PROJECT_MEMBERS(project.id)); setSelectedProjectToJoin(null); }) .catch(() => { setSelectedProjectToJoin(null); }); }} /> setDeleteProject(null)} data={projects?.find((item) => item.id === deleteProject) ?? null} /> {projects ? ( <> {projects.length === 0 ? (
Use
P
shortcut to create a new project } Icon={PlusIcon} action={() => { const e = new KeyboardEvent("keydown", { key: "p" }); document.dispatchEvent(e); }} />
) : (
{projects.map((item) => ( ))}
)} ) : ( )}
); }; export default ProjectsPage;