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 { ModuleAppliedFiltersRoot, ModuleCalendarLayout, ModuleEmptyState, ModuleGanttLayout, ModuleKanBanLayout, ModuleListLayout, ModuleSpreadsheetLayout, } from "components/issues"; type Props = { openIssuesListModal: () => void; }; export const ModuleLayoutRoot: React.FC = observer(({ openIssuesListModal }) => { const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query as { workspaceSlug: string; projectId: string; moduleId: string; }; const { issueFilter: issueFilterStore, moduleIssue: moduleIssueStore, moduleFilter: moduleIssueFilterStore, } = useMobxStore(); useSWR( workspaceSlug && projectId && moduleId ? `MODULE_FILTERS_AND_ISSUES_${moduleId.toString()}` : null, async () => { if (workspaceSlug && projectId && moduleId) { // fetching the project display filters and display properties await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId); // fetching the module filters await moduleIssueFilterStore.fetchModuleFilters(workspaceSlug, projectId, moduleId); // fetching the module issues await moduleIssueStore.fetchIssues(workspaceSlug, projectId, moduleId); } } ); const activeLayout = issueFilterStore.userDisplayFilters.layout; const issueCount = moduleIssueStore.getIssuesCount; return (
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( ) : (
{activeLayout === "list" ? ( ) : activeLayout === "kanban" ? ( ) : activeLayout === "calendar" ? ( ) : activeLayout === "gantt_chart" ? ( ) : activeLayout === "spreadsheet" ? ( ) : null}
)}
); });