Fix behavior of map tint due to search bar changes

src/actions/actions.js

@@ -94,8 +94,10 @@ export const setSelectedPlace = selectedPlace => ({
  selectedPlace
 });
 
-export const setToolbarModal = createAction('SET_TOOLBAR_MODAL');
+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';

src/components/Head/Head.js

@@ -1,6 +1,3 @@
-import About from '../Pages/About.js';
-import Contact from '../Pages/Contact.js';
-import Join from '../Pages/Join.js';
 import MobileHead from '../MobileHead/MobileHead';
 import { HeaderProvider } from '../../contexts/HeaderContext'; // Import the HeaderContext component
 import { DesktopHead } from '../DesktopHead/DesktopHead';

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 {
- TOOLBAR_MODAL_SEARCH,
  setMapCenter,
  setUserLocation,
  toggleInfoWindow,
@@ -160,6 +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 searchBarMapTintOn = useSelector(state => state.filterMarkers.searchBarMapTintOn);
  const showingInfoWindow = useSelector(
  state => state.filterMarkers.showingInfoWindow
  );
@@ -345,10 +345,10 @@ export const ReactGoogleMaps = ({ google }) => {
  )}
  </Map>
  </div>
- </ReactTouchEvents>
+ </ReactTouchEvents >
  {isMobile && (
  <Fade
- in={toolbarModal == TOOLBAR_MODAL_SEARCH}
+ in={searchBarMapTintOn}
  timeout={300}
  style={{ position: 'fixed', pointerEvents: 'none' }}
  >

src/components/SearchBar/SearchBar.js

@@ -6,20 +6,32 @@ import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
 } from 'react-places-autocomplete';
-import { TOOLBAR_MODAL_SEARCH, setToolbarModal } from '../../actions/actions';
+import {
+ TOOLBAR_MODAL_SEARCH,
+ setSearchBarMapTintOn,
+ setTapInfoOpenedWhileSearchOpen,
+} from '../../actions/actions';
 import styles from './SearchBar.module.scss';
 import useIsMobile from 'hooks/useIsMobile';
 import noop from 'utils/noop';
-import { useSelector } from 'react-redux/es/exports';
+import { useSelector, useDispatch } from 'react-redux';
 
 const SearchBar = ({ search }) => {
- const refSearchBar = useRef();
+ const refSearchBarInput = useRef();
  const [address, setAddress] = useState('');
+ const tapInfoOpenedWhileSearchOpen = useSelector(state => state.filterMarkers.tapInfoOpenedWhileSearchOpen);
  const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal);
  const isMobile = useIsMobile();
+ const dispatch = useDispatch();
+
+ const handleChange = address => {
+ setAddress(address);
+ dispatch(setSearchBarMapTintOn(true));
+ };
 
  const handleSelect = address => {
  setAddress(address);
+ dispatch(setSearchBarMapTintOn(false));
  geocodeByAddress(address)
  .then(results => getLatLng(results[0]))
  .then(latLng => search(latLng))
@@ -34,7 +46,7 @@ const SearchBar = ({ search }) => {
  <div className={styles.desktopSearch}>
  <PlacesAutocomplete
  value={address}
- onChange={setAddress}
+ onChange={handleChange}
  onSelect={handleSelect}
  >
  {({
@@ -44,11 +56,10 @@ const SearchBar = ({ search }) => {
  loading
  }) => (
  <div
- className={`${styles.searchBarContainer} ${
- loading || suggestions.length > 0
- ? styles.hasDropdown
- : ''
- }`}
+ className={`${styles.searchBarContainer} ${loading || suggestions.length > 0
+ ? styles.hasDropdown
+ : ''
+ }`}
  >
  {/* type="search" is only HTML5 compliant */}
  <Input
@@ -57,7 +68,6 @@ const SearchBar = ({ search }) => {
  })}
  className={`${styles.searchInput} form-control`}
  type="search"
- ref={refSearchBar}
  startAdornment={
  <InputAdornment position="end">
  <SearchIcon />
@@ -96,7 +106,7 @@ const SearchBar = ({ search }) => {
  <div className={styles.mobileSearch}>
  <PlacesAutocomplete
  value={address}
- onChange={setAddress}
+ onChange={handleChange}
  onSelect={handleSelect}
  >
  {({
@@ -106,25 +116,37 @@ const SearchBar = ({ search }) => {
  loading
  }) => (
  <div
- className={`${styles.searchBarContainer} ${
- loading || suggestions.length > 0
- ? styles.hasDropdown
- : ''
- }`}
+ className={`${styles.searchBarContainer} ${loading || suggestions.length > 0
+ ? styles.hasDropdown
+ : ''
+ }`}
  >
- <Input
+ <Input autoFocus
  {...getInputProps({
  placeholder: 'Search for Resources near...'
  })}
  className={styles.mobileSearchInput}
+ inputRef={refSearchBarInput}
  type="search"
- ref={refSearchBar}
  endAdornment={
  <InputAdornment position="start">
  <SearchIcon />
  </InputAdornment>
  }
  disableUnderline={true}
+ onFocus={() => {
+ if (!tapInfoOpenedWhileSearchOpen) {
+ dispatch(setSearchBarMapTintOn(true));
+ }
+ else {
+ dispatch(setTapInfoOpenedWhileSearchOpen(false));
+ refSearchBarInput.current.blur();
+ }
+ }
+ }
+ onBlur={() => {
+ dispatch(setSearchBarMapTintOn(false));
+ }}
  />
  {loading && (
  <div className={styles.autocompleteDropdown}>

src/components/SelectedTap/SelectedTap.js

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
  toggleInfoExpanded,
  toggleInfoWindow,
- toggleInfoWindowClass
+ toggleInfoWindowClass,
 } from '../../actions/actions';
 import SelectedTapHours from '../SelectedTapHours/SelectedTapHours';
 

src/reducers/filterMarkers.js

@@ -21,7 +21,9 @@ const initialState = {
  allResources: [],
  selectedPlace: {},
  toolbarModal: actions.TOOLBAR_MODAL_NONE,
- resourceType: WATER_RESOURCE_TYPE
+ setSearchBarMapTintOn: false,
+ tapInfoOpenedWhileSearchOpen: false,
+ resourceType: WATER_RESOURCE_TYPE,
 };
 
 export default (state = initialState, act) => {
@@ -134,8 +136,12 @@ export default (state = initialState, act) => {
  return {
  ...state,
  showingInfoWindow: act.payload.isShown,
- infoWindowClass: act.payload.infoWindowClass
+ infoWindowClass: act.payload.infoWindowClass,
+ 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,
@@ -180,6 +186,12 @@ export default (state = initialState, act) => {
  };
  }
 
+ case actions.setSearchBarMapTintOn.type:
+ return { ...state, searchBarMapTintOn: act.payload }
+
+ case actions.setTapInfoOpenedWhileSearchOpen.type:
+ return { ...state, tapInfoOpenedWhileSearchOpen: act.payload }
+
  case actions.setToolbarModal.type:
  return { ...state, toolbarModal: act.payload };