Improved useToggle hook so that it also returns enabler and disabler

src/common/MenuLayout.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { 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';
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useToggle } from '../utils/helpers/hooks';
 import NotFound from './NotFound';
 import './MenuLayout.scss';
 
@@ -18,43 +19,39 @@ const propTypes = {
 
 const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions, ServerError) => {
   const MenuLayoutComp = ({ match, location, selectedServer }) => {
-    const [ showSideBar, setShowSidebar ] = useState(false);
+    const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
     const { params: { serverId } } = match;
 
-    useEffect(() => setShowSidebar(false), [ location ]);
+    useEffect(() => hideSidebar(), [ location ]);
 
     if (selectedServer.serverNotReachable) {
       return <ServerError type="not-reachable" />;
     }
 
     const burgerClasses = classNames('menu-layout__burger-icon', {
-      'menu-layout__burger-icon--active': showSideBar,
+      'menu-layout__burger-icon--active': sidebarVisible,
     });
-    const swipeMenuIfNoModalExists = (showSideBar) => () => {
+    const swipeMenuIfNoModalExists = (callback) => () => {
       if (document.querySelector('.modal')) {
         return;
       }
 
-      setShowSidebar(showSideBar);
+      callback();
     };
 
     return (
       <React.Fragment>
-        <FontAwesomeIcon
-          icon={burgerIcon}
-          className={burgerClasses}
-          onClick={() => setShowSidebar(!showSideBar)}
-        />
+        <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
 
         <Swipeable
           delta={40}
           className="menu-layout__swipeable"
-          onSwipedLeft={swipeMenuIfNoModalExists(false)}
-          onSwipedRight={swipeMenuIfNoModalExists(true)}
+          onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
+          onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
         >
           <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)}>
+            <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
+            <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
               <div className="menu-layout__container">
                 <Switch>
                   <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />