plane/space/components/views/project-details.tsx
2023-09-04 17:27:29 +05:30

99 lines
3.6 KiB
TypeScript

import { useEffect } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
// components
import { IssueListView } from "components/issues/board-views/list";
import { IssueKanbanView } from "components/issues/board-views/kanban";
import { IssueCalendarView } from "components/issues/board-views/calendar";
import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
import { IssueGanttView } from "components/issues/board-views/gantt";
import { IssuePeekOverview } from "components/issues/peek-overview";
// mobx store
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
// assets
import SomethingWentWrongImage from "public/something-went-wrong.svg";
export const ProjectDetailsView = observer(() => {
const router = useRouter();
const { workspace_slug, project_slug, states, labels, priorities, board, peekId } = router.query;
const {
issue: issueStore,
project: projectStore,
issueDetails: issueDetailStore,
user: userStore,
}: RootStore = useMobxStore();
useEffect(() => {
if (!userStore.currentUser) {
userStore.fetchCurrentUser();
}
}, [userStore]);
useEffect(() => {
if (workspace_slug && project_slug) {
const params = {
state: states || null,
labels: labels || null,
priority: priorities || null,
};
issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
}
}, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
useEffect(() => {
if (peekId && workspace_slug && project_slug) {
issueDetailStore.setPeekId(peekId.toString());
}
}, [peekId, issueDetailStore, project_slug, workspace_slug]);
return (
<div className="relative w-full h-full overflow-hidden">
{workspace_slug && <IssuePeekOverview />}
{issueStore?.loader && !issueStore.issues ? (
<div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
) : (
<>
{issueStore?.error ? (
<div className="h-full w-full grid place-items-center p-6">
<div className="text-center">
<div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
<div className="h-32 w-32 grid place-items-center">
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
</div>
</div>
<h1 className="text-3xl font-semibold mt-12">Oops! Something went wrong.</h1>
<p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
</div>
</div>
) : (
projectStore?.activeBoard && (
<>
{projectStore?.activeBoard === "list" && (
<div className="relative w-full h-full overflow-y-auto">
<IssueListView />
</div>
)}
{projectStore?.activeBoard === "kanban" && (
<div className="relative w-full h-full mx-auto p-5">
<IssueKanbanView />
</div>
)}
{projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
{projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
{projectStore?.activeBoard === "gantt" && <IssueGanttView />}
</>
)
)}
</>
)}
</div>
);
});