Merge pull request #774 from dt-ap/experimental/hooks

Experimental: Use Hooks

1 files changed, 119 insertions, 141 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index fc3281cd..bf4aa402 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,6 +1,6 @@
-import t from './common/localization'
-import React, { Component, Fragment } from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -17,8 +17,9 @@ import ListItemText from '@material-ui/core/ListItemText';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import SettingsIcon from '@material-ui/icons/Settings';
+import t from './common/localization';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   flex: {
     flexGrow: 1
   },
@@ -32,149 +33,126 @@ const styles = theme => ({
     marginLeft: -12,
     marginRight: 20,
   }
-});
+}));
 
-class MainToobar extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      drawer: false
-    };
-    this.openDrawer = this.openDrawer.bind(this);
-    this.closeDrawer = this.closeDrawer.bind(this);
-    this.handleLogout = this.handleLogout.bind(this);
-  }
-
-  openDrawer() {
-    this.setState({
-      drawer: true
-    });
-  };
+const MainToolbar = () => {
+  const [drawer, setDrawer] = useState(false);
+  const classes = useStyles();
+  const history = useHistory();
 
-  closeDrawer() {
-    this.setState({
-      drawer: false
-    });
-  };
+  const openDrawer = () => { setDrawer(true) }
+  const closeDrawer = () => { setDrawer(false) }
 
-  handleLogout() {
-    fetch("/api/session", {
-      method: "DELETE"
-    }).then(response => {
+  const handleLogout = () => {
+    fetch('/api/session', { method: 'DELETE' }).then(response => {
       if (response.ok) {
-        this.props.history.push('/login');
+        history.push('/login');
       }
-    });
+    })
   }
 
-  render() {
-    const { classes } = this.props;
-    return (
-      <Fragment>
-        <AppBar position="static" className={classes.appBar}>
-          <Toolbar>
-            <IconButton
-              className={classes.menuButton}
-              color="inherit"
-              onClick={this.openDrawer}>
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="h6" color="inherit" className={classes.flex}>
-              Traccar
-            </Typography>
-            <Button color="inherit" onClick={this.handleLogout}>{t('loginLogout')}</Button>
-          </Toolbar>
-        </AppBar>
-        <Drawer open={this.state.drawer} onClose={this.closeDrawer}>
-          <div
-            tabIndex={0}
-            className={classes.list}
-            role="button"
-            onClick={this.closeDrawer}
-            onKeyDown={this.closeDrawer}>
-            <List>
-              <ListItem button onClick={() => this.props.history.push('/')}>
-                <ListItemIcon>
-                  <DashboardIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('mapTitle')} />
-              </ListItem>
-            </List>
-            <Divider />
-            <List
-              subheader={
-                <ListSubheader>
-                  {t('reportTitle')}
-                </ListSubheader>
-              }>
-              <ListItem button onClick={() => this.props.history.push('/reports/route')}>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('reportRoute')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('reportEvents')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('reportTrips')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('reportStops')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('reportSummary')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('reportChart')} />
-              </ListItem>
-            </List>
-            <Divider />
-            <List
-              subheader={
-                <ListSubheader>
-                  {t('settingsTitle')}
-                </ListSubheader>
-              }>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <SettingsIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('settingsUser')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <SettingsIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('settingsServer')} />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <SettingsIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('sharedNotifications')} />
-              </ListItem>
-            </List>
-          </div>
-        </Drawer>
-      </Fragment>
-    );
-  }
+  return (
+    <>
+      <AppBar position="static" className={classes.appBar}>
+        <Toolbar>
+          <IconButton
+            className={classes.menuButton}
+            color="inherit"
+            onClick={openDrawer}>
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" color="inherit" className={classes.flex}>
+            Traccar
+        </Typography>
+          <Button color="inherit" onClick={handleLogout}>{t('loginLogout')}</Button>
+        </Toolbar>
+      </AppBar>
+      <Drawer open={drawer} onClose={closeDrawer}>
+        <div
+          tabIndex={0}
+          className={classes.list}
+          role="button"
+          onClick={closeDrawer}
+          onKeyDown={closeDrawer}>
+          <List>
+            <ListItem button onClick={() => history.push('/')}>
+              <ListItemIcon>
+                <DashboardIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('mapTitle')} />
+            </ListItem>
+          </List>
+          <Divider />
+          <List subheader={<ListSubheader>
+            {t('reportTitle')}
+          </ListSubheader>}>
+            <ListItem button onClick={() => { history.push('/reports/route') }}>
+              <ListItemIcon>
+                <BarChartIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportRoute')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <BarChartIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportEvents')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <BarChartIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportTrips')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <BarChartIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportStops')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <BarChartIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportSummary')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <BarChartIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportChart')} />
+            </ListItem>
+          </List>
+          <Divider />
+          <List
+            subheader={
+              <ListSubheader>
+                {t('settingsTitle')}
+              </ListSubheader>
+            }>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <SettingsIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('settingsUser')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <SettingsIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('settingsServer')} />
+            </ListItem>
+            <ListItem button disabled>
+              <ListItemIcon>
+                <SettingsIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('sharedNotifications')} />
+            </ListItem>
+          </List>
+        </div>
+      </Drawer>
+    </>
+  );
 }
 
-export default withStyles(styles)(MainToobar);
+export default MainToolbar;