mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
QQQ-30: got rid of 'prettier', first pass at eslint configuration pointing only to qqq specific files, reformated all qqq files
This commit is contained in:
Tim Chamberlain
241
src/App.tsx
241
src/App.tsx
@ -14,16 +14,18 @@ Coded by www.creative-tim.com
|
||||
*/
|
||||
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
JSXElementConstructor,
|
||||
Key,
|
||||
ReactElement,
|
||||
useReducer,
|
||||
useState,
|
||||
useEffect,
|
||||
JSXElementConstructor,
|
||||
Key,
|
||||
ReactElement,
|
||||
useReducer,
|
||||
} from "react";
|
||||
|
||||
// react-router components
|
||||
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
|
||||
import {
|
||||
Routes, Route, Navigate, useLocation,
|
||||
} from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import { ThemeProvider } from "@mui/material/styles";
|
||||
@ -58,128 +60,137 @@ 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();
|
||||
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);
|
||||
}
|
||||
};
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
// 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);
|
||||
// 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 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]);
|
||||
// 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(
|
||||
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.collapse)
|
||||
{
|
||||
return getRoutes(route.collapse);
|
||||
}
|
||||
|
||||
if (route.route) {
|
||||
return <Route path={route.route} element={route.component} key={route.key} />;
|
||||
}
|
||||
if (route.route)
|
||||
{
|
||||
return <Route path={route.route} element={route.component} key={route.key} />;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
);
|
||||
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 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 />;
|
||||
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" element={entityListElement} key="entity-list" />;
|
||||
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
|
||||
<Route path="/processes/:processName" element={processRunElement} key="process-run" />;
|
||||
<Route path="/:tableName/:id" element={entityViewElement} key="entity-view" />;
|
||||
<Route path="/:tableName/:id/edit" element={entityEditElement} key="entity-edit" />;
|
||||
{getRoutes(routes)}
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
);
|
||||
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" element={entityListElement} key="entity-list" />
|
||||
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />
|
||||
<Route path="/processes/:processName" element={processRunElement} key="process-run" />
|
||||
<Route path="/:tableName/:id" element={entityViewElement} key="entity-view" />
|
||||
<Route path="/:tableName/:id/edit" element={entityEditElement} key="entity-edit" />
|
||||
{getRoutes(routes)}
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user