import React, { useState, useEffect } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; import TimelineIcon from '@material-ui/icons/Timeline'; import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import SideNav from '../components/SideNav'; import NavBar from '../components/NavBar'; import t from '../common/localization'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', height: '100%' }, drawerContainer: { width: theme.dimensions.drawerWidthDesktop }, drawer: { width: theme.dimensions.drawerWidthDesktop, [theme.breakpoints.down('md')]: { width: theme.dimensions.drawerWidthTablet } }, content: { flex: 1, padding: theme.spacing(5, 3, 3, 3) }, drawerHeader: { ...theme.mixins.toolbar, display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1) }, toolbar: { [theme.breakpoints.down('md')]: { ...theme.mixins.toolbar } } })); const routes = [ { name: t('reportRoute'), href: '/reports/route', icon: }, { name: t('reportEvents'), href: '/reports/event', icon: }, { name: t('reportTrips'), href: '/reports/trip', icon: }, { name: t('reportStops'), href: '/reports/stop', icon: }, { name: t('reportSummary'), href: '/reports/summary', icon: }, { name: t('reportChart'), href: '/reports/chart', icon: } ]; const ReportLayout = ({ children, filter }) => { const classes = useStyles(); const history = useHistory(); const location = useLocation(); const [openDrawer, setOpenDrawer] = useState(false); const [reportTitle, setReportTitle] = useState(); useEffect(() => { routes.forEach(route => { switch (location.pathname) { case `${route.href}`: setReportTitle(route.name); break; default: break; } }); }, [location]); const pageTitle = `${t('reportTitle')} / ${reportTitle}`; return (
setOpenDrawer(!openDrawer)} classes={{ paper: classes.drawer }} >
history.push('/')} > {t('reportTitle')}
{filter} {children}
); }; export default ReportLayout;