import React, { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // lib import { requiredAuth } from "lib/auth"; // 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 { DeleteProjectModal, SingleProjectCard } from "components/project"; // ui import { Loader, EmptyState, PrimaryButton } from "components/ui"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // types import type { GetServerSidePropsContext, NextPage } from "next"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; // image import emptyProject from "public/empty-state/empty-project.svg"; 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); }} > 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} /> {projects ? ( <> {projects.length === 0 ? ( ) : (
{projects.map((project) => ( ))}
)} ) : ( )}
); }; export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { const user = await requiredAuth(ctx.req?.headers.cookie); const redirectAfterSignIn = ctx.resolvedUrl; if (!user) { return { redirect: { destination: `/signin?next=${redirectAfterSignIn}`, permanent: false, }, }; } return { props: { user, }, }; }; export default ProjectsPage;