From 94c5b2c4710eba6170bbbefc18098c715e825bab Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 5 Apr 2020 12:18:41 +0200 Subject: [PATCH] Improved useToggle hook so that it also returns enabler and disabler --- src/common/MenuLayout.js | 27 +++++++++----------- src/servers/DeleteServerButton.js | 9 ++++--- src/short-urls/CreateShortUrl.js | 2 +- src/short-urls/UseExistingIfFoundInfoIcon.js | 2 +- src/short-urls/helpers/ShortUrlsRowMenu.js | 14 +++++----- src/utils/helpers/hooks.js | 3 ++- src/visits/helpers/OpenMapModalBtn.js | 16 ++++++------ 7 files changed, 36 insertions(+), 37 deletions(-) diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js index ad63d427..8bdb577d 100644 --- a/src/common/MenuLayout.js +++ b/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 ; } 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 ( - setShowSidebar(!showSideBar)} - /> +
- -
setShowSidebar(false)}> + +
hideSidebar()}>
diff --git a/src/servers/DeleteServerButton.js b/src/servers/DeleteServerButton.js index e50610bc..23cab6e4 100644 --- a/src/servers/DeleteServerButton.js +++ b/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 ( - setModalOpen(true)}> + {!children && } {children || 'Remove this server'} - setModalOpen(!isModalOpen)} /> + ); }; diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js index 32544d9e..d2ee0cae 100644 --- a/src/short-urls/CreateShortUrl.js +++ b/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 = {}) => ( diff --git a/src/short-urls/UseExistingIfFoundInfoIcon.js b/src/short-urls/UseExistingIfFoundInfoIcon.js index cfbd2c54..803d4b23 100644 --- a/src/short-urls/UseExistingIfFoundInfoIcon.js +++ b/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 ( diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js index fe490cc8..ae6dc1e7 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.js +++ b/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 [ isQrModalOpen, toggleQrCode ] = useToggle(false); - const [ isPreviewModalOpen, togglePreview ] = useToggle(false); - const [ isTagsModalOpen, toggleTags ] = useToggle(false); - const [ isMetaModalOpen, toggleMeta ] = useToggle(false); - const [ isDeleteModalOpen, toggleDelete ] = useToggle(false); - const [ isEditModalOpen, toggleEdit ] = useToggle(false); + const [ isOpen, toggle ] = useToggle(); + const [ isQrModalOpen, toggleQrCode ] = useToggle(); + const [ isPreviewModalOpen, togglePreview ] = useToggle(); + const [ isTagsModalOpen, toggleTags ] = useToggle(); + const [ isMetaModalOpen, toggleMeta ] = useToggle(); + const [ isDeleteModalOpen, toggleDelete ] = useToggle(); + const [ isEditModalOpen, toggleEdit ] = useToggle(); const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : ''; return ( diff --git a/src/utils/helpers/hooks.js b/src/utils/helpers/hooks.js index 3eef15b5..81a60517 100644 --- a/src/utils/helpers/hooks.js +++ b/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) ]; }; diff --git a/src/visits/helpers/OpenMapModalBtn.js b/src/visits/helpers/OpenMapModalBtn.js index 5d3ec58b..fab798c3 100644 --- a/src/visits/helpers/OpenMapModalBtn.js +++ b/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 [ dropdownIsOpened, setDropdownIsOpened ] = useState(false); + const [ mapIsOpened, , openMap, closeMap ] = useToggle(); + 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) => { buttonRef.current}>Show in map - setDropdownIsOpened(!dropdownIsOpened)} inNavbar> + Show all locations Show locations in current page - + ); };