plane/web/pages/[workspaceSlug]/projects/index.tsx
sriram veeraghanta 1e152c666c
New Directory Setup (#2065)
* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-09-03 18:50:30 +05:30

175 lines
5.8 KiB
TypeScript

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, Icon, 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";
// types
import { IProject } from "types";
const ProjectsPage: NextPage = () => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const [query, setQuery] = useState("");
const { user } = useUserAuth();
// context data
const { activeWorkspace } = useWorkspaces();
const { projects, mutateProjects } = useProjects();
// states
const [deleteProject, setDeleteProject] = useState<string | null>(null);
const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
const filteredProjectList =
query === ""
? projects
: projects?.filter(
(project) =>
project.name.toLowerCase().includes(query.toLowerCase()) ||
project.identifier.toLowerCase().includes(query.toLowerCase())
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Projects`}
unshrinkTitle={false}
/>
</Breadcrumbs>
}
right={
<div className="flex items-center gap-3">
<div className="flex w-full gap-1 items-center justify-start rounded-md px-2 py-1.5 border border-custom-border-300 bg-custom-background-90">
<Icon iconName="search" className="!text-xl !leading-5 !text-custom-sidebar-text-400" />
<input
className="w-full border-none bg-transparent text-xs text-custom-text-200 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
/>
</div>
<PrimaryButton
className="flex items-center gap-2 flex-shrink-0"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Project
</PrimaryButton>
</div>
}
>
<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));
mutateProjects<IProject[]>(
(prevData) =>
(prevData ?? []).map((p) => ({
...p,
is_member: p.id === project.id ? true : p.is_member,
})),
false
);
setSelectedProjectToJoin(null);
})
.catch(() => {
setSelectedProjectToJoin(null);
});
}}
/>
<DeleteProjectModal
isOpen={!!deleteProject}
onClose={() => setDeleteProject(null)}
data={projects?.find((item) => item.id === deleteProject) ?? null}
user={user}
/>
{filteredProjectList ? (
<div className="h-full w-full overflow-hidden">
{filteredProjectList.length > 0 ? (
<div className="h-full p-8 overflow-y-auto">
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{filteredProjectList.map((project) => (
<SingleProjectCard
key={project.id}
project={project}
setToJoinProject={setSelectedProjectToJoin}
setDeleteProject={setDeleteProject}
/>
))}
</div>
</div>
) : (
<EmptyState
image={emptyProject}
title="No projects yet"
description="Get started by creating your first project"
primaryButton={{
icon: <PlusIcon className="h-4 w-4" />,
text: "New Project",
onClick: () => {
const e = new KeyboardEvent("keydown", {
key: "p",
});
document.dispatchEvent(e);
},
}}
/>
)}
</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>
)}
</WorkspaceAuthorizationLayout>
);
};
export default ProjectsPage;