exp: hooks (1)

1 files changed, 63 insertions, 84 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 6e2e4d6..9ec89a2 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,5 +1,6 @@
-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';
@@ -16,7 +17,7 @@ import DashboardIcon from '@material-ui/icons/Dashboard';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import SettingsIcon from '@material-ui/icons/Settings';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   flex: {
     flexGrow: 1
   },
@@ -30,94 +31,72 @@ 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
+  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={this.handleLogout}>Logout</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>
-                <ListItemIcon>
-                  <DashboardIcon />
-                </ListItemIcon>
-                <ListItemText primary="Dashboard" />
-              </ListItem>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <BarChartIcon />
-                </ListItemIcon>
-                <ListItemText primary="Reports" />
-              </ListItem>
-            </List>
-            <Divider />
-            <List>
-              <ListItem button disabled>
-                <ListItemIcon>
-                  <SettingsIcon />
-                </ListItemIcon>
-                <ListItemText primary="Settings" />
-              </ListItem>
-            </List>
-          </div>
-        </Drawer>
-      </Fragment>
-    );
-  }
+        <Button color="inherit" onClick={handleLogout}>Logout</Button>
+      </Toolbar>
+    </AppBar>
+    <Drawer open={drawer} onClose={closeDrawer}>
+      <div
+        tabIndex={0}
+        className={classes.list}
+        role="button"
+        onClick={closeDrawer}
+        onKeyDown={closeDrawer}>
+        <List>
+          <ListItem button>
+            <ListItemIcon>
+              <DashboardIcon />
+            </ListItemIcon>
+            <ListItemText primary="Dashboard" />
+          </ListItem>
+          <ListItem button disabled>
+            <ListItemIcon>
+              <BarChartIcon />
+            </ListItemIcon>
+            <ListItemText primary="Reports" />
+          </ListItem>
+        </List>
+        <Divider />
+        <List>
+          <ListItem button disabled>
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+            <ListItemText primary="Settings" />
+          </ListItem>
+        </List>
+      </div>
+    </Drawer>
+  </>);
 }
 
-export default withStyles(styles)(MainToobar);
+export default MainToolbar;