From 2cd374bb9fa941d7e2a6fd8aa5079893a158c98f Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 8 May 2022 13:16:57 -0700 Subject: Reorganize remaining files --- modern/src/settings/OptionsLayout.js | 148 ----------------------------------- 1 file changed, 148 deletions(-) delete mode 100644 modern/src/settings/OptionsLayout.js (limited to 'modern/src/settings/OptionsLayout.js') diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js deleted file mode 100644 index b427d0c0..00000000 --- a/modern/src/settings/OptionsLayout.js +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useState, useEffect, useMemo } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; -import { - Typography, - Divider, - Drawer, - makeStyles, - IconButton, - Hidden, -} from '@material-ui/core'; - -import { useSelector } from 'react-redux'; -import SettingsIcon from '@material-ui/icons/Settings'; -import CreateIcon from '@material-ui/icons/Create'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import FolderIcon from '@material-ui/icons/Folder'; -import PersonIcon from '@material-ui/icons/Person'; -import StorageIcon from '@material-ui/icons/Storage'; -import BuildIcon from '@material-ui/icons/Build'; -import PeopleIcon from '@material-ui/icons/People'; -import BarChartIcon from '@material-ui/icons/BarChart'; -import TodayIcon from '@material-ui/icons/Today'; -import ExitToAppIcon from '@material-ui/icons/ExitToApp'; - -import SideNav from '../common/components/SideNav'; -import NavBar from '../common/components/NavBar'; -import { useTranslation } from '../LocalizationProvider'; -import { useAdministrator, useReadonly } from '../common/util/permissions'; - -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - [theme.breakpoints.down('sm')]: { - flexDirection: 'column', - }, - height: '100%', - }, - drawerContainer: { - width: theme.dimensions.drawerWidthDesktop, - }, - drawer: { - width: theme.dimensions.drawerWidthDesktop, - [theme.breakpoints.down('sm')]: { - width: theme.dimensions.drawerWidthTablet, - }, - }, - content: { - flex: 1, - }, - drawerHeader: { - ...theme.mixins.toolbar, - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - }, - toolbar: { - [theme.breakpoints.down('sm')]: { - ...theme.mixins.toolbar, - }, - }, -})); - -const OptionsLayout = ({ children }) => { - const t = useTranslation(); - const classes = useStyles(); - const location = useLocation(); - const history = useHistory(); - - const [openDrawer, setOpenDrawer] = useState(false); - const [optionTitle, setOptionTitle] = useState(); - - const readonly = useReadonly(); - const admin = useAdministrator(); - const userId = useSelector((state) => state.session.user?.id); - - const readonlyRoutes = useMemo(() => [ - { name: t('sharedPreferences'), href: '/settings/preferences', icon: }, - ], [t]); - - const mainRoutes = useMemo(() => [ - { name: t('sharedNotifications'), href: '/settings/notifications', icon: }, - { name: t('settingsUser'), href: `/user/${userId}`, icon: }, - { name: t('sharedGeofences'), href: '/geofences', icon: }, - { name: t('settingsGroups'), href: '/settings/groups', icon: }, - { name: t('sharedDrivers'), href: '/settings/drivers', icon: }, - { name: t('sharedCalendars'), href: '/settings/calendars', icon: }, - { name: t('sharedComputedAttributes'), href: '/settings/attributes', icon: }, - { name: t('sharedMaintenance'), href: '/settings/maintenances', icon: }, - { name: t('sharedSavedCommands'), href: '/settings/commands', icon: }, - ], [t, userId]); - - const adminRoutes = useMemo(() => [ - { subheader: t('userAdmin') }, - { name: t('settingsServer'), href: '/admin/server', icon: }, - { name: t('settingsUsers'), href: '/admin/users', icon: }, - { name: t('statisticsTitle'), href: '/admin/statistics', icon: }, - ], [t]); - - const routes = useMemo(() => ( - [...readonlyRoutes, ...(!readonly ? mainRoutes : []), ...(admin ? adminRoutes : [])] - ), [readonlyRoutes, readonly, mainRoutes, admin, adminRoutes]); - - useEffect(() => { - const activeRoute = routes.find((route) => route.href && location.pathname.includes(route.href)); - setOptionTitle(activeRoute?.name); - }, [location, routes]); - - const title = `${t('settingsTitle')} / ${optionTitle}`; - - return ( -
- - - setOpenDrawer(!openDrawer)} - classes={{ paper: classes.drawer }} - > - - - - - - -
- history.push('/')}> - - - - {t('settingsTitle')} - -
- - -
-
- -
{children}
-
- ); -}; - -export default OptionsLayout; -- cgit v1.2.3