Files
qqq-frontend-material-dashb…/src/App.tsx

183 lines
5.5 KiB
TypeScript

/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { useState, useEffect, JSXElementConstructor, Key, ReactElement } from "react";
// react-router components
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
// @mui material components
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
// Material Dashboard 2 PRO React TS exampless
import Sidenav from "examples/Sidenav";
import Configurator from "examples/Configurator";
// Material Dashboard 2 PRO React TS themes
import theme from "assets/theme";
// Material Dashboard 2 PRO React TS Dark Mode themes
import themeDark from "assets/theme-dark";
// RTL plugins
import rtlPlugin from "stylis-plugin-rtl";
import createCache from "@emotion/cache";
// Material Dashboard 2 PRO React TS routes
import routes from "qqq/qqqRoutes";
// Material Dashboard 2 PRO React TS contexts
import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context";
// Images
import brandWhite from "assets/images/logo-ct.png";
import brandDark from "assets/images/logo-ct-dark.png";
import EntityCreate from "./qqq/pages/entity-create";
import EntityList from "./qqq/pages/entity-list";
import EntityView from "./qqq/pages/entity-view";
import EntityEdit from "./qqq/pages/entity-edit";
import ProcessRun from "./qqq/pages/process-run";
export default function App() {
const [controller, dispatch] = useMaterialUIController();
const {
miniSidenav,
direction,
layout,
openConfigurator,
sidenavColor,
transparentSidenav,
whiteSidenav,
darkMode,
} = controller;
const [onMouseEnter, setOnMouseEnter] = useState(false);
const { pathname } = useLocation();
// Open sidenav when mouse enter on mini sidenav
const handleOnMouseEnter = () => {
if (miniSidenav && !onMouseEnter) {
setMiniSidenav(dispatch, false);
setOnMouseEnter(true);
}
};
// Close sidenav when mouse leave mini sidenav
const handleOnMouseLeave = () => {
if (onMouseEnter) {
setMiniSidenav(dispatch, true);
setOnMouseEnter(false);
}
};
// Change the openConfigurator state
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
// Setting the dir attribute for the body element
useEffect(() => {
document.body.setAttribute("dir", direction);
}, [direction]);
// Setting page scroll to 0 when changing the route
useEffect(() => {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
}, [pathname]);
const getRoutes = (allRoutes: any[]): any =>
allRoutes.map(
(route: {
collapse: any;
route: string;
component: ReactElement<any, string | JSXElementConstructor<any>>;
key: Key;
}) => {
if (route.collapse) {
return getRoutes(route.collapse);
}
if (route.route) {
return <Route path={route.route} element={route.component} key={route.key} />;
}
return null;
}
);
const configsButton = (
<MDBox
display="flex"
justifyContent="center"
alignItems="center"
width="3.25rem"
height="3.25rem"
bgColor="white"
shadow="sm"
borderRadius="50%"
position="fixed"
right="2rem"
bottom="2rem"
zIndex={99}
color="dark"
sx={{ cursor: "pointer" }}
onClick={handleConfiguratorOpen}
>
<Icon fontSize="small" color="inherit">
settings
</Icon>
</MDBox>
);
const entityListElement = <EntityList />;
const entityCreateElement = <EntityCreate />;
const entityViewElement = <EntityView />;
const entityEditElement = <EntityEdit />;
const processRunElement = <ProcessRun />;
return (
<ThemeProvider theme={darkMode ? themeDark : theme}>
<CssBaseline />
{layout === "dashboard" && (
<>
<Sidenav
color={sidenavColor}
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
brandName="Material Dashboard PRO"
routes={routes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
/>
<Configurator />
{configsButton}
</>
)}
{layout === "vr" && <Configurator />}
<Routes>
<Route path="*" element={<Navigate to="/dashboards/analytics" />} />
<Route path="/:tableName/list" element={entityListElement} key="entity-list" />;
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
<Route path="/:tableName/view/:id" element={entityViewElement} key="entity-view" />;
<Route path="/:tableName/edit/:id" element={entityEditElement} key="entity-edit" />;
<Route path="/processes/:processName" element={processRunElement} key="process-run" />;
{getRoutes(routes)}
</Routes>
</ThemeProvider>
);
}