refactor(LocationField): refactor HOC for LocationField

lib/components/form/connect-location-field.js

@@ -1,29 +1,22 @@
 import { connect } from 'react-redux'
 
-import * as mapActions from '../../actions/map'
 import * as locationActions from '../../actions/location'
 import * as apiActions from '../../actions/api'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
 
 /**
- * This higher-order component connects the given (styled) LocationField to the redux store.
- * It encapsulates the props mapping that must be done explicitly otherwise,
- * even when styling a LocationField component that is already connected to the redux store.
- * @param LocationFieldComponent The LocationFieldComponent to connect.
- * @param options Optional object with the following optional boolean props that determine whether the corresponding
- *                redux state/action is passed to the component (all default to true):
- *                - clearLocation
- *                - location
- *                - onLocationSelected
+ * This higher-order component connects the target (styled) LocationField to the
+ * redux store.
+ * @param StyledLocationField The input LocationField component to connect.
+ * @param options Optional object with the following optional props:
+ *                - actions: a list of actions to include in mapDispatchToProps
+ *                - includeLocation: whether to derive the location prop from
+ *                  the active query
  * @returns The connected component.
  */
-export default function connectLocationField (LocationFieldComponent, options = {}) {
-  const {
-    clearLocation: clearLocationProp = true,
-    location: locationProp = true,
-    onLocationSelected: onLocationSelectedProp = true
-  } = options
-
+export default function connectLocationField (StyledLocationField, options = {}) {
+  // By default, set actions to empty list and do not include location.
+  const {actions = [], includeLocation = false} = options
   const mapStateToProps = (state, ownProps) => {
     const { config, currentQuery, location, transitIndex, user } = state.otp
     const { currentPosition, nearbyStops, sessionSearches } = location
@@ -33,30 +26,23 @@ export default function connectLocationField (LocationFieldComponent, options =
     const stateToProps = {
       currentPosition,
       geocoderConfig: config.geocoder,
+      location: includeLocation ? query[ownProps.locationType] : undefined,
       nearbyStops,
       sessionSearches,
       showUserSettings: getShowUserSettings(state.otp),
       stopsIndex: transitIndex.stops,
       userLocationsAndRecentPlaces: [...user.locations, ...user.recentPlaces]
     }
-    if (locationProp) {
-      stateToProps.location = query[ownProps.locationType]
-    }
 
     return stateToProps
   }
 
   const mapDispatchToProps = {
     addLocationSearch: locationActions.addLocationSearch,
     findNearbyStops: apiActions.findNearbyStops,
-    getCurrentPosition: locationActions.getCurrentPosition
-  }
-  if (clearLocationProp) {
-    mapDispatchToProps.clearLocation = mapActions.clearLocation
-  }
-  if (onLocationSelectedProp) {
-    mapDispatchToProps.onLocationSelected = mapActions.onLocationSelected
+    getCurrentPosition: locationActions.getCurrentPosition,
+    ...actions
   }
 
-  return connect(mapStateToProps, mapDispatchToProps)(LocationFieldComponent)
+  return connect(mapStateToProps, mapDispatchToProps)(StyledLocationField)
 }

lib/components/form/connected-location-field.js

@@ -9,6 +9,7 @@ import {
 } from '@opentripplanner/location-field/lib/styled'
 import styled from 'styled-components'
 
+import * as mapActions from '../../actions/map'
 import connectLocationField from './connect-location-field'
 
 const StyledLocationField = styled(LocationField)`
@@ -51,4 +52,10 @@ const StyledLocationField = styled(LocationField)`
   }
 `
 
-export default connectLocationField(StyledLocationField)
+export default connectLocationField(StyledLocationField, {
+  actions: {
+    clearLocation: mapActions.clearLocation,
+    onLocationSelected: mapActions.onLocationSelected
+  },
+  includeLocation: true
+})

lib/components/form/intermediate-place-field.js

@@ -74,7 +74,4 @@ class IntermediatePlaceField extends Component {
   }
 }
 
-export default connectLocationField(IntermediatePlaceField, {
-  location: false,
-  onLocationSelected: false
-})
+export default connectLocationField(IntermediatePlaceField)

lib/components/user/favorite-location.js

@@ -39,11 +39,7 @@ const StyledLocationField = styled(LocationField)`
     width: 100%;
   }
 `
-const FavoriteLocationField = connectLocationField(StyledLocationField, {
-  clearLocation: false,
-  location: false,
-  onLocationSelected: false
-})
+const FavoriteLocationField = connectLocationField(StyledLocationField)
 
 // Styles for other controls
 const StyledDropdown = styled(DropdownButton)`