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