forked from github/plane
140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
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 { HeaderButton, Loader, EmptyState } 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<string | null>(null);
|
|
const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
|
|
|
|
return (
|
|
<AppLayout
|
|
breadcrumbs={
|
|
<Breadcrumbs>
|
|
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
|
|
</Breadcrumbs>
|
|
}
|
|
right={
|
|
<HeaderButton
|
|
Icon={PlusIcon}
|
|
label="Add Project"
|
|
onClick={() => {
|
|
const e = new KeyboardEvent("keydown", { key: "p" });
|
|
document.dispatchEvent(e);
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<JoinProjectModal
|
|
data={projects?.find((item) => 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);
|
|
});
|
|
}}
|
|
/>
|
|
<DeleteProjectModal
|
|
isOpen={!!deleteProject}
|
|
onClose={() => setDeleteProject(null)}
|
|
data={projects?.find((item) => item.id === deleteProject) ?? null}
|
|
/>
|
|
{projects ? (
|
|
<>
|
|
{projects.length === 0 ? (
|
|
<EmptyState
|
|
type="project"
|
|
title="Create New Project"
|
|
description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
|
|
imgURL={emptyProject}
|
|
/>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
|
{projects.map((project) => (
|
|
<SingleProjectCard
|
|
key={project.id}
|
|
project={project}
|
|
setToJoinProject={setSelectedProjectToJoin}
|
|
setDeleteProject={setDeleteProject}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Loader className="grid grid-cols-3 gap-4">
|
|
<Loader.Item height="100px" />
|
|
<Loader.Item height="100px" />
|
|
<Loader.Item height="100px" />
|
|
<Loader.Item height="100px" />
|
|
<Loader.Item height="100px" />
|
|
<Loader.Item height="100px" />
|
|
</Loader>
|
|
)}
|
|
</AppLayout>
|
|
);
|
|
};
|
|
|
|
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;
|