refactor(location): use otp-ui location-search component

lib/actions/map.js

@@ -35,6 +35,19 @@ export function clearLocation (payload) {
   }
 }
 
+/**
+ * Handler for @opentripplanner/location-field onLocationSelected
+ */
+export function onLocationSelected ({ locationType, location, resultType }) {
+  return function (dispatch, getState) {
+    if (resultType === 'CURRENT_LOCATION') {
+      dispatch(setLocationToCurrent({ type: locationType }))
+    } else {
+      dispatch(setLocation({ location, type: locationType }))
+    }
+  }
+}
+
 export function setLocation (payload) {
   return function (dispatch, getState) {
     const otpState = getState().otp

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

@@ -0,0 +1,76 @@
+import LocationField from '@opentripplanner/location-field'
+import {
+  DropdownContainer,
+  FormGroup,
+  Input,
+  InputGroup,
+  InputGroupAddon
+} from '@opentripplanner/location-field/lib/styled'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import { clearLocation, onLocationSelected } from '../../actions/map'
+import { addLocationSearch, getCurrentPosition } from '../../actions/location'
+import { findNearbyStops } from '../../actions/api'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
+
+const StyledLocationField = styled(LocationField)`
+  width: 100%;
+
+  ${DropdownContainer} {
+    display: table-cell;
+    vertical-align: middle;
+    width: 1%;
+  }
+
+  ${FormGroup} {
+    display: table;
+    padding: 6px 12px;
+    width: 100%;
+  }
+
+  ${Input} {
+    display: table-cell;
+    padding: 6px 12px;
+    width: 100%;
+  }
+
+  ${InputGroup} {
+    width: 100%;
+  }
+
+  ${InputGroupAddon} {
+    display: table-cell;
+    vertical-align: middle;
+    width: 1%;
+  }
+`
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  const { config, currentQuery, location, transitIndex, user } = state.otp
+  const { currentPosition, nearbyStops, sessionSearches } = location
+  const activeSearch = getActiveSearch(state.otp)
+  const query = activeSearch ? activeSearch.query : currentQuery
+  return {
+    currentPosition,
+    geocoderConfig: config.geocoder,
+    location: query[ownProps.locationType],
+    nearbyStops,
+    sessionSearches,
+    showUserSettings: getShowUserSettings(state.otp),
+    stopsIndex: transitIndex.stops,
+    userLocationsAndRecentPlaces: [...user.locations, ...user.recentPlaces]
+  }
+}
+
+const mapDispatchToProps = {
+  addLocationSearch,
+  findNearbyStops,
+  getCurrentPosition,
+  onLocationSelected,
+  clearLocation
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(StyledLocationField)

lib/components/form/default-search-form.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import LocationField from './location-field'
+import LocationField from './connected-location-field'
 import SwitchButton from './switch-button'
 import TabbedFormPanel from './tabbed-form-panel'
 import defaultIcons from '../icons'
@@ -34,14 +34,14 @@ export default class DefaultSearchForm extends Component {
       <div>
         <div className='locations'>
           <LocationField
-            type='from'
-            label={`Enter start location or ${actionText} on map...`}
+            inputPlaceholder={`Enter start location or ${actionText} on map...`}
+            locationType='from'
             showClearButton
           />
 
           <LocationField
-            type='to'
-            label={`Enter destination or ${actionText} on map...`}
+            inputPlaceholder={`Enter destination or ${actionText} on map...`}
+            locationType='to'
             showClearButton={!mobile}
           />