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
+        <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
-          icon={burgerIcon}
-          className={burgerClasses}
-          onClick={() => setShowSidebar(!showSideBar)}
-        />
 
         <Swipeable
           delta={40}
           className="menu-layout__swipeable"
-          onSwipedLeft={swipeMenuIfNoModalExists(false)}
+          onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
-          onSwipedRight={swipeMenuIfNoModalExists(true)}
+          onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
         >
           <div className="row menu-layout__swipeable-inner">
-            <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
+            <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={() => setShowSidebar(false)}>
+            <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} />

src/servers/DeleteServerButton.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
+import { useToggle } from '../utils/helpers/hooks';
 import { serverType } from './prop-types';
 
 const propTypes = {
@@ -13,16 +14,16 @@ const propTypes = {
 
 const DeleteServerButton = (DeleteServerModal) => {
   const DeleteServerButtonComp = ({ server, className, children, textClassName }) => {
-    const [ isModalOpen, setModalOpen ] = useState(false);
+    const [ isModalOpen, , showModal, hideModal ] = useToggle();
 
     return (
       <React.Fragment>
-        <span className={className} onClick={() => setModalOpen(true)}>
+        <span className={className} onClick={showModal}>
           {!children && <FontAwesomeIcon icon={deleteIcon} />}
           <span className={textClassName}>{children || 'Remove this server'}</span>
         </span>
 
-        <DeleteServerModal server={server} isOpen={isModalOpen} toggle={() => setModalOpen(!isModalOpen)} />
+        <DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
       </React.Fragment>
     );
   };

src/short-urls/CreateShortUrl.js

@@ -36,7 +36,7 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult, ForServerVersion) =>
       maxVisits: undefined,
       findIfExists: false,
     });
-    const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle(false);
+    const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
 
     const changeTags = (tags) => setShortUrlCreation({ ...shortUrlCreation, tags: tags.map(normalizeTag) });
     const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (

src/short-urls/UseExistingIfFoundInfoIcon.js

@@ -38,7 +38,7 @@ const renderInfoModal = (isOpen, toggle) => (
 );
 
 const UseExistingIfFoundInfoIcon = () => {
-  const [ isModalOpen, toggleModal ] = useToggle(false);
+  const [ isModalOpen, toggleModal ] = useToggle();
 
   return (
     <React.Fragment>

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -26,13 +26,13 @@ const propTypes = {
 
 const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal, EditMetaModal, EditShortUrlModal, ForServerVersion) => {
   const ShortUrlsRowMenuComp = ({ shortUrl, selectedServer }) => {
-    const [ isOpen, toggle ] = useToggle(false);
+    const [ isOpen, toggle ] = useToggle();
-    const [ isQrModalOpen, toggleQrCode ] = useToggle(false);
+    const [ isQrModalOpen, toggleQrCode ] = useToggle();
-    const [ isPreviewModalOpen, togglePreview ] = useToggle(false);
+    const [ isPreviewModalOpen, togglePreview ] = useToggle();
-    const [ isTagsModalOpen, toggleTags ] = useToggle(false);
+    const [ isTagsModalOpen, toggleTags ] = useToggle();
-    const [ isMetaModalOpen, toggleMeta ] = useToggle(false);
+    const [ isMetaModalOpen, toggleMeta ] = useToggle();
-    const [ isDeleteModalOpen, toggleDelete ] = useToggle(false);
+    const [ isDeleteModalOpen, toggleDelete ] = useToggle();
-    const [ isEditModalOpen, toggleEdit ] = useToggle(false);
+    const [ isEditModalOpen, toggleEdit ] = useToggle();
     const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
 
     return (

src/utils/helpers/hooks.js

@@ -12,8 +12,9 @@ export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay =
   return [ flag, callback ];
 };
 
+// Return [ flag, toggle, enable, disable ]
 export const useToggle = (initialValue = false) => {
   const [ flag, setFlag ] = useState(initialValue);
 
-  return [ flag, () => setFlag(!flag) ];
+  return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
 };

src/visits/helpers/OpenMapModalBtn.js

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
 import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
 import * as PropTypes from 'prop-types';
+import { useToggle } from '../../utils/helpers/hooks';
 import './OpenMapModalBtn.scss';
 
 const propTypes = {
@@ -13,26 +14,25 @@ const propTypes = {
 
 const OpenMapModalBtn = (MapModal) => {
   const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
-    const [ mapIsOpened, setMapIsOpened ] = useState(false);
+    const [ mapIsOpened, , openMap, closeMap ] = useToggle();
-    const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
+    const [ dropdownIsOpened, toggleDropdown, openDropdown ] = useToggle();
     const [ locationsToShow, setLocationsToShow ] = useState([]);
 
     const buttonRef = React.createRef();
     const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
-    const toggleMap = () => setMapIsOpened(!mapIsOpened);
     const onClick = () => {
       if (!activeCities) {
         setLocationsToShow(locations);
-        setMapIsOpened(true);
+        openMap();
 
         return;
       }
 
-      setDropdownIsOpened(true);
+      openDropdown();
     };
     const openMapWithLocations = (filtered) => () => {
       setLocationsToShow(filtered ? filterLocations(locations) : locations);
-      setMapIsOpened(true);
+      openMap();
     };
 
     return (
@@ -41,13 +41,13 @@ const OpenMapModalBtn = (MapModal) => {
           <FontAwesomeIcon icon={mapIcon} />
         </button>
         <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-        <Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
+        <Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} inNavbar>
           <DropdownMenu right>
             <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
             <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
           </DropdownMenu>
         </Dropdown>
-        <MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
+        <MapModal toggle={closeMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
       </React.Fragment>
     );
   };