fix: fix recent search onSelect

Author: landonreed

lib/actions/api.js

@@ -123,7 +123,8 @@ export function routingQuery (searchId = null) {
     // performing a search based on query params taken from the URL after a back
     // button press, we don't need to update the OTP URL.
     // TODO: Should we be replacing the URL params here?
-    if (isNewSearch) {
+    const params = getUrlParams()
+    if (isNewSearch || params.ui_activeSearch !== searchId) {
       dispatch(updateOtpUrlParams(otpState, searchId))
     }
     // also fetch a non-realtime route
@@ -746,7 +747,6 @@ export function setUrlSearch (params, replaceCurrent = false) {
  */
 export function updateOtpUrlParams (otpState, searchId) {
   const otpParams = getRoutingParams(otpState, true)
-  console.log('updating OTP URL params', otpState)
   return function (dispatch, getState) {
     const params = {}
     // Get all OTP-specific params, which will be retained unchanged in the URL

lib/actions/form.js

@@ -34,7 +34,7 @@ export function resetForm () {
       dispatch(settingQueryParam(otpState.user.defaults))
     } else {
       // Get user overrides and apply to default query
-      const userOverrides = getItem('defaultQuery')
+      const userOverrides = getItem('defaultQuery', {})
       const defaultQuery = Object.assign(getDefaultQuery(), userOverrides)
       // Filter out non-options (i.e., date, places).
       const options = getTripOptionsFromQuery(defaultQuery)
@@ -48,7 +48,8 @@ export function resetForm () {
 
 /**
  * Action to update any specified query parameter. Replaces previous series of
- * parameter-specific actions.
+ * parameter-specific actions. If a search ID is provided, a routing query (OTP
+ * search) will be kicked off immediately.
  */
 export function setQueryParam (payload, searchId) {
   return function (dispatch, getState) {

lib/components/form/user-settings.js

@@ -78,30 +78,27 @@ class UserSettings extends Component {
             : <small>No favorite stops </small>
           }
         </ul>
-        {trackRecent &&
+        {trackRecent && recentPlaces.length > 0 &&
           <div className='recent-places-container'>
             <hr />
             <div className='section-header'>Recent places</div>
             <ul style={{ padding: 0 }}>
-              {recentPlaces.length > 0
-                ? recentPlaces.map(location => {
-                  return <Place key={location.id} location={location} {...this.props} />
-                })
-                : <small>No recent places </small>
-              }
+              {recentPlaces.map(location => {
+                return <Place key={location.id} location={location} {...this.props} />
+              })}
             </ul>
           </div>
         }
-        {trackRecent &&
+        {trackRecent && recentSearches.length > 0 &&
           <div className='recent-searches-container'>
             <hr />
             <div className='section-header'>Recent searches</div>
             <ul style={{ padding: 0 }}>
-              {recentSearches.sort((a, b) => b.timestamp - a.timestamp).length > 0
-                ? recentSearches.map(search => {
+              {recentSearches
+                .sort((a, b) => b.timestamp - a.timestamp)
+                .map(search => {
                   return <RecentSearch key={search.id} search={search} {...this.props} />
                 })
-                : <small>No recent searches</small>
               }
             </ul>
           </div>
@@ -215,7 +212,8 @@ class Place extends Component {
 class RecentSearch extends Component {
   _onSelect = () => {
     const { search, setQueryParam } = this.props
-    setQueryParam(search.query)
+    // Update query params and initiate search.
+    setQueryParam(search.query, search.id)
   }
 
   _onForget = () => this.props.forgetSearch(this.props.search.id)

lib/components/viewers/stop-viewer.js

@@ -50,8 +50,8 @@ class StopViewer extends Component {
   }
 
   _onToggleAutoRefresh = () => {
-    const { autoRefresh, toggleAutoRefresh } = this.props
-    if (autoRefresh) {
+    const { autoRefreshStopTimes, toggleAutoRefresh } = this.props
+    if (autoRefreshStopTimes) {
       toggleAutoRefresh(false)
     } else {
       // Turn on auto-refresh and refresh immediately to give user feedback.
@@ -66,7 +66,7 @@ class StopViewer extends Component {
     // Load the viewed stop in the store when the Stop Viewer first mounts
     this.props.findStop({ stopId: this.props.viewedStop.stopId })
     // Turn on stop times refresh if enabled.
-    if (this.props.autoRefresh) this._startAutoRefresh()
+    if (this.props.autoRefreshStopTimes) this._startAutoRefresh()
   }
 
   componentWillUnmount () {
@@ -102,8 +102,8 @@ class StopViewer extends Component {
     ) {
       this.props.findStop({ stopId: nextProps.viewedStop.stopId })
     }
-    if (this.props.autoRefresh && !nextProps.autoRefresh) this._stopAutoRefresh()
-    else if (!this.props.autoRefresh && nextProps.autoRefresh) this._startAutoRefresh()
+    if (this.props.autoRefreshStopTimes && !nextProps.autoRefreshStopTimes) this._stopAutoRefresh()
+    else if (!this.props.autoRefreshStopTimes && nextProps.autoRefreshStopTimes) this._startAutoRefresh()
   }
 
   render () {
@@ -227,7 +227,7 @@ class StopViewer extends Component {
                 <input
                   name='autoUpdate'
                   type='checkbox'
-                  checked={this.props.autoRefresh}
+                  checked={this.props.autoRefreshStopTimes}
                   onChange={this._onToggleAutoRefresh} />{' '}
                 Auto-refresh arrivals?
               </label>
@@ -450,7 +450,7 @@ function getStatusLabel (delay) {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    autoRefresh: state.otp.user.autoRefresh,
+    autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
     favoriteStops: state.otp.user.favoriteStops,
     homeTimezone: state.otp.config.homeTimezone,
     viewedStop: state.otp.ui.viewedStop,

lib/reducers/create-otp-reducer.js

@@ -22,17 +22,27 @@ const defaultConfig = {
   routingTypes: []
 }
 
-// Load user override settings from local storage.
-// TODO: Make this work with settings fetched from user profile API service.
-const userOverrides = getItem('defaultQuery')
+// Load user settings from local storage.
+// TODO: Make this work with settings fetched from alternative storage system
+//  (e.g., OTP backend middleware containing user profile system).
+// User overrides determine user's default mode/query parameters.
+const userOverrides = getItem('defaultQuery', {})
+// Combine user overrides with default query to get default search settings.
 const defaults = Object.assign(getDefaultQuery(), userOverrides)
-const autoRefresh = getItem('autoRefresh', true)
-const home = getItem('home', true)
-const work = getItem('work', true)
-const trackRecent = getItem('trackRecent', true) || false
-const recentPlaces = getItem('recent', true) || []
-const favoriteStops = getItem('favoriteStops', true) || []
-const recentSearches = getItem('recentSearches', true) || []
+// Whether to auto-refresh stop arrival times in the Stop Viewer.
+const autoRefreshStopTimes = getItem('autoRefreshStopTimes', true)
+// User's home and work locations
+const home = getItem('home')
+const work = getItem('work')
+// Whether recent searches and places should be tracked in local storage.
+const trackRecent = getItem('trackRecent', false)
+// Recent places used in trip plan searches.
+const recentPlaces = getItem('recent', [])
+// List of user's favorite stops.
+const favoriteStops = getItem('favoriteStops', [])
+// Recent trip plan searches (excluding time/date parameters to avoid complexity).
+const recentSearches = getItem('recentSearches', [])
+// Filter valid locations found into locations list.
 const locations = [home, work].filter(p => p)
 const MAX_RECENT_STORAGE = 5
 // TODO: parse and merge URL query params w/ default query
@@ -76,7 +86,7 @@ function createOtpReducer (config, initialQuery) {
       nearbyStops: []
     },
     user: {
-      autoRefresh,
+      autoRefreshStopTimes,
       // Do not store from/to or date/time in defaults
       defaults: getTripOptionsFromQuery(defaults),
       favoriteStops,
@@ -605,8 +615,8 @@ function createOtpReducer (config, initialQuery) {
           }
         })
       case 'TOGGLE_AUTO_REFRESH':
-        storeItem('autoRefresh', action.payload)
-        return update(state, { user: { autoRefresh: { $set: action.payload } } })
+        storeItem('autoRefreshStopTimes', action.payload)
+        return update(state, { user: { autoRefreshStopTimes: { $set: action.payload } } })
 
       case 'FIND_ROUTES_RESPONSE':
         // If routes is undefined, initialize it w/ the full payload

lib/util/query-params.js

@@ -46,7 +46,7 @@ const formatPlace = (location, alternateName) => {
 }
 
 // Load stored default query settings from local storage
-let storedSettings = getItem('defaultQuery')
+let storedSettings = getItem('defaultQuery', {})
 
 const queryParams = [
   { /* from - the trip origin. stored internally as a location (lat/lon/name) object  */

lib/util/storage.js

@@ -10,19 +10,19 @@ export function storeItem (key, object) {
 
 /**
  * Retrieve a javascript object at the specified key. If not found, defaults to
- * empty object or, if the nullIfNotFound value is set to true, null.
+ * null or, the optionally provided notFoundValue.
  */
-export function getItem (key, nullIfNotFound = false) {
+export function getItem (key, notFoundValue = null) {
   let itemAsString
   try {
     itemAsString = window.localStorage.getItem(`${STORAGE_PREFIX}.${key}`)
     const json = JSON.parse(itemAsString)
     if (json) return json
-    else return nullIfNotFound ? null : {}
+    else return notFoundValue
   } catch (e) {
     // Catch any errors associated with parsing bad JSON.
     console.warn(e, itemAsString)
-    return nullIfNotFound ? null : {}
+    return notFoundValue
   }
 }