From 7e495f2d557ca738460c1031302929ae075f0399 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Thu, 1 Jul 2021 14:01:14 +0000
Subject: Renamed ReportLayoutPage to ReportLayout

---
 modern/src/reports/ChartReportPage.js   |   6 +-
 modern/src/reports/EventReportPage.js   |   6 +-
 modern/src/reports/ReportLayout.js      | 144 ++++++++++++++++++++++++++++++++
 modern/src/reports/ReportLayoutPage.js  | 124 ---------------------------
 modern/src/reports/RouteReportPage.js   |   6 +-
 modern/src/reports/StopReportPage.js    |   6 +-
 modern/src/reports/SummaryReportPage.js |   6 +-
 modern/src/reports/TripReportPage.js    |   6 +-
 8 files changed, 162 insertions(+), 142 deletions(-)
 create mode 100644 modern/src/reports/ReportLayout.js
 delete mode 100644 modern/src/reports/ReportLayoutPage.js

(limited to 'modern/src/reports')

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 0a5c8e18..8eeedc4b 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
 import { useAttributePreference } from '../common/preferences';
@@ -61,13 +61,13 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage filter={ 
+    <ReportLayout filter={ 
       <Filter setItems={setItems}>
         <ChartType type={type} setType={setType} />
       </Filter>
     }>
       <Graph items={items} type={type} />
-    </ReportLayoutPage>
+    </ReportLayout>
   )
 }
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 6d80860c..b938dc85 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -5,7 +5,7 @@ import { useTheme } from "@material-ui/core/styles";
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { prefixString } from '../common/stringUtils';
 import t from '../common/localization';
 
@@ -99,13 +99,13 @@ const EventReportPage = () => {
   }];
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 }
 
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
new file mode 100644
index 00000000..5b543355
--- /dev/null
+++ b/modern/src/reports/ReportLayout.js
@@ -0,0 +1,144 @@
+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: <TimelineIcon /> },
+  {
+    name: t('reportEvents'),
+    href: '/reports/event',
+    icon: <NotificationsActiveIcon />
+  },
+  {
+    name: t('reportTrips'),
+    href: '/reports/trip',
+    icon: <PlayCircleFilledIcon />
+  },
+  {
+    name: t('reportStops'),
+    href: '/reports/stop',
+    icon: <PauseCircleFilledIcon />
+  },
+  {
+    name: t('reportSummary'),
+    href: '/reports/summary',
+    icon: <FormatListBulletedIcon />
+  },
+  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> }
+];
+
+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 (
+    <div className={classes.root}>
+      <Hidden only={['lg', 'xl']}>
+        <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
+        <Drawer
+          variant="temporary"
+          open={openDrawer}
+          onClose={() => setOpenDrawer(!openDrawer)}
+          classes={{ paper: classes.drawer }}
+        >
+          <SideNav routes={routes} />
+        </Drawer>
+      </Hidden>
+      <Hidden only={['xs', 'sm', 'md']}>
+        <Drawer
+          variant="permanent"
+          classes={{ root: classes.drawerContainer, paper: classes.drawer }}
+        >
+          <div className={classes.drawerHeader}>
+            <IconButton
+              onClick={() => history.push('/')}
+            >
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              {t('reportTitle')}
+            </Typography>
+          </div>
+          <Divider />
+          <SideNav routes={routes} />
+        </Drawer>
+      </Hidden>
+      <div className={classes.content}>
+        <div className={classes.toolbar} />
+        <Grid container direction="column" spacing={2}>
+          <Grid item>{filter}</Grid>
+          <Grid item>{children}</Grid>
+        </Grid>
+      </div>
+    </div>
+  );
+};
+
+export default ReportLayout;
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
deleted file mode 100644
index 6bab67c6..00000000
--- a/modern/src/reports/ReportLayoutPage.js
+++ /dev/null
@@ -1,124 +0,0 @@
-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 ReportSidebar from '../components/reports/ReportSidebar'
-import ReportNavbar from '../components/reports/ReportNavbar'
-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),
-  },
-  backArrowIconContainer: {
-    '&:hover': {
-      backgroundColor:"transparent"
-    }  
-  },
-  toolbar: {
-    [theme.breakpoints.down("md")]: {
-      ...theme.mixins.toolbar,
-    }
-  },
-}));
-
-const routes = [
-  { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
-  { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
-  { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
-  { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
-  { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
-  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
-];
-
-const ReportLayoutPage = ({ 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]);
-
-  return (
-    <div className={classes.root}>
-      <Hidden only={['lg', 'xl']}>
-        <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
-        <Drawer
-          variant="temporary"
-          open={openDrawer}
-          onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{paper: classes.drawer}}>
-          <ReportSidebar routes={routes} />
-        </Drawer>
-      </Hidden>
-      <Hidden only={['xs', 'sm', 'md']}>
-        <div className={classes.drawerContainer}>
-          <Drawer
-            variant="permanent"
-            classes={{paper: classes.drawer}}>
-            <div className={classes.drawerHeader}>
-              <IconButton
-                onClick={() => history.push('/')}
-                className={classes.backArrowIconContainer} 
-                disableRipple>
-                <ArrowBackIcon />
-              </IconButton>
-              <Typography variant="h6" color="inherit" noWrap>
-                {t('reportTitle')}
-              </Typography> 
-            </div>
-            <Divider />
-            <ReportSidebar routes={routes} />
-          </Drawer>
-        </div>
-      </Hidden>
-      <div className={classes.content}>
-        <div className={classes.toolbar} />
-        <Grid container direction="column" spacing={2}>
-          <Grid item>{filter}</Grid>
-          <Grid item>{children}</Grid>
-        </Grid>
-      </div>      
-    </div>
-  );
-}
-
-export default ReportLayoutPage;
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 04b513e9..c09d4f5c 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -4,7 +4,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference, usePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -83,7 +83,7 @@ const RouteReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <Paper>
         <DataGrid
           rows={items} 
@@ -91,7 +91,7 @@ const RouteReportPage = () => {
           hideFooter 
           autoHeight />
       </Paper>
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 6953c464..57f59564 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -3,7 +3,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -82,14 +82,14 @@ const StopReportPage = () => {
   }]
   
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight
         getRowId={() => Math.random()} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index e3819a53..53e697d0 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -4,7 +4,7 @@ import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -100,14 +100,14 @@ const SummaryReportPage = () => {
   }]
   
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight
         getRowId={() => Math.random()} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 }
 
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 5f414f44..e8c91295 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -3,7 +3,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -113,14 +113,14 @@ const TripReportPage = () => {
   }]
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight
         getRowId={() => Math.random()} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 }
 
-- 
cgit v1.2.3