1486 fix address search in desktop menu (#1497)

* added resetBoundaries and called it from onGeocoderResult to reset Boundaries input during an Address Search

* added comments for address search and boundaries event handlers

* initial debounce

* moved debounce options to settings and added comments

* removed console.log

* removed unused code

* refactored debounce to call wrapper with values defined in settings

* initial map debounce

* initial resetAddressSearch

* renamed updateCouncilsFilter to dispatchUpdateCouncilsFilter in CouncilSelector

* initial debouncedHandleDelete

* initial toggleBoundaires to close boundaries selector box by dispatching click event to #boundaries

* initial refactor to move SelectorBox local state to redux store

* restored SelectorBox back to original since it is a common component and should remain reusable. Created a copy of SelectorBox called BoundariesSection that utilizes ui.boundaries.isOpen redux state instead of a local expanded state which is what SelectorBox uses. Using a redux state variable exposes the state of our BoundariesSection component to all other components, which is needed to perform event dispatches to toggle it open and closed from other components accordingly

* boundaries section now closes from address search. closing the boundaries section from CouncilSelector when selecting a neighborhood council no longer utilizes a click event dispatch but instead makes use of redux closeBoundaries dispatch to set ui.boundaries.isOpen to false

* reset address search input when a previously selected neighborhood council gets unselected from the council selector of the boundaries section

* added code to reset address search input when clicking on a neighborhood district on map

* added code to clear address search input and collapse boundaries section when zooming out of map. Also collapse boundaries section when clicking into a neightborhood district on the map

* renamed dispatchUpdateCouncilsFilter to dispatchUpdateNcId in CouncilSelector to be consistent with other parts of codebase

* added comments

* added comments

* initial fix to sync boundaries and address search

* added comments

* removed concole.log

* added BoundariesSection component

* refactor

* implemented custom event handling in MapSearch to be able to clear the address search input from any component. this fixed a bug. searching A, selecting boundary B and searching A again now works.

* added call to resetAddressSearch from map onClick to reset the address search input during zoom out when clicking outside of a zoomed in nc

* refactored early return even though nothing wrong. do not want to have others think it is ok to do this in react class components. removed TODO comment and added optional chaining to addressSearchIsEmpty

* added comment

* removed commented code

* updated comments and used webpack alias @components to refer to BoundariesSection in CouncilSelector/index.js instead of relative path

* removed commented code

Author: edwinjue

client/components/Map/Map.jsx

@@ -7,15 +7,14 @@ import { withStyles } from '@material-ui/core/styles';
 import mapboxgl from 'mapbox-gl';
 import FilterMenu from '@components/main/Desktop/FilterMenu';
 // import LocationDetail from './LocationDetail';
-
 import { REQUEST_TYPES } from '@components/common/CONSTANTS';
-import { getNcByLngLat, setSelectedNcId } from '@reducers/data';
+import { getNcByLngLat } from '@reducers/data';
 import {
   updateNcId,
   updateSelectedCouncils,
   updateUnselectedCouncils,
 } from '@reducers/filters';
-
+import { closeBoundaries } from '@reducers/ui';
 import {
   INITIAL_BOUNDS,
   INITIAL_LOCATION,
@@ -46,6 +45,10 @@ import MapSearch from './controls/MapSearch';
 
 import RequestDetail from './RequestDetail';
 
+import { debounce } from '@utils';
+
+import settings from '@settings'
+
 const styles = theme => ({
   root: {
     position: 'absolute',
@@ -148,7 +151,7 @@ class Map extends React.Component {
       if (this.isSubscribed) {
         this.initLayers(true);
 
-        map.on('click', this.onClick);
+        map.on('click', this.debouncedOnClick);
 
         map.once('idle', e => {
           this.setState({ mapReady: true });
@@ -235,7 +238,12 @@ class Map extends React.Component {
     }
 
 
-    const { dispatchUpdateNcId,dispatchUpdateSelectedCouncils,dispatchUpdateUnselectedCouncils, councils, ncBoundaries } = this.props;
+    const { 
+      dispatchUpdateNcId,
+      dispatchUpdateSelectedCouncils,
+      dispatchUpdateUnselectedCouncils, 
+      councils, 
+      ncBoundaries } = this.props;
 
     if(this.initialState.councilId && councils?.length > 0 && !(this.hasSetInitialNCView) && ncBoundaries){
       try{
@@ -323,6 +331,8 @@ class Map extends React.Component {
   };
 
   reset = () => {
+    const { dispatchUpdateNcId } = this.props
+
     this.zoomOut();
     this.addressLayer.clearMarker();
     this.ncLayer.clearSelectedRegion();
@@ -336,14 +346,46 @@ class Map extends React.Component {
       selectedNc: null,
     });
 
+    // Set councilId in reducers/filters back to null
+    dispatchUpdateNcId(null)
+       
     this.map.once('zoomend', () => {
       this.setState({
         filterGeo: null,
         canReset: true,
-      });
+      });      
     });
   };
 
+  resetBoundaries = () => {
+    const { 
+      dispatchUpdateNcId, 
+      dispatchUpdateSelectedCouncils,
+      dispatchUpdateUnselectedCouncils,
+      councils } = this.props;
+
+    // Reset the selected NcId back to null.
+    dispatchUpdateNcId(null);
+
+    // Reset councilSelector.
+    dispatchUpdateSelectedCouncils([])
+    dispatchUpdateUnselectedCouncils(councils)
+  }
+
+  addressSearchIsEmpty = () => {
+    const addressSearchInput = document.querySelector('#geocoder input')
+    return !Boolean(addressSearchInput?.value?.trim())
+  }
+
+  resetAddressSearch = () => {
+    if(!this.addressSearchIsEmpty()){
+      // Dispatch custom event to MapSearch to trigger geocoder.clear() to clear Address Search input
+      const geocoderElement = document.getElementById('geocoder')
+      const resetEvent = new Event(settings.map.eventName.reset)
+      geocoderElement.dispatchEvent(resetEvent)
+    }
+  }
+
   onClick = e => {
 
     const hoverables = [
@@ -362,6 +404,7 @@ class Map extends React.Component {
       dispatchUpdateNcId, 
       dispatchUpdateSelectedCouncils,
       dispatchUpdateUnselectedCouncils,
+      dispatchCloseBoundaries,
       councils } = this.props;
 
     for (let i = 0; i < features.length; i++) {
@@ -371,14 +414,16 @@ class Map extends React.Component {
         (this.props.selectedNcId !== null)
         && (feature.properties.council_id && this.props.selectedNcId !== feature.properties.council_id)
       ){
-        // Since click is for another district, zoom out and reset map.
+        // Since click is for another district
 
-        // Reset the selected NcId back to null.
-        dispatchUpdateNcId(null);
+        // Reset boundaries selection
+        this.resetBoundaries()
 
-        // Reset councilSelector.
-        dispatchUpdateSelectedCouncils([])
-        dispatchUpdateUnselectedCouncils(councils)
+        // Collapse boundaries section
+        dispatchCloseBoundaries()
+
+        // Reset Address Search input field
+        this.resetAddressSearch()
 
         // Reset Map.
         this.reset()
@@ -390,6 +435,8 @@ class Map extends React.Component {
         switch (feature.layer.id) {
           case 'nc-fills':
             this.setState({ address: null });
+            this.resetAddressSearch();  // Clear address search input
+            dispatchCloseBoundaries();  // Collapse boundaries section
             const selectedCouncilId = Number(feature.properties.council_id)
             const newSelectedCouncil = councils.find(({ councilId }) => councilId === selectedCouncilId);
             const newSelected = [newSelectedCouncil];
@@ -412,27 +459,61 @@ class Map extends React.Component {
     }
   };
 
+  debouncedOnClick = debounce(this.onClick)
+
   onChangeSearchTab = tab => {
     this.setState({ geoFilterType: tab });
     this.reset();
   };
-
+  
+  // Address Search event handler
+  // An Address Search will triger the onGeocoderResult event
   onGeocoderResult = ({ result }) => {
-    const { dispatchGetNcByLngLat, dispatchUpdateNcId } = this.props;
+    const { 
+      dispatchGetNcByLngLat, 
+      dispatchUpdateNcId,
+      dispatchCloseBoundaries
+    } = this.props;
+
+    // Reset boundaries input
+    this.resetBoundaries()
+    
+    // Collapse boundaries section
+    dispatchCloseBoundaries()
+
+    // Reset map & zoom out
+    this.reset()
+
     if (result.properties.type === GEO_FILTER_TYPES.nc) {
       this.setState({ address: null });
       dispatchUpdateNcId(result.id);
-    } else {
+    } 
+    else {  // When result.properties.type does not equal "District"
       const address = result.place_name
         .split(',')
         .slice(0, -2)
         .join(', ');
 
+      // what does dispatchGetNcByLngLat() do?
+      //
+      // dispatchGetNcByLngLat calls a sagas in redux/sagas/data.js:
+      //  yield takeLatest(types.GET_NC_BY_LNG_LAT, getNcByLngLat);
+      //  which will:
+      //    call(fetchNcByLngLat, action.payload);
+      //  on success: getNcByLngLatSuccess(data) to set value for state.selectedNcId
+      //  on error: getNcByLngLatFailure(e) to set value for state.error object
+      //
+      //  fetchNcByLngLat above makes an API call to:
+      //   `${BASE_URL}/geojson/geocode?latitude=${latitude}&longitude=${longitude}`
+      //
+      //  and returns the data
       dispatchGetNcByLngLat({ longitude: result.center[0], latitude: result.center[1] });
 
       this.setState({
         address: address,
       });
+
+      // Add that cute House Icon on the map
       return this.addressLayer.addMarker([result.center[0], result.center[1]]);
     }
   };
@@ -607,7 +688,10 @@ class Map extends React.Component {
                 onReset={this.reset}
                 canReset={!!filterGeo && canReset}
               />
-              <FilterMenu resetMap={this.reset} />
+              <FilterMenu 
+                resetMap={this.reset} 
+                resetAddressSearch={this.resetAddressSearch}
+              />
               {/* {
                 (selectedNc || address) && <LocationDetail address={address} nc={selectedNc} />
               } */}
@@ -655,6 +739,7 @@ const mapDispatchToProps = dispatch => ({
   dispatchUpdateNcId: id => dispatch(updateNcId(id)),
   dispatchUpdateSelectedCouncils: councils => dispatch(updateSelectedCouncils(councils)),
   dispatchUpdateUnselectedCouncils: councils => dispatch(updateUnselectedCouncils(councils)),
+  dispatchCloseBoundaries: () => dispatch(closeBoundaries()),
 });
 
 // We need to specify forwardRef to allow refs on connected components.

client/components/Map/controls/MapSearch.jsx

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import clx from 'classnames';
 import { withStyles } from '@material-ui/core/styles'
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-import Button from '@material-ui/core/Button';
 import { GEO_FILTER_TYPES } from '../constants';
+import settings from '@settings'
 
 const TABS = Object.values(GEO_FILTER_TYPES);
 
@@ -59,6 +58,22 @@ const styles = theme => ({
 });
 
 class MapSearch extends React.Component {
+  // Array to keep track of event listeners for memory management
+  listeners = []  
+
+  // addListener attaches a new event `listener` to `element` with `eventName` type of event
+  // and adds it to the listeners array 
+  addListener(element, eventName, listener) {
+    element.addEventListener(eventName, listener);
+    this.listeners.push(listener);
+  }
+
+  // removeListeners removes and frees all memory associated with `eventName` type of event
+  // in the listeners array 
+  removeListeners(element, eventName) {
+    this.listeners.forEach(listener => element.removeEventListener(eventName, listener));
+  }
+
   componentDidMount() {
     const { map } = this.props;
 
@@ -93,17 +108,29 @@ class MapSearch extends React.Component {
       },
     });
 
+    // This event fires upon an Address Search submission
     this.geocoder.on('result', ({ result }) => {
       this.props.onGeocoderResult({ result });
 
       // This clears the address from the Address input field.
       // this.geocoder.clear(); 
     });
 
-    document.getElementById('geocoder').appendChild(this.geocoder.onAdd(map));
+    const geocoderElement = document.getElementById('geocoder')
+    geocoderElement.appendChild(this.geocoder.onAdd(map));
+
+    // Add a custom event listener to clear the Address Search Input field
+    this.addListener(geocoderElement, settings.map.eventName.reset, ()=>this.geocoder.clear() )
+    
     // this.setTab(GEO_FILTER_TYPES.address);
   }
 
+  componentWillUnmount() {
+    // Free memory and remove all event listeners
+    const geocoderElement = document.getElementById('geocoder')
+    removeListeners(geocoderElement, settings.map.eventName.reset)
+  }
+
   setTab = tab => {
     this.props.onChangeTab(tab);
     this.geocoder.clear();