plane/space/components/views/project-details.tsx

"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, 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
  );
  useSWR(
    workspaceSlug && projectId && !currentUser ? "WORKSPACE_PROJECT_CURRENT_USER" : null,
    workspaceSlug && projectId && !currentUser ? () => fetchCurrentUser() : null
  );

  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>
  );
});