Merge pull request #1 from dkyeremeh/device_list

Thank you. Merged.

5 files changed, 150 insertions, 38 deletions

diff --git a/modern/src/components/BottomNav.js b/modern/src/components/BottomNav.js
new file mode 100644
index 00000000..6aad1dd9
--- /dev/null
+++ b/modern/src/components/BottomNav.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { Link, useHistory } from 'react-router-dom';
+import {
+  makeStyles, Paper, Toolbar, IconButton, useMediaQuery, useTheme,
+} from '@material-ui/core';
+
+import ReplayIcon from '@material-ui/icons/Replay';
+import DescriptionIcon from '@material-ui/icons/Description';
+import ShuffleIcon from '@material-ui/icons/Shuffle';
+import MapIcon from '@material-ui/icons/Map';
+import LogoutIcon from '@material-ui/icons/ExitToApp';
+
+import { sessionActions } from '../store';
+import t from '../common/localization';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    bottom: theme.spacing(0),
+    left: '0px',
+    width: '100%',
+    position: 'fixed',
+    zIndex: 1301,
+    [theme.breakpoints.up('lg')]: {
+      left: theme.spacing(1.5),
+      bottom: theme.spacing(1.5),
+      width: theme.dimensions.drawerWidthDesktop,
+    },
+  },
+  paper: {
+    borderRadius: '0px',
+  },
+  toolbar: {
+    padding: theme.spacing(0, 2),
+    display: 'flex',
+    justifyContent: 'space-around',
+    maxWidth: theme.dimensions.bottomNavMaxWidth,
+    margin: 'auto',
+  },
+  navItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: '0.75rem',
+    fontWeight: 'normal',
+  },
+}));
+
+const BottomNav = ({ showOnDesktop }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const history = useHistory();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+  const dispatch = useDispatch();
+
+  const NavLink = ({ children, location }) => (
+    <IconButton component={Link} classes={{ label: classes.navItem }} to={location}>
+      {children}
+    </IconButton>
+  );
+
+  const handleLogout = async () => {
+    const response = await fetch('/api/session', { method: 'DELETE' });
+    if (response.ok) {
+      dispatch(sessionActions.updateUser(null));
+      history.push('/login');
+    }
+  };
+
+  if (isDesktop && !showOnDesktop) return null;
+
+  return (
+    <div className={classes.container}>
+      <Paper className={classes.paper} elevation={isDesktop ? 1 : 3}>
+        <Toolbar className={classes.toolbar} disableGutters>
+
+          {isDesktop ? (
+            <NavLink location="/replay">
+              <ReplayIcon />
+              {t('reportReplay')}
+            </NavLink>
+          ) : (
+            <NavLink location="/">
+              <MapIcon />
+              {t('mapTitle')}
+            </NavLink>
+          )}
+
+          <NavLink location="/reports/route">
+            <DescriptionIcon />
+            {t('reportTitle')}
+          </NavLink>
+
+          <NavLink location="/settings/notifications">
+            <ShuffleIcon />
+            {t('settingsTitle')}
+          </NavLink>
+
+          <IconButton classes={{ label: classes.navItem }} onClick={handleLogout}>
+            <LogoutIcon />
+            {t('loginLogout')}
+          </IconButton>
+        </Toolbar>
+      </Paper>
+    </div>
+  );
+};
+
+export default BottomNav;
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/NavBar.js
index 16807e89..93e79bbb 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/NavBar.js
@@ -3,9 +3,8 @@ import {
   AppBar, Toolbar, Typography, IconButton,
 } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
-import t from '../../common/localization';
 
-const ReportNavbar = ({ setOpenDrawer, reportTitle }) => (
+const Navbar = ({ setOpenDrawer, title }) => (
   <AppBar position="fixed" color="inherit">
     <Toolbar>
       <IconButton
@@ -17,12 +16,10 @@ const ReportNavbar = ({ setOpenDrawer, reportTitle }) => (
         <MenuIcon />
       </IconButton>
       <Typography variant="h6" noWrap>
-        {t('reportTitle')}
-        {' '}
-        {` / ${reportTitle}`}
+        {title}
       </Typography>
     </Toolbar>
   </AppBar>
 );
 
-export default ReportNavbar;
+export default Navbar;
diff --git a/modern/src/components/SideNav.js b/modern/src/components/SideNav.js
new file mode 100644
index 00000000..bcf8ecd5
--- /dev/null
+++ b/modern/src/components/SideNav.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader,
+} from '@material-ui/core';
+import { Link, useLocation } from 'react-router-dom';
+
+const SideNav = ({ routes }) => {
+  const location = useLocation();
+
+  return (
+    <List disablePadding style={{ paddingTop: '16px' }}>
+      {routes.map((route) => (route.subheader ? (
+        <>
+          <Divider />
+          <ListSubheader>{route.subheader}</ListSubheader>
+        </>
+      ) : (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={route.href || route.subheader}
+          button
+          to={route.href}
+          selected={location.pathname.match(route.match || route.href)}
+        >
+          <ListItemIcon>{route.icon}</ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      )))}
+    </List>
+  );
+};
+
+export default SideNav;
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index e083541c..e6da05e3 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -41,7 +41,10 @@ const LoginForm = () => {
 
   const handleLogin = async (event) => {
     event.preventDefault();
-    const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
+    const response = await fetch('/api/session', {
+      method: 'POST',
+      body: new URLSearchParams(`email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`),
+    });
     if (response.ok) {
       const user = await response.json();
       dispatch(sessionActions.updateUser(user));
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
deleted file mode 100644
index 686fc040..00000000
--- a/modern/src/components/reports/ReportSidebar.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import {
-  List, ListItem, ListItemText, ListItemIcon,
-} from '@material-ui/core';
-import { Link, useLocation } from 'react-router-dom';
-
-const ReportSidebar = ({ routes }) => {
-  const location = useLocation();
-
-  return (
-    <List disablePadding style={{ paddingTop: '16px' }}>
-      {routes.map((route) => (
-        <ListItem
-          disableRipple
-          component={Link}
-          key={route}
-          button
-          to={route.href}
-          selected={route.href === location.pathname}
-        >
-          <ListItemIcon>
-            {route.icon}
-          </ListItemIcon>
-          <ListItemText primary={route.name} />
-        </ListItem>
-      ))}
-    </List>
-  );
-};
-
-export default ReportSidebar;