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"; import useUserAuth from "hooks/use-user-auth"; // layouts import { WorkspaceAuthorizationLayout } from "layouts/auth-layout"; // components import { JoinProjectModal } from "components/project/join-project-modal"; import { DeleteProjectModal, SingleProjectCard } from "components/project"; // ui import { EmptyState, Loader, PrimaryButton } from "components/ui"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // images import emptyProject from "public/empty-state/project.svg"; // types import type { NextPage } from "next"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; // helper import { truncateText } from "helpers/string.helper"; const ProjectsPage: NextPage = () => { // router const router = useRouter(); const { workspaceSlug } = router.query; const { user } = useUserAuth(); // 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); }} > Add Project } > 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} user={user} /> {projects ? (
{projects.length > 0 ? (
{projects.map((project) => ( ))}
) : ( , text: "New Project", onClick: () => { const e = new KeyboardEvent("keydown", { key: "p", }); document.dispatchEvent(e); }, }} /> )}
) : ( )}
); }; export default ProjectsPage;