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 { ModuleKanBanLayout, ModuleListLayout, ProjectViewAppliedFiltersRoot, ProjectViewCalendarLayout, ProjectViewEmptyState, ProjectViewGanttLayout, ProjectViewSpreadsheetLayout, } from "components/issues"; import { Spinner } from "@plane/ui"; export const ProjectViewLayoutRoot: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, viewId } = router.query; const { issueFilter: issueFilterStore, projectViews: projectViewsStore, projectViewIssues: projectViewIssuesStore, projectViewFilters: projectViewFiltersStore, } = useMobxStore(); useSWR( workspaceSlug && projectId && viewId ? `PROJECT_VIEW_FILTERS_AND_ISSUES_${viewId.toString()}` : null, async () => { if (workspaceSlug && projectId && viewId) { // fetching the project display filters and display properties await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString()); // fetching the view details await projectViewsStore.fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString()); // fetching the view issues await projectViewIssuesStore.fetchViewIssues( workspaceSlug.toString(), projectId.toString(), viewId.toString(), projectViewFiltersStore.storedFilters[viewId.toString()] ?? {} ); } } ); const activeLayout = issueFilterStore.userDisplayFilters.layout; const issueCount = projectViewIssuesStore.getIssuesCount; if (!projectViewIssuesStore.getIssues) return (
); return (
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( ) : (
{activeLayout === "list" ? ( ) : activeLayout === "kanban" ? ( ) : activeLayout === "calendar" ? ( ) : activeLayout === "gantt_chart" ? ( ) : activeLayout === "spreadsheet" ? ( ) : null}
)}
); });