Merge pull request #185 from opentripplanner/update-overlay-visibility

fix(default-map): Bring back vehicle rental overlay visibility support

lib/components/map/default-map.js

@@ -8,6 +8,7 @@ import {
   carRentalQuery,
   vehicleRentalQuery
 } from '../../actions/api'
+import { updateOverlayVisibility } from '../../actions/config'
 import {
   setLocation,
   setMapPopupLocation,
@@ -42,6 +43,57 @@ const MapContainer = styled.div`
 `
 
 class DefaultMap extends Component {
+  /**
+   * Checks whether the modes have changed between old and new queries and
+   * whether to update the map overlays accordingly (e.g., to show rental vehicle
+   * options on the map).
+   */
+  _handleQueryChange = (oldQuery, newQuery) => {
+    const { overlays } = this.props
+    if (overlays && oldQuery.mode) {
+      // Determine any added/removed modes
+      const oldModes = oldQuery.mode.split(',')
+      const newModes = newQuery.mode.split(',')
+      const removed = oldModes.filter(m => !newModes.includes(m))
+      const added = newModes.filter(m => !oldModes.includes(m))
+      const overlayVisibility = {}
+      for (const oConfig of overlays) {
+        if (!oConfig.modes || oConfig.modes.length !== 1) continue
+        // TODO: support multi-mode overlays
+        const overlayMode = oConfig.modes[0]
+
+        if (
+          (
+            overlayMode === 'CAR_RENT' ||
+            overlayMode === 'CAR_HAIL' ||
+            overlayMode === 'MICROMOBILITY_RENT'
+          ) &&
+          oConfig.companies
+        ) {
+          // Special handling for company-based mode overlays (e.g. carshare, car-hail)
+          const overlayCompany = oConfig.companies[0] // TODO: handle multi-company overlays
+          if (added.includes(overlayMode)) {
+            // Company-based mode was just selected; enable overlay iff overlay's company is active
+            if (newQuery.companies.includes(overlayCompany)) overlayVisibility[oConfig.name] = true
+          } else if (removed.includes(overlayMode)) {
+            // Company-based mode was just deselected; disable overlay (regardless of company)
+            overlayVisibility[oConfig.name] = false
+          } else if (newModes.includes(overlayMode) && oldQuery.companies !== newQuery.companies) {
+            // Company-based mode remains selected but companies change
+            overlayVisibility[oConfig.name] = newQuery.companies.includes(overlayCompany)
+          }
+        } else { // Default handling for other modes
+          if (added.includes(overlayMode)) overlayVisibility[oConfig.name] = true
+          if (removed.includes(overlayMode)) overlayVisibility[oConfig.name] = false
+        }
+      }
+      // Only trigger update action if there are overlays to update.
+      if (Object.keys(overlayVisibility).length > 0) {
+        this.props.updateOverlayVisibility(overlayVisibility)
+      }
+    }
+  }
+
   onMapClick = (e) => {
     this.props.setMapPopupLocationAndGeocode(e)
   }
@@ -56,6 +108,11 @@ class DefaultMap extends Component {
     setLocation(payload)
   }
 
+  componentDidUpdate (prevProps) {
+    // Check if any overlays should be toggled due to mode change
+    this._handleQueryChange(prevProps.query, this.props.query)
+  }
+
   render () {
     const {
       bikeRentalQuery,
@@ -146,11 +203,16 @@ class DefaultMap extends Component {
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
+  const overlays = state.otp.config.map && state.otp.config.map.overlays
+    ? state.otp.config.map.overlays
+    : []
   return {
     bikeRentalStations: state.otp.overlay.bikeRental.stations,
     carRentalStations: state.otp.overlay.carRental.stations,
     mapConfig: state.otp.config.map,
     mapPopupLocation: state.otp.ui.mapPopupLocation,
+    overlays,
+    query: state.otp.currentQuery,
     vehicleRentalStations: state.otp.overlay.vehicleRental.stations
   }
 }
@@ -161,6 +223,7 @@ const mapDispatchToProps = {
   setLocation,
   setMapPopupLocation,
   setMapPopupLocationAndGeocode,
+  updateOverlayVisibility,
   vehicleRentalQuery
 }