import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { useTheme } from "next-themes"; // hooks import { useApplication, useModule, useUser } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; // components import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules"; import { EmptyState, getEmptyStateImagePath } from "components/empty-state"; // ui import { Loader, Spinner } from "@plane/ui"; // constants import { EUserProjectRoles } from "constants/project"; export const ModulesListView: React.FC = observer(() => { // router const router = useRouter(); const { workspaceSlug, projectId, peekModule } = router.query; // theme const { resolvedTheme } = useTheme(); // store hooks const { commandPalette: commandPaletteStore } = useApplication(); const { membership: { currentProjectRole }, currentUser, } = useUser(); const { projectModuleIds, loader } = useModule(); const { storedValue: modulesView } = useLocalStorage("modules_view", "grid"); const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light"; const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "modules", isLightMode); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; if (loader) return (
); if (!projectModuleIds) return ( ); return ( <> {projectModuleIds.length > 0 ? ( <> {modulesView === "list" && (
{projectModuleIds.map((moduleId) => ( ))}
)} {modulesView === "grid" && (
{projectModuleIds.map((moduleId) => ( ))}
)} {modulesView === "gantt_chart" && } ) : ( commandPaletteStore.toggleCreateModuleModal(true), }} size="lg" disabled={!isEditingAllowed} /> )} ); });