forked from github/plane
119 lines
4.7 KiB
TypeScript
119 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useEffect } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
import Image from "next/image";
|
|
import { useSearchParams } from "next/navigation";
|
|
import useSWR from "swr";
|
|
// components
|
|
import { IssueCalendarView } from "@/components/issues/board-views/calendar";
|
|
import { IssueGanttView } from "@/components/issues/board-views/gantt";
|
|
import { IssueKanbanView } from "@/components/issues/board-views/kanban";
|
|
import { IssueListView } from "@/components/issues/board-views/list";
|
|
import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadsheet";
|
|
import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
|
|
import { IssuePeekOverview } from "@/components/issues/peek-overview";
|
|
// mobx store
|
|
import { useIssue, useUser, useIssueDetails, useIssueFilter, useProject } from "@/hooks/store";
|
|
// assets
|
|
import SomethingWentWrongImage from "public/something-went-wrong.svg";
|
|
|
|
type ProjectDetailsViewProps = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
peekId: string | undefined;
|
|
};
|
|
|
|
export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props) => {
|
|
// router
|
|
const searchParams = useSearchParams();
|
|
// query params
|
|
const states = searchParams.get("states") || undefined;
|
|
const priority = searchParams.get("priority") || undefined;
|
|
const labels = searchParams.get("labels") || undefined;
|
|
|
|
const { workspaceSlug, projectId, peekId } = props;
|
|
// hooks
|
|
const { fetchProjectSettings } = useProject();
|
|
const { issueFilters } = useIssueFilter();
|
|
const { loader, issues, error } = useIssue();
|
|
const { fetchPublicIssues } = useIssue();
|
|
const issueDetailStore = useIssueDetails();
|
|
const { data: currentUser, fetchCurrentUser } = useUser();
|
|
|
|
useSWR(
|
|
workspaceSlug && projectId ? "WORKSPACE_PROJECT_SETTINGS" : null,
|
|
workspaceSlug && projectId ? () => fetchProjectSettings(workspaceSlug, projectId) : null
|
|
);
|
|
useSWR(
|
|
(workspaceSlug && projectId) || states || priority || labels ? "WORKSPACE_PROJECT_PUBLIC_ISSUES" : null,
|
|
(workspaceSlug && projectId) || states || priority || labels
|
|
? () => fetchPublicIssues(workspaceSlug, projectId, { states, priority, labels })
|
|
: null
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!currentUser) {
|
|
fetchCurrentUser();
|
|
}
|
|
}, [currentUser, fetchCurrentUser]);
|
|
|
|
useEffect(() => {
|
|
if (peekId && workspaceSlug && projectId) {
|
|
issueDetailStore.setPeekId(peekId.toString());
|
|
}
|
|
}, [peekId, issueDetailStore, projectId, workspaceSlug]);
|
|
|
|
// derived values
|
|
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
|
|
|
return (
|
|
<div className="relative h-full w-full overflow-hidden">
|
|
{workspaceSlug && projectId && peekId && (
|
|
<IssuePeekOverview workspaceSlug={workspaceSlug} projectId={projectId} peekId={peekId} />
|
|
)}
|
|
|
|
{loader && !issues ? (
|
|
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
|
|
) : (
|
|
<>
|
|
{error ? (
|
|
<div className="grid h-full w-full place-items-center p-6">
|
|
<div className="text-center">
|
|
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
|
|
<div className="grid h-32 w-32 place-items-center">
|
|
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
|
|
</div>
|
|
</div>
|
|
<h1 className="mt-12 text-3xl font-semibold">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>
|
|
) : (
|
|
activeLayout && (
|
|
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
|
{/* applied filters */}
|
|
<IssueAppliedFilters workspaceSlug={workspaceSlug} projectId={projectId} />
|
|
|
|
{activeLayout === "list" && (
|
|
<div className="relative h-full w-full overflow-y-auto">
|
|
<IssueListView workspaceSlug={workspaceSlug} projectId={projectId} />
|
|
</div>
|
|
)}
|
|
{activeLayout === "kanban" && (
|
|
<div className="relative mx-auto h-full w-full p-5">
|
|
<IssueKanbanView workspaceSlug={workspaceSlug} projectId={projectId} />
|
|
</div>
|
|
)}
|
|
{activeLayout === "calendar" && <IssueCalendarView />}
|
|
{activeLayout === "spreadsheet" && <IssueSpreadsheetView />}
|
|
{activeLayout === "gantt" && <IssueGanttView />}
|
|
</div>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|