From 8bef4f04c2b0b203450fe5753b6109a0b0d04e82 Mon Sep 17 00:00:00 2001
From: ditoaugusta <dt_ap@ymail.com>
Date: Fri, 27 Mar 2020 17:39:49 +0700
Subject: exp: hooks (1)

---
 modern/src/MainPage.js | 82 +++++++++++++++++++++-----------------------------
 1 file changed, 34 insertions(+), 48 deletions(-)

(limited to 'modern/src/MainPage.js')

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 450a5e0..8e9b695 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
 import MainToobar from './MainToolbar';
 import MainMap from './MainMap';
 import Drawer from '@material-ui/core/Drawer';
-import withStyles from '@material-ui/core/styles/withStyles';
 import SocketController from './SocketController';
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 import DeviceList from './DeviceList';
+import { makeStyles } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: "100vh",
     display: "flex",
@@ -35,57 +35,43 @@ const styles = theme => ({
   mapContainer: {
     flexGrow: 1
   }
-});
+}));
 
-class MainPage extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true
-    };
-  }
+const MainPage = () => {
+  const [loading, setLoading] = useState(true);
+  const classes = useStyles();
+  const history = useHistory();
 
-  componentDidMount() {
+  useEffect(() => {
     fetch('/api/session').then(response => {
       if (response.ok) {
-        this.setState({
-          loading: false
-        });
+        setLoading(false);
       } else {
-        this.props.history.push('/login');
+        history.push('/login');
       }
     });
-  }
+  }, [history]);
 
-  render() {
-    const { classes } = this.props;
-    const { loading } = this.state;
-    if (loading) {
-      return (
-        <div>Loading...</div>
-      );
-    } else {
-      return (
-        <div className={classes.root}>
-          <SocketController />
-          <MainToobar history={this.props.history} />
-          <div className={classes.content}>
-            <Drawer
-              anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"}
-              variant="permanent"
-              classes={{ paper: classes.drawerPaper }}>
-              <DeviceList />
-            </Drawer>
-            <div className={classes.mapContainer}>
-              <ContainerDimensions>
-                <MainMap/>
-              </ContainerDimensions>
-            </div>
-          </div>
-        </div>
-      );
-    }
-  }
+  return (loading ? (<div>Loading...</div>) : (<div className={classes.root}>
+    <SocketController />
+    <MainToobar history={history} />
+    <div className={classes.content}>
+      { /* <Drawer
+        anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"} NOTE: What's this do?
+        variant="permanent"
+      classes={{ paper: classes.drawerPaper }}> */}
+      <Drawer
+        variant="permanent"
+        classes={{ paper: classes.drawerPaper }}>
+        <DeviceList />
+      </Drawer>
+      <div className={classes.mapContainer}>
+        <ContainerDimensions>
+          <MainMap />
+        </ContainerDimensions>
+      </div>
+    </div>
+  </div>));
 }
 
-export default withWidth()(withStyles(styles)(MainPage));
+export default MainPage;
-- 
cgit v1.2.3


From 8f74f238634f4779b0ada63b52b10a030d352899 Mon Sep 17 00:00:00 2001
From: ditoaugusta <dt_ap@ymail.com>
Date: Fri, 27 Mar 2020 18:31:01 +0700
Subject: edit mainpage

---
 modern/src/MainPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modern/src/MainPage.js')

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index b2ac34a..f6dd7fe 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -55,7 +55,7 @@ const MainPage = () => {
 
   return (loading ? (<div>Loading...</div>) : (<div className={classes.root}>
     <SocketController />
-    <MainToobar history={history} />
+    <MainToobar />
     <div className={classes.content}>
       { /* <Drawer
         anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"} NOTE: What's this do?
-- 
cgit v1.2.3


From 84da0d600ce4b048615b7e6a502c4feea9902eed Mon Sep 17 00:00:00 2001
From: ditoaugusta <dt_ap@ymail.com>
Date: Sat, 28 Mar 2020 02:38:14 +0700
Subject: fix: jsx lines

---
 modern/src/MainPage.js    |  38 ++++-----
 modern/src/MainToolbar.js | 200 +++++++++++++++++++++++-----------------------
 2 files changed, 121 insertions(+), 117 deletions(-)

(limited to 'modern/src/MainPage.js')

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index f6dd7fe..4362569 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -53,26 +53,28 @@ const MainPage = () => {
     });
   }, [history]);
 
-  return (loading ? (<div>Loading...</div>) : (<div className={classes.root}>
-    <SocketController />
-    <MainToobar />
-    <div className={classes.content}>
-      { /* <Drawer
-        anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"} NOTE: What's this do?
-        variant="permanent"
-      classes={{ paper: classes.drawerPaper }}> */}
-      <Drawer
-        variant="permanent"
-        classes={{ paper: classes.drawerPaper }}>
-        <DeviceList />
-      </Drawer>
-      <div className={classes.mapContainer}>
-        <ContainerDimensions>
-          <MainMap />
-        </ContainerDimensions>
+  return loading ? (<div>Loading...</div>) : (
+    <div className={classes.root}>
+      <SocketController />
+      <MainToobar />
+      <div className={classes.content}>
+        {/* <Drawer
+          anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"} NOTE: What's this do?
+          variant="permanent"
+        classes={{ paper: classes.drawerPaper }}> */}
+        <Drawer
+          variant="permanent"
+          classes={{ paper: classes.drawerPaper }}>
+          <DeviceList />
+        </Drawer>
+        <div className={classes.mapContainer}>
+          <ContainerDimensions>
+            <MainMap />
+          </ContainerDimensions>
+        </div>
       </div>
     </div>
-  </div>));
+  );
 }
 
 export default MainPage;
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 9c2e811..bf4aa40 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -51,106 +51,108 @@ const MainToolbar = () => {
     })
   }
 
-  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
+  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>
-  </>);
+          <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 MainToolbar;
-- 
cgit v1.2.3


From d2be66e8dd5d4a0de7e7fad3028a33fd43fb1f99 Mon Sep 17 00:00:00 2001
From: ditoaugusta <dt_ap@ymail.com>
Date: Sat, 28 Mar 2020 17:34:04 +0700
Subject: change: mainpage withwidth

---
 modern/src/MainPage.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

(limited to 'modern/src/MainPage.js')

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 4362569..c70e816 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,13 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core';
+import { isWidthUp, makeStyles, withWidth } from '@material-ui/core';
 import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
 
+import DeviceList from './DeviceList';
 import MainMap from './MainMap';
-import SocketController from './SocketController';
 import MainToobar from './MainToolbar';
-import DeviceList from './DeviceList';
+import SocketController from './SocketController';
+
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -38,7 +39,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const MainPage = () => {
+const MainPage = ({ width }) => {
   const [loading, setLoading] = useState(true);
   const classes = useStyles();
   const history = useHistory();
@@ -58,11 +59,8 @@ const MainPage = () => {
       <SocketController />
       <MainToobar />
       <div className={classes.content}>
-        {/* <Drawer
-          anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"} NOTE: What's this do?
-          variant="permanent"
-        classes={{ paper: classes.drawerPaper }}> */}
         <Drawer
+          anchor={isWidthUp('sm', width) ? "left" : "bottom"}
           variant="permanent"
           classes={{ paper: classes.drawerPaper }}>
           <DeviceList />
@@ -77,4 +75,4 @@ const MainPage = () => {
   );
 }
 
-export default MainPage;
+export default withWidth()(MainPage);
-- 
cgit v1.2.3