import React from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { ProjectViewAppliedFiltersRoot, ProjectViewCalendarLayout, ProjectViewGanttLayout, ProjectViewKanBanLayout, ProjectViewListLayout, ProjectViewSpreadsheetLayout, } from "components/issues"; import { Spinner } from "@plane/ui"; export const ProjectViewLayoutRoot: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, viewId } = router.query as { workspaceSlug: string; projectId: string; viewId?: string; }; const { viewIssues: { loader, getIssues, fetchIssues }, viewIssuesFilter: { issueFilters, fetchFilters }, } = useMobxStore(); useSWR(workspaceSlug && projectId && viewId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => { if (workspaceSlug && projectId && viewId) { await fetchFilters(workspaceSlug, projectId, viewId); await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader"); } }); const activeLayout = issueFilters?.displayFilters?.layout; return (
{loader === "init-loader" ? (
) : ( <>
{activeLayout === "list" ? ( ) : activeLayout === "kanban" ? ( ) : activeLayout === "calendar" ? ( ) : activeLayout === "gantt_chart" ? ( ) : activeLayout === "spreadsheet" ? ( ) : null}
)}
); });