From 7ff0aaf411a8cf0bb6b941d22caa1f994ae5402f Mon Sep 17 00:00:00 2001 From: Ravi Makhija Date: Tue, 6 Aug 2024 20:17:01 -0400 Subject: [PATCH] Refactor resource modal - v2 (#463) * Prettier formatting * Refactor resource menu show/hide The mobile resource menu modal shown state was being handled with its own action, TOGGLE_RESOURCE_MENU. Here we retire that action, and instead use SET_TOOLBAR_MODAL, which is consistent with how other toolbar modals' shown state is being handled on both mobile and desktop. * Refactor of resource selection Consolidate behavior of CHANGE_RESOURCE_TYPE and TOGGLE_RESOURCE_TYPE actions into one new action, SET_RESOURCE_TYPE. * Remove unused past component * Reorganize resource selection components Use consistent naming for mobile and desktop resource menu components, and bring to one location. * Remove currently unnecessary isMobile condition Currently the isMobile condition occurs on the parent component, and so is not needed in DesktopChooseResource.js. * Prefer hooks over using redux connect for dispatch * Remove unused import * Minor code order change * Fix - use redux variable directly, not from props * Use strict equality comparisons * Remove no longer used component * Close choose resource modal on mobile after click On mobile, we close the choose resource modal upon resource selection to conserve screen space. * Prefer using `createAction` * Change component name to ChooseResourceType * Share common data, tweak approach Share common data between Mobile and Desktop ChooseResourceType components. And, use a more consistent approach and naming for Desktop and Mobile. * Prefer `sx` over `style` prop for mui components * Use strict equality comparison * Fixes siteInfo test to match new selector value --------- Co-authored-by: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com> --- .eslintignore | 1 - cypress/e2e/desktop/siteInfo.cy.js | 2 +- src/actions/actions.js | 13 +- .../AddResourceModal/useOnClickOutside.js | 40 ++--- .../ChooseResource/ChooseResource.js | 154 ------------------ .../ChooseResourceType/ChooseResourceType.js | 63 +++++++ .../ChooseResourceType.module.scss} | 0 .../DesktopChooseResourceType.js | 99 +++++++++++ .../MobileChooseResourceType.js | 98 +++++++++++ .../ReactGoogleMaps/ReactGoogleMaps.js | 4 +- .../ResourceMenu/Filter.module.scss | 0 src/components/ResourceMenu/ListItemEntry.js | 50 ------ src/components/ResourceMenu/ResourceMenu.js | 87 ---------- src/components/Toolbar/Toolbar.js | 31 ++-- src/components/TypeToggle/TypeToggle.css | 16 -- src/components/TypeToggle/TypeToggle.js | 44 ----- src/hooks/selectors.js | 2 - src/reducers/filterMarkers.js | 18 +- src/selectors/filterMarkersSelectors.js | 1 - 19 files changed, 300 insertions(+), 423 deletions(-) delete mode 100644 src/components/ChooseResource/ChooseResource.js create mode 100644 src/components/ChooseResourceType/ChooseResourceType.js rename src/components/{ChooseResource/ChooseResource.module.scss => ChooseResourceType/ChooseResourceType.module.scss} (100%) create mode 100644 src/components/ChooseResourceType/DesktopChooseResourceType.js create mode 100644 src/components/ChooseResourceType/MobileChooseResourceType.js delete mode 100644 src/components/ResourceMenu/Filter.module.scss delete mode 100644 src/components/ResourceMenu/ListItemEntry.js delete mode 100644 src/components/ResourceMenu/ResourceMenu.js delete mode 100644 src/components/TypeToggle/TypeToggle.css delete mode 100644 src/components/TypeToggle/TypeToggle.js delete mode 100644 src/hooks/selectors.js delete mode 100644 src/selectors/filterMarkersSelectors.js diff --git a/.eslintignore b/.eslintignore index 40874669..e8b07b72 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,4 +10,3 @@ build/ # Unused files Legend.js -TypeToggle.js diff --git a/cypress/e2e/desktop/siteInfo.cy.js b/cypress/e2e/desktop/siteInfo.cy.js index c398780a..f4c9b69c 100644 --- a/cypress/e2e/desktop/siteInfo.cy.js +++ b/cypress/e2e/desktop/siteInfo.cy.js @@ -20,7 +20,7 @@ describe("site info", () => { it("should successfully display a food site", () => { // Switch to food view cy.get('[data-cy=button-resource-type-menu]').click() - cy.get('[data-cy=button-food-data-selector').click() + cy.get('[data-cy=button-FOOD-data-selector]').click() cy.get('[data-cy=button-resource-type-menu]').click() // Load a sample food site diff --git a/src/actions/actions.js b/src/actions/actions.js index e2d1dfc7..dacddbba 100644 --- a/src/actions/actions.js +++ b/src/actions/actions.js @@ -68,9 +68,8 @@ export const setMapCenter = coords => ({ type: SET_MAP_CENTER, coords }); -export const toggleInfoWindow = createAction('TOGGLE_INFO_WINDOW'); -export const TOGGLE_INFO_WINDOW_CLASS = 'TOGGLE_INFO_WINDOW_CLASS'; +export const toggleInfoWindow = createAction('TOGGLE_INFO_WINDOW'); export const toggleInfoWindowClass = createAction('TOGGLE_INFO_WINDOW_CLASS'); export const TOGGLE_INFO_EXPANDED = 'TOGGLE_INFO_EXPANDED'; @@ -103,12 +102,4 @@ export const TOOLBAR_MODAL_FILTER = 'TOOLBAR_MODAL_FILTER'; export const TOOLBAR_MODAL_SEARCH = 'TOOLBAR_MODAL_SEARCH'; export const TOOLBAR_MODAL_CONTRIBUTE = 'TOOLBAR_MODAL_CONTRIBUTE'; -export const toggleResourceType = createAction('TOGGLE_RESOURCE_TYPE'); - -export const toggleResourceMenu = createAction('TOGGLE_RESOURCE_MENU'); - -export const CHANGE_RESOURCE_TYPE = 'CHANGE_RESOURCE_TYPE'; -export const changeResourceType = resourceType => ({ - type: CHANGE_RESOURCE_TYPE, - resourceType -}); +export const setResourceType = createAction('SET_RESOURCE_TYPE'); diff --git a/src/components/AddResourceModal/useOnClickOutside.js b/src/components/AddResourceModal/useOnClickOutside.js index 5fe1a390..6226daf8 100644 --- a/src/components/AddResourceModal/useOnClickOutside.js +++ b/src/components/AddResourceModal/useOnClickOutside.js @@ -1,23 +1,23 @@ import { useEffect } from "react"; const useOnClickOutside = (ref, callback) => { - useEffect(() => { - const listener = (event) => { - if (!ref.current || ref.current.contains(event.target)) { - return; - } - - callback(event); - }; - - document.addEventListener('mousedown', listener); - document.addEventListener('touchstart', listener); - - return () => { - document.removeEventListener('mousedown', listener); - document.removeEventListener('touchstart', listener); - }; - }, [ref, callback]); - }; - - export default useOnClickOutside; \ No newline at end of file + useEffect(() => { + const listener = (event) => { + if (!ref.current || ref.current.contains(event.target)) { + return; + } + + callback(event); + }; + + document.addEventListener('mousedown', listener); + document.addEventListener('touchstart', listener); + + return () => { + document.removeEventListener('mousedown', listener); + document.removeEventListener('touchstart', listener); + }; + }, [ref, callback]); +}; + +export default useOnClickOutside; \ No newline at end of file diff --git a/src/components/ChooseResource/ChooseResource.js b/src/components/ChooseResource/ChooseResource.js deleted file mode 100644 index 7d992bca..00000000 --- a/src/components/ChooseResource/ChooseResource.js +++ /dev/null @@ -1,154 +0,0 @@ -import { Box, Button, Collapse, Paper } from '@mui/material'; -import React, { useRef } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { - CHANGE_RESOURCE_TYPE, - TOOLBAR_MODAL_RESOURCE, - TOOLBAR_MODAL_NONE, - setToolbarModal -} from '../../actions/actions'; -import { - WATER_RESOURCE_TYPE, - FOOD_RESOURCE_TYPE, - BATHROOM_RESOURCE_TYPE, - FORAGE_RESOURCE_TYPE -} from '../../types/ResourceEntry'; -import styles from './ChooseResource.module.scss'; - -import { ReactComponent as BathroomIcon } from '../icons/BathroomIconChooseResource.svg'; -import { ReactComponent as FoodIcon } from '../icons/FoodIconChooseResource.svg'; -import { ReactComponent as ForagingIcon } from '../icons/ForagingIconChooseResource.svg'; -import { ReactComponent as WaterIcon } from '../icons/WaterIconChooseResource.svg'; -import useOnClickOutside from '../../components/AddResourceModal/useOnClickOutside.js'; -import useIsMobile from 'hooks/useIsMobile'; -import { resetFilterFunction } from '../../actions/actions'; - -const ResourceButton = props => { - const Icon = props.icon; - return ( - - ); -}; - -export default function ChooseResource(props) { - const isMobile = useIsMobile(); - - const dispatch = useDispatch(); - - const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal); - - const ref = useRef(null); - - const handleClickOutside = () => { - if (toolbarModal === TOOLBAR_MODAL_RESOURCE) { - dispatch(setToolbarModal({ toolbarModal: TOOLBAR_MODAL_NONE })); - } - }; - - useOnClickOutside(ref, handleClickOutside); - - return ( - <> - {!isMobile && ( - - - - -

Show Resource Type

-

- Choose the type of resource you -
- would like to see on screen -

- - - { - dispatch(resetFilterFunction()) - dispatch({ - type: CHANGE_RESOURCE_TYPE, - resourceType: WATER_RESOURCE_TYPE - }); - }} - data-cy="button-water-data-selector" - /> - { - dispatch(resetFilterFunction()) - dispatch({ - type: CHANGE_RESOURCE_TYPE, - resourceType: FORAGE_RESOURCE_TYPE - }); - }} - data-cy="button-foraging-data-selector" - /> - { - dispatch(resetFilterFunction()) - dispatch({ - type: CHANGE_RESOURCE_TYPE, - resourceType: FOOD_RESOURCE_TYPE - }); - }} - data-cy="button-food-data-selector" - /> - { - dispatch(resetFilterFunction()) - dispatch({ - type: CHANGE_RESOURCE_TYPE, - resourceType: BATHROOM_RESOURCE_TYPE - }); - }} - data-cy="button-bathroom-data-selector" - /> - - - - - )} - {isMobile && } - - ); -} diff --git a/src/components/ChooseResourceType/ChooseResourceType.js b/src/components/ChooseResourceType/ChooseResourceType.js new file mode 100644 index 00000000..a15400c5 --- /dev/null +++ b/src/components/ChooseResourceType/ChooseResourceType.js @@ -0,0 +1,63 @@ +import useIsMobile from 'hooks/useIsMobile'; +import DesktopChooseResourceType from './DesktopChooseResourceType'; +import MobileChooseResourceType from './MobileChooseResourceType'; +import { ReactComponent as DesktopBathroomIcon } from '../icons/BathroomIconChooseResource.svg'; +import { ReactComponent as DesktopFoodIcon } from '../icons/FoodIconChooseResource.svg'; +import { ReactComponent as DesktopForagingIcon } from '../icons/ForagingIconChooseResource.svg'; +import { ReactComponent as DesktopWaterIcon } from '../icons/WaterIconChooseResource.svg'; +import { ReactComponent as MobileWaterIcon } from '../icons/WaterIconV2.svg'; +import { ReactComponent as MobileFoodIcon } from '../icons/FoodIconV2.svg'; +import { ReactComponent as MobileForagingIcon } from '../icons/ForagingIconV2.svg'; +import { ReactComponent as MobileBathroomIcon } from '../icons/ToiletIconV2.svg'; +import { + WATER_RESOURCE_TYPE, + FOOD_RESOURCE_TYPE, + FORAGE_RESOURCE_TYPE, + BATHROOM_RESOURCE_TYPE +} from '../../types/ResourceEntry'; + +const resourceTypeInfo = [ + { + type: WATER_RESOURCE_TYPE, + textLabel: 'Water', + color: "#5286E9", + desktopIcon: DesktopWaterIcon, + mobileIcon: MobileWaterIcon, + }, + { + type: FOOD_RESOURCE_TYPE, + textLabel: 'Food', + color: "#FF9A55", + desktopIcon: DesktopFoodIcon, + mobileIcon: MobileFoodIcon, + }, + { + type: FORAGE_RESOURCE_TYPE, + textLabel: 'Foraging', + color: "#5DA694", + desktopIcon: DesktopForagingIcon, + mobileIcon: MobileForagingIcon, + }, + { + type: BATHROOM_RESOURCE_TYPE, + textLabel: 'Bathroom', + color: "#9E9E9E", + desktopIcon: DesktopBathroomIcon, + mobileIcon: MobileBathroomIcon, + } +] + +const ChooseResourceType = () => { + + const isMobile = useIsMobile(); + + return ( + <>{!isMobile ? + + : + } + + ); +}; + +export default ChooseResourceType; diff --git a/src/components/ChooseResource/ChooseResource.module.scss b/src/components/ChooseResourceType/ChooseResourceType.module.scss similarity index 100% rename from src/components/ChooseResource/ChooseResource.module.scss rename to src/components/ChooseResourceType/ChooseResourceType.module.scss diff --git a/src/components/ChooseResourceType/DesktopChooseResourceType.js b/src/components/ChooseResourceType/DesktopChooseResourceType.js new file mode 100644 index 00000000..d0e1923b --- /dev/null +++ b/src/components/ChooseResourceType/DesktopChooseResourceType.js @@ -0,0 +1,99 @@ +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Collapse from '@mui/material/Collapse'; +import Paper from '@mui/material/Paper'; +import { useRef } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; + +import { + resetFilterFunction, + setResourceType, + setToolbarModal, + TOOLBAR_MODAL_NONE, + TOOLBAR_MODAL_RESOURCE +} from '../../actions/actions'; +import useOnClickOutside from '../AddResourceModal/useOnClickOutside.js'; +import styles from './ChooseResourceType.module.scss'; + +const DesktopResourceButton = props => { + const dispatch = useDispatch(); + const Icon = props.desktopIcon; + return ( + + ); +}; + +function DesktopChooseResourceType(props) { + const dispatch = useDispatch(); + const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal); + const ref = useRef(null); + + const handleClickOutside = () => { + if (toolbarModal === TOOLBAR_MODAL_RESOURCE) { + dispatch(setToolbarModal(TOOLBAR_MODAL_NONE)) + } + }; + + useOnClickOutside(ref, handleClickOutside); + + return ( + <> + + + + +

Show Resource Type

+

+ Choose the type of resource you +
+ would like to see on screen +

+ + + {props.resourceTypeInfo.map(entry => ( + ))} + + + + + + ); +} + +export default DesktopChooseResourceType; diff --git a/src/components/ChooseResourceType/MobileChooseResourceType.js b/src/components/ChooseResourceType/MobileChooseResourceType.js new file mode 100644 index 00000000..1237f284 --- /dev/null +++ b/src/components/ChooseResourceType/MobileChooseResourceType.js @@ -0,0 +1,98 @@ +import Box from '@mui/material/Box'; +import Dialog from '@mui/material/Dialog'; +import List from '@mui/material/List'; +import Slide from '@mui/material/Slide'; +import Grid from '@mui/material/Grid'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; +import { useDispatch, useSelector } from 'react-redux'; + +import { + resetFilterFunction, + setResourceType, + setToolbarModal, + TOOLBAR_MODAL_NONE, + TOOLBAR_MODAL_RESOURCE +} from '../../actions/actions'; + +const MobileResourceButton = props => { + const dispatch = useDispatch(); + + function handleGA(type) { + // ReactGA.event({ + // category: `ResourceMenu`, + // action: 'MapChangedTo', + // label: `${type}` + // }); + } + + const switchType = type => { + handleGA(type); + dispatch(setResourceType(type)); + dispatch(setToolbarModal(TOOLBAR_MODAL_NONE)); + }; + + return ( + { + dispatch(resetFilterFunction()) + switchType(props.type) + }} + > + + + + + + {props.textLabel} + + + + + + ); +}; + +const MobileChooseResourceType = (props) => { + const dispatch = useDispatch(); + const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal); + + return ( + + dispatch(setToolbarModal(TOOLBAR_MODAL_NONE))} + PaperProps={{ + sx: { + background: 'transparent', + overflow: 'visible', + boxShadow: 'none', + position: 'absolute', + bottom: '0vh', + left: '0vh', + transform: 'translate(-13%, -28%)' + } + }} + > + + + {props.resourceTypeInfo.map(entry => ( + + ))} + + + + + ); +}; + +export default MobileChooseResourceType; diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js index e594b584..009d4247 100644 --- a/src/components/ReactGoogleMaps/ReactGoogleMaps.js +++ b/src/components/ReactGoogleMaps/ReactGoogleMaps.js @@ -21,7 +21,7 @@ import SelectedTap from '../SelectedTap/SelectedTap'; import styles from './ReactGoogleMaps.module.scss'; import Stack from '@mui/material/Stack'; import AddResourceModalV2 from '../AddResourceModal/AddResourceModalV2'; -import ChooseResource from '../ChooseResource/ChooseResource'; +import ChooseResourceType from '../ChooseResourceType/ChooseResourceType'; import TutorialModal from '../TutorialModal/TutorialModal'; import Filter from '../Filter/Filter'; import Toolbar from '../Toolbar/Toolbar'; @@ -370,7 +370,7 @@ export const ReactGoogleMaps = ({ google }) => { /> - + { - const dispatch = useDispatch(); - const isMobile = useIsMobile(); - const isResourceMenuShown = useSelector(isResourceMenuShownSelector); - - const switchType = type => { - dispatch( - toggleResourceType({ - resourceType: type, - infoWindowClass: isMobile - ? 'info-window-out' - : 'info-window-out-desktop' - }) - ); - dispatch(toggleResourceMenu({ isShown: isResourceMenuShown })); - }; - - return ( - { - switchType(actionLabel); - }} - > - {icon} - - - - - {resourceType} - - - - - - ); -}; - -export default ListItemEntry; diff --git a/src/components/ResourceMenu/ResourceMenu.js b/src/components/ResourceMenu/ResourceMenu.js deleted file mode 100644 index 6df0e76e..00000000 --- a/src/components/ResourceMenu/ResourceMenu.js +++ /dev/null @@ -1,87 +0,0 @@ -import Box from '@mui/material/Box'; -import Dialog from '@mui/material/Dialog'; -import List from '@mui/material/List'; -import Slide from '@mui/material/Slide'; -import { useDispatch, useSelector } from 'react-redux'; -import { isResourceMenuShownSelector } from '../../hooks/selectors'; -import { ReactComponent as FoodIcon } from '../icons/FoodIconV2.svg'; -import { ReactComponent as ForagingIcon } from '../icons/ForagingIconV2.svg'; -import { ReactComponent as ToiletIcon } from '../icons/ToiletIconV2.svg'; -import { ReactComponent as WaterIcon } from '../icons/WaterIconV2.svg'; -import ListItemEntry from './ListItemEntry'; - -import { - WATER_RESOURCE_TYPE, - FOOD_RESOURCE_TYPE, - FORAGE_RESOURCE_TYPE, - BATHROOM_RESOURCE_TYPE -} from '../../types/ResourceEntry'; -import { toggleResourceMenu } from '../../actions/actions'; - -const listItems = [ - { - resourceType: 'Water', - icon: , - actionLabel: WATER_RESOURCE_TYPE - }, - { - resourceType: 'Food', - icon: , - actionLabel: FOOD_RESOURCE_TYPE - }, - { - resourceType: 'Foraging', - icon: , - actionLabel: FORAGE_RESOURCE_TYPE - }, - { - resourceType: 'Bathroom', - icon: , - actionLabel: BATHROOM_RESOURCE_TYPE - } -]; - -const ResourceMenu = () => { - const dispatch = useDispatch(); - const isResourceMenuShown = useSelector(isResourceMenuShownSelector); - - const handleToggleResourceMenu = () => { - dispatch(toggleResourceMenu({ isShown: isResourceMenuShown })); - }; - - return ( - - handleToggleResourceMenu()} - PaperProps={{ - style: { - background: 'transparent', - overflow: 'visible', - boxShadow: 'none', - position: 'absolute', - bottom: '0vh', - left: '0vh', - transform: 'translate(-13%, -28%)' - } - }} - > - - - {listItems?.map(entry => ( - - ))} - - - - - ); -}; - -export default ResourceMenu; diff --git a/src/components/Toolbar/Toolbar.js b/src/components/Toolbar/Toolbar.js index f764a146..be0318c5 100644 --- a/src/components/Toolbar/Toolbar.js +++ b/src/components/Toolbar/Toolbar.js @@ -1,5 +1,5 @@ import IconButton from '@mui/material/Button'; -import { useSelector, useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { TOOLBAR_MODAL_CONTRIBUTE, TOOLBAR_MODAL_FILTER, @@ -9,7 +9,6 @@ import { setSelectedPlace, setToolbarModal, toggleInfoWindow, - toggleResourceMenu } from '../../actions/actions'; import styles from './Toolbar.module.scss'; @@ -37,8 +36,8 @@ import { ReactComponent as WaterPhlaskButton } from '../icons/PhlaskButtons/Wate import { SvgIcon, Typography } from '@mui/material'; import BottomNavigation from '@mui/material/BottomNavigation'; import Box from '@mui/material/Box'; -import { resourceTypeSelector } from '../../selectors/filterMarkersSelectors'; -import ResourceMenu from '../ResourceMenu/ResourceMenu'; +import ChooseResource from '../ChooseResourceType/ChooseResourceType'; + import NavigationItem from './NavigationItem'; import useIsMobile from '../../hooks/useIsMobile'; import selectFilteredResource from '../../selectors/resourceSelectors'; @@ -87,14 +86,11 @@ function getClosest(data, userLocation) { function Toolbar({ map }) { const dispatch = useDispatch(); const isMobile = useIsMobile(); - const resourceType = useSelector(resourceTypeSelector); + const resourceType = useSelector(state => state.filterMarkers.resourceType); const allResources = useSelector(state => state.filterMarkers.allResources); const filteredResources = useSelector(state => selectFilteredResource(state)); const userLocation = useSelector(state => state.filterMarkers.userLocation); const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal); - const isResourceMenuShown = useSelector( - state => state.filterMarkers.isResourceMenuShown - ); const blackToGrayFilter = 'invert(43%) sepia(20%) saturate(526%) hue-rotate(178deg) brightness(95%) contrast(93%)'; @@ -133,9 +129,8 @@ function Toolbar({ map }) { } function toolbarClicked(modal) { - dispatch( - setToolbarModal(toolbarModal === modal ? TOOLBAR_MODAL_NONE : modal) - ); + if (toolbarModal === modal) dispatch(setToolbarModal(TOOLBAR_MODAL_NONE)); + else dispatch(setToolbarModal(modal)); } let phlaskButton = null; @@ -199,7 +194,7 @@ function Toolbar({ map }) { flexDirection: 'column', p: 0, filter: - toolbarModal == TOOLBAR_MODAL_RESOURCE + toolbarModal === TOOLBAR_MODAL_RESOURCE ? blackToGrayFilter : 'none', '&:hover': { @@ -228,7 +223,7 @@ function Toolbar({ map }) { flexDirection: 'column', p: 0, filter: - toolbarModal == TOOLBAR_MODAL_FILTER + toolbarModal === TOOLBAR_MODAL_FILTER ? blackToGrayFilter : 'none', '&:hover': { @@ -257,7 +252,7 @@ function Toolbar({ map }) { flexDirection: 'column', p: 0, filter: - toolbarModal == TOOLBAR_MODAL_SEARCH + toolbarModal === TOOLBAR_MODAL_SEARCH ? blackToGrayFilter : 'none', '&:hover': { @@ -286,7 +281,7 @@ function Toolbar({ map }) { flexDirection: 'column', p: 0, filter: - toolbarModal == TOOLBAR_MODAL_CONTRIBUTE + toolbarModal === TOOLBAR_MODAL_CONTRIBUTE ? blackToGrayFilter : 'none', '&:hover': { @@ -326,11 +321,9 @@ function Toolbar({ map }) { data-cy="button-resource-type-menu" label={Resources} icon={} - onClick={() => - toggleResourceMenu({ isShown: isResourceMenuShown }) - } + onClick={() => toolbarClicked(TOOLBAR_MODAL_RESOURCE)} /> - + -
- { - switchType( - resourceTypeIcon === waterButton ? foodButton : waterButton - ); - }} - > -
- - ); -} - -export default TypeToggle; diff --git a/src/hooks/selectors.js b/src/hooks/selectors.js deleted file mode 100644 index 1f51cbb5..00000000 --- a/src/hooks/selectors.js +++ /dev/null @@ -1,2 +0,0 @@ -export const isResourceMenuShownSelector = state => - state.filterMarkers.isResourceMenuShown; diff --git a/src/reducers/filterMarkers.js b/src/reducers/filterMarkers.js index e5ba791a..ee0e3846 100644 --- a/src/reducers/filterMarkers.js +++ b/src/reducers/filterMarkers.js @@ -21,8 +21,7 @@ const initialState = { allResources: [], selectedPlace: {}, toolbarModal: actions.TOOLBAR_MODAL_NONE, - resourceType: WATER_RESOURCE_TYPE, - isResourceMenuShown: false + resourceType: WATER_RESOURCE_TYPE }; export default (state = initialState, act) => { @@ -184,19 +183,8 @@ export default (state = initialState, act) => { case actions.setToolbarModal.type: return { ...state, toolbarModal: act.payload }; - // Toggle Phlask type & close the info window - case actions.toggleResourceType.type: - return { - ...state, - resourceType: act.payload.resourceType, - infoWindowClass: act.payload.infoWindowClass - }; - - case actions.CHANGE_RESOURCE_TYPE: - return { ...state, resourceType: act.resourceType }; - - case actions.toggleResourceMenu.type: - return { ...state, isResourceMenuShown: !act.payload.isShown }; + case actions.setResourceType.type: + return { ...state, resourceType: act.payload }; default: return state; diff --git a/src/selectors/filterMarkersSelectors.js b/src/selectors/filterMarkersSelectors.js deleted file mode 100644 index a092933d..00000000 --- a/src/selectors/filterMarkersSelectors.js +++ /dev/null @@ -1 +0,0 @@ -export const resourceTypeSelector = state => state.filterMarkers.resourceType;