refactor main container for hooks

src/components/MainCointainer.jsx

@@ -1,9 +1,9 @@
-import React,{ Suspense, lazy }  from 'react';
+import React,{ Suspense, lazy, useState, useEffect }  from 'react';
 import { Route, Link, Switch, withRouter } from 'react-router-dom'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import queryString from 'query-string'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import { Hook, Console, Decode } from 'console-feed'
 import Drawer from '@material-ui/core/Drawer';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -16,7 +16,6 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import AddIcon from '@material-ui/icons/Add';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -45,7 +44,7 @@ const formatAccount = account => {
   return `${start}...${end}`
 }
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
   },
@@ -112,7 +111,7 @@ const styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
@@ -129,7 +128,7 @@ const styles = theme => ({
   link: {
     textDecoration: 'none'
   }
-})
+}))
 
 const MenuItem = ({to, name, className, icon}) => (
   <Link to={to} className={className}>
@@ -140,37 +139,39 @@ const MenuItem = ({to, name, className, icon}) => (
   </Link>
 )
 
-class PersistentDrawerLeft extends React.Component {
+MenuItem.propTypes = {
-  state = {
+  to: PropTypes.string,
-    open: false,
+  name: PropTypes.string,
-    queryParams: {},
+  className: PropTypes.string,
-    logs: []
+  icon: PropTypes.object
-  };
+}
 
-  componentDidMount() {
+function PersistentDrawerLeft({ loading, account, children, enableEthereum, location: { pathname, search } }) {
-    const { location: { search } } = this.props
+  const [open, setOpen] = useState(false)
+  const [queryParams, setQueryParams] = useState({})
+  const [logs, setLogs] = useState([])
+
+  useEffect(() => {
     const queryParams = queryString.parse(search)
-    if (queryParams.logs) this.enableLogs()
+    if (queryParams.logs) enableLogs()
-    this.setState({ queryParams })
+    setQueryParams({ queryParams })
-  }
+  }, [search])
 
-  enableLogs = () => {
+  const enableLogs = () => {
     Hook(window.console, log => {
-      this.setState(({ logs }) => ({ logs: [Decode(log), ...logs] }))
+      setLogs(({ logs }) => ({ logs: [Decode(log), ...logs] }))
     })
   }
 
-  handleDrawerOpen = () => {
+  const handleDrawerOpen = () => {
-    this.setState({ open: true })
+    setOpen({ open: true })
   };
 
-  handleDrawerClose = () => {
+  const handleDrawerClose = () => {
-    this.setState({ open: false })
+    setOpen({ open: false })
   };
 
-  render() {
+  const classes = useStyles()
-    const { classes, theme, loading, account, enableEthereum, location: { pathname } } = this.props
-    const { open, logs, queryParams } = this.state
   const isHome = pathname === "/"
 
   return (
@@ -186,16 +187,14 @@ class PersistentDrawerLeft extends React.Component {
           {queryParams.menu && <IconButton
             color="inherit"
             aria-label="Open drawer"
-              onClick={this.handleDrawerOpen}
+            onClick={handleDrawerOpen}
-              className={classNames(classes.menuButton, open && !loading && classes.hide)}
+            className={classNames(classes.menuButton, open && !loading && classes.hide)}>
-            >
             {loading && <ScaleLoader
               sizeUnit={'px'}
               height={20}
               width={2}
               margin="3px"
-                color={'#FFFFFF'}
+              color={'#FFFFFF'} />}
-              />}
             {!loading && <MenuIcon/>}
           </IconButton>}
           {!isHome && <Typography variant="h6" noWrap>
@@ -220,8 +219,8 @@ class PersistentDrawerLeft extends React.Component {
         }}
       >
         <div className={classes.drawerHeader}>
-            <IconButton onClick={this.handleDrawerClose}>
+          <IconButton onClick={handleDrawerClose}>
-              {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            <ChevronLeftIcon />
           </IconButton>
         </div>
         <Divider/>
@@ -263,22 +262,20 @@ class PersistentDrawerLeft extends React.Component {
               <Route path="/console" render={() => <Console logs={logs} variant="dark" />} />
             </Switch>
           </Suspense>
-            {this.props.children}
+          {children}
         </div>
       </main>
     </div>
   );
-  }
 }
 
 PersistentDrawerLeft.propTypes = {
-  classes: PropTypes.object.isRequired,
-  theme: PropTypes.object.isRequired,
   loading: PropTypes.bool.isRequired,
   account: PropTypes.string,
   enableEthereum: PropTypes.func.isRequired,
-  location: PropTypes.object
+  location: PropTypes.object,
+  children: PropTypes.node
 };
 
 const DrawerWithRouter = withRouter(PersistentDrawerLeft)
-export default withStyles(styles, { withTheme: true })(DrawerWithRouter)
+export default DrawerWithRouter