Prefer using createAction, switch to boolean vals

phlask · Aug 7, 2024 · c0341dd · c0341dd
1 parent 89e5d58
commit c0341dd
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 31 deletions.
diff --git a/src/actions/actions.js b/src/actions/actions.js
@@ -94,22 +94,10 @@ export const setSelectedPlace = selectedPlace => ({
  selectedPlace
 });
 
-export const SET_SEARCH_BAR_MAP_TINT = 'SET_SEARCH_BAR_MAP_TINT';
-export const setSearchBarMapTint = searchBarMapTintOnOrOff => ({
- type: SET_SEARCH_BAR_MAP_TINT,
- mode: searchBarMapTintOnOrOff
-})
-export const SEARCH_BAR_MAP_TINT_ON = 'SEARCH_BAR_MAP_TINT_ON';
-export const SEARCH_BAR_MAP_TINT_OFF = 'SEARCH_BAR_MAP_TINT_OFF';
-
-export const SET_TAP_INFO_OPENED_WHILE_SEARCH_OPEN = 'SET_TAP_INFO_OPENED_WHILE_SEARCH_OPEN'
-export const setTapInfoOpenedWhileSearchOpen = trueOrFalse => ({
- type: SET_TAP_INFO_OPENED_WHILE_SEARCH_OPEN,
- trueOrFalse
-})
+export const setSearchBarMapTintOn = createAction('SET_SEARCH_BAR_MAP_TINT');
+export const setTapInfoOpenedWhileSearchOpen = createAction('SET_TAP_INFO_OPENED_WHILE_SEARCH_OPEN');
 
 export const setToolbarModal = createAction('SET_TOOLBAR_MODAL');
-
 export const TOOLBAR_MODAL_NONE = 'TOOLBAR_MODAL_NONE';
 export const TOOLBAR_MODAL_RESOURCE = 'TOOLBAR_MODAL_RESOURCE';
 export const TOOLBAR_MODAL_FILTER = 'TOOLBAR_MODAL_FILTER';

diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ReactTouchEvents from 'react-touch-events';
 import {
- SEARCH_BAR_MAP_TINT_ON,
  setMapCenter,
  setUserLocation,
  toggleInfoWindow,
@@ -160,7 +159,7 @@ export const ReactGoogleMaps = ({ google }) => {
  const filteredResources = useSelector(state => selectFilteredResource(state));
  const mapCenter = useSelector(state => state.filterMarkers.mapCenter);
  const resourceType = useSelector(state => state.filterMarkers.resourceType);
- const searchBarMapTint = useSelector(state => state.filterMarkers.searchBarMapTint);
+ const searchBarMapTintOn = useSelector(state => state.filterMarkers.searchBarMapTintOn);
  const showingInfoWindow = useSelector(
  state => state.filterMarkers.showingInfoWindow
  );
@@ -349,7 +348,7 @@ export const ReactGoogleMaps = ({ google }) => {
  </ReactTouchEvents >
  {isMobile && (
  <Fade
- in={searchBarMapTint === SEARCH_BAR_MAP_TINT_ON}
+ in={searchBarMapTintOn}
  timeout={300}
  style={{ position: 'fixed', pointerEvents: 'none' }}
  >

diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
@@ -7,10 +7,8 @@ import PlacesAutocomplete, {
  getLatLng
 } from 'react-places-autocomplete';
 import {
- SEARCH_BAR_MAP_TINT_OFF,
- SEARCH_BAR_MAP_TINT_ON,
  TOOLBAR_MODAL_SEARCH,
- setSearchBarMapTint,
+ setSearchBarMapTintOn,
  setTapInfoOpenedWhileSearchOpen,
 } from '../../actions/actions';
 import styles from './SearchBar.module.scss';
@@ -28,12 +26,12 @@ const SearchBar = ({ search }) => {
 
  const handleChange = address => {
  setAddress(address);
- dispatch(setSearchBarMapTint(SEARCH_BAR_MAP_TINT_ON));
+ dispatch(setSearchBarMapTintOn(true));
  };
 
  const handleSelect = address => {
  setAddress(address);
- dispatch(setSearchBarMapTint(SEARCH_BAR_MAP_TINT_OFF));
+ dispatch(setSearchBarMapTintOn(false));
  geocodeByAddress(address)
  .then(results => getLatLng(results[0]))
  .then(latLng => search(latLng))
@@ -138,7 +136,7 @@ const SearchBar = ({ search }) => {
  disableUnderline={true}
  onFocus={() => {
  if (!tapInfoOpenedWhileSearchOpen) {
- dispatch(setSearchBarMapTint(SEARCH_BAR_MAP_TINT_ON));
+ dispatch(setSearchBarMapTintOn(true));
  }
  else {
  dispatch(setTapInfoOpenedWhileSearchOpen(false));
@@ -147,7 +145,7 @@ const SearchBar = ({ search }) => {
  }
  }
  onBlur={() => {
- dispatch(setSearchBarMapTint(SEARCH_BAR_MAP_TINT_OFF));
+ dispatch(setSearchBarMapTintOn(false));
  }}
  />
  {loading && (

diff --git a/src/reducers/filterMarkers.js b/src/reducers/filterMarkers.js
@@ -21,7 +21,7 @@ const initialState = {
  allResources: [],
  selectedPlace: {},
  toolbarModal: actions.TOOLBAR_MODAL_NONE,
- searchBarMapTint: actions.SEARCH_BAR_MAP_TINT_OFF,
+ setSearchBarMapTintOn: false,
  tapInfoOpenedWhileSearchOpen: false,
  resourceType: WATER_RESOURCE_TYPE,
 };
@@ -137,11 +137,11 @@ export default (state = initialState, act) => {
  ...state,
  showingInfoWindow: act.payload.isShown,
  infoWindowClass: act.payload.infoWindowClass,
- searchBarMapTint: act.payload.isShown ? actions.SEARCH_BAR_MAP_TINT_OFF : state.searchBarMapTint,
+ searchBarMapTintOn: act.payload.isShown ? false : state.setSearchBarMapTintOn,
  tapInfoOpenedWhileSearchOpen:
  act.payload.isShown && (state.toolbarModal === actions.TOOLBAR_MODAL_SEARCH) ? true : false
  };
- 
+
  case actions.toggleInfoWindowClass.type:
  return {
  ...state,
@@ -186,11 +186,11 @@ export default (state = initialState, act) => {
  };
  }
 
- case actions.SET_SEARCH_BAR_MAP_TINT:
- return { ...state, searchBarMapTint: act.mode }
+ case actions.setSearchBarMapTintOn.type:
+ return { ...state, searchBarMapTintOn: act.payload }
 
- case actions.SET_TAP_INFO_OPENED_WHILE_SEARCH_OPEN:
- return { ...state, tapInfoOpenedWhileSearchOpen: act.trueOrFalse }
+ case actions.setTapInfoOpenedWhileSearchOpen.type:
+ return { ...state, tapInfoOpenedWhileSearchOpen: act.payload }
 
  case actions.setToolbarModal.type:
  return { ...state, toolbarModal: act.payload };