Converted MenuLayout into a functional component with hooks

src/common/MenuLayout.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { Swipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
@@ -10,107 +10,76 @@ import MutedMessage from '../utils/MutedMessage';
 import NotFound from './NotFound';
 import './MenuLayout.scss';
 
-const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) =>
-  class MenuLayout extends React.Component {
-    static propTypes = {
-      match: PropTypes.object,
-      selectServer: PropTypes.func,
-      location: PropTypes.object,
-      selectedServer: serverType,
-    };
+const propTypes = {
+  match: PropTypes.object,
+  selectServer: PropTypes.func,
+  location: PropTypes.object,
+  selectedServer: serverType,
+};
 
-    state = { showSideBar: false };
+const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) => {
+  const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
+    const [ showSideBar, setShowSidebar ] = useState(false);
 
-    componentDidMount() {
-      const { match, selectServer } = this.props;
+    useEffect(() => {
       const { params: { serverId } } = match;
 
       selectServer(serverId);
+    }, []);
+    useEffect(() => setShowSidebar(false), [ location ]);
+
+    if (!selectedServer) {
+      return <MutedMessage loading />;
     }
 
-    componentDidUpdate(prevProps) {
-      const { location } = this.props;
-
-      // Hide sidebar when location changes
-      if (location !== prevProps.location) {
-        this.setState({ showSideBar: false });
-      }
-    }
-
-    render() {
-      const { selectedServer, match } = this.props;
-
-      if (!selectedServer) {
-        return <MutedMessage loading />;
+    const { params: { serverId } } = match;
+    const burgerClasses = classNames('menu-layout__burger-icon', {
+      'menu-layout__burger-icon--active': showSideBar,
+    });
+    const swipeMenuIfNoModalExists = (showSideBar) => () => {
+      if (document.querySelector('.modal')) {
+        return;
       }
 
-      const { params: { serverId } } = match;
-      const burgerClasses = classNames('menu-layout__burger-icon', {
-        'menu-layout__burger-icon--active': this.state.showSideBar,
-      });
-      const swipeMenuIfNoModalExists = (showSideBar) => () => {
-        if (document.querySelector('.modal')) {
-          return;
-        }
+      setShowSidebar(showSideBar);
+    };
 
-        this.setState({ showSideBar });
-      };
+    return (
+      <React.Fragment>
+        <FontAwesomeIcon
+          icon={burgerIcon}
+          className={burgerClasses}
+          onClick={() => setShowSidebar(!showSideBar)}
+        />
 
-      return (
-        <React.Fragment>
-          <FontAwesomeIcon
-            icon={burgerIcon}
-            className={burgerClasses}
-            onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
-          />
-
-          <Swipeable
-            delta={40}
-            className="menu-layout__swipeable"
-            onSwipedLeft={swipeMenuIfNoModalExists(false)}
-            onSwipedRight={swipeMenuIfNoModalExists(true)}
-          >
-            <div className="row menu-layout__swipeable-inner">
-              <AsideMenu
-                className="col-lg-2 col-md-3"
-                selectedServer={selectedServer}
-                showOnMobile={this.state.showSideBar}
-              />
-              <div
-                className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
-                onClick={() => this.setState({ showSideBar: false })}
-              >
-                <Switch>
-                  <Route
-                    exact
-                    path="/server/:serverId/list-short-urls/:page"
-                    component={ShortUrls}
-                  />
-                  <Route
-                    exact
-                    path="/server/:serverId/create-short-url"
-                    component={CreateShortUrl}
-                  />
-                  <Route
-                    exact
-                    path="/server/:serverId/short-code/:shortCode/visits"
-                    component={ShortUrlVisits}
-                  />
-                  <Route
-                    exact
-                    path="/server/:serverId/manage-tags"
-                    component={TagsList}
-                  />
-                  <Route
-                    render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
-                  />
-                </Switch>
-              </div>
+        <Swipeable
+          delta={40}
+          className="menu-layout__swipeable"
+          onSwipedLeft={swipeMenuIfNoModalExists(false)}
+          onSwipedRight={swipeMenuIfNoModalExists(true)}
+        >
+          <div className="row menu-layout__swipeable-inner">
+            <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
+            <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => setShowSidebar(false)}>
+              <Switch>
+                <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
+                <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
+                <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
+                <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
+                <Route
+                  render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
+                />
+              </Switch>
             </div>
-          </Swipeable>
-        </React.Fragment>
-      );
-    }
+          </div>
+        </Swipeable>
+      </React.Fragment>
+    );
   };
 
+  MenuLayoutComp.propTypes = propTypes;
+
+  return MenuLayoutComp;
+};
+
 export default MenuLayout;