feat(stop-viewer.js): Rendering list of Stop IDs

Author: robertgregg3

lib/actions/api.js

@@ -293,6 +293,7 @@ const findStopResponse = createAction('FIND_STOP_RESPONSE')
 const findStopError = createAction('FIND_STOP_ERROR')
 
 export function findStop (params) {
+  console.log('params', params)
   return createQueryAction(
     `index/stops/${params.stopId}`,
     findStopResponse,
@@ -308,6 +309,18 @@ export function findStop (params) {
   )
 }
 
+export function fetchStopInfo (stop) {
+  return async function (dispatch, getState) {
+    await dispatch(findStop({ stopId: stop.stopId }))
+    const state = getState()
+
+    const fetchedStop = state.otp.transitIndex.stops[stop.stopId]
+    const {lat, lon} = fetchedStop
+    const radius = 250
+    await dispatch(findNearbyStops({lat, lon, radius}, stop.stopId))
+  }
+}
+
 // TODO: Optionally substitute GraphQL queries? Note: this is not currently
 // possible because gtfsdb (the alternative transit index used by TriMet) does not
 // support GraphQL queries.
@@ -474,6 +487,7 @@ const findStopTimesForStopError = createAction('FIND_STOP_TIMES_FOR_STOP_ERROR')
  * Stop times for stop query (used in stop viewer).
  */
 export function findStopTimesForStop (params) {
+  console.log('findStopTimesForStop params :', params)
   return function (dispatch, getState) {
     const state = getState()
     dispatch(fetchingStopTimesForStop(params))
@@ -757,7 +771,7 @@ export function getTransportationNetworkCompanyRideEstimate (params) {
 const receivedNearbyStopsResponse = createAction('NEARBY_STOPS_RESPONSE')
 const receivedNearbyStopsError = createAction('NEARBY_STOPS_ERROR')
 
-export function findNearbyStops (params) {
+export function findNearbyStops (params, parentStopId) {
   return createQueryAction(
     `index/stops?${qs.stringify({radius: 1000, ...params})}`,
     receivedNearbyStopsResponse,
@@ -776,7 +790,7 @@ export function findNearbyStops (params) {
           stops.sort((a, b) => { return a.distance - b.distance })
           if (params.max && stops.length > params.max) stops = stops.slice(0, params.max)
         }
-        return {stops}
+        return {parentStopId, stops}
       },
       // retrieve routes for each stop
       postprocess: (stops, dispatch, getState) => {
@@ -862,6 +876,7 @@ window.setInterval(() => {
  */
 
 function createQueryAction (endpoint, responseAction, errorAction, options = {}) {
+  // eslint-disable-next-line complexity
   return async function (dispatch, getState) {
     const state = getState()
     const { config } = state.otp

lib/components/viewers/stop-viewer.js

@@ -14,6 +14,7 @@ import * as uiActions from '../../actions/ui'
 import Icon from '../narrative/icon'
 import { getShowUserSettings, getStopViewerConfig } from '../../util/state'
 
+import ChildStopViewer from './child-stop-viewer'
 import LiveStopTimes from './live-stop-times'
 import StopScheduleTable from './stop-schedule-table'
 
@@ -72,6 +73,7 @@ class StopViewer extends Component {
   componentDidMount () {
     // Load the viewed stop in the store when the Stop Viewer first mounts
     this.props.findStop({ stopId: this.props.viewedStop.stopId })
+    console.log('this.props.viewedStop.stopId', this.props.viewedStop.stopId)
   }
 
   _toggleFavorite = () => {
@@ -225,6 +227,8 @@ class StopViewer extends Component {
   render () {
     const {
       autoRefreshStopTimes,
+      childStops,
+      findStop,
       findStopTimesForStop,
       homeTimezone,
       stopData,
@@ -238,7 +242,6 @@ class StopViewer extends Component {
     const { date, scheduleView } = this.state
     const { showBlockIds } = stopViewerConfig
     const hasStopTimesAndRoutes = !!(stopData && stopData.stopTimes && stopData.stopTimes.length > 0 && stopData.routes)
-
     let contents
     if (!hasStopTimesAndRoutes) {
       contents = <div>No stop times found for date.</div>
@@ -279,6 +282,10 @@ class StopViewer extends Component {
             {this._renderControls()}
             <Scrollable>
               {contents}
+              {!scheduleView &&
+                // <RelatedStops childStops={childStops} />
+                <ChildStopViewer childStops={childStops} findStops={findStop} />
+              }
             </Scrollable>
             {/* Future: add stop details */}
           </div>
@@ -293,13 +300,17 @@ class StopViewer extends Component {
 const mapStateToProps = (state, ownProps) => {
   const showUserSettings = getShowUserSettings(state)
   const stopViewerConfig = getStopViewerConfig(state)
+  const stopLookup = state.otp.transitIndex.stops
+  const stopData = stopLookup[state.otp.ui.viewedStop.stopId]
+  const childStops = stopData?.childStops?.map(stopId => stopLookup[stopId])
   return {
     autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
+    childStops,
     favoriteStops: state.otp.user.favoriteStops,
     homeTimezone: state.otp.config.homeTimezone,
     viewedStop: state.otp.ui.viewedStop,
     showUserSettings,
-    stopData: state.otp.transitIndex.stops[state.otp.ui.viewedStop.stopId],
+    stopData,
     stopViewerArriving: state.otp.config.language.stopViewerArriving,
     stopViewerConfig,
     timeFormat: getTimeFormat(state.otp.config),

lib/reducers/create-otp-reducer.js

@@ -250,6 +250,7 @@ function createOtpReducer (config) {
   // validate the initial state
   validateInitialState(initialState)
 
+  // eslint-disable-next-line complexity
   return (state = initialState, action) => {
     const searchId = action.payload && action.payload.searchId
     const requestId = action.payload && action.payload.requestId
@@ -666,16 +667,38 @@ function createOtpReducer (config) {
         })
 
       case 'NEARBY_STOPS_RESPONSE':
+        const {parentStopId, stops} = action.payload
         const stopLookup = {}
-        action.payload.stops.forEach(s => {
+        stops.forEach(s => {
           stopLookup[s.id] = s
         })
-        return update(state, {
-          location: {
-            nearbyStops: { $set: action.payload.stops.map(s => s.id) }
-          },
-          transitIndex: { stops: { $merge: stopLookup } }
-        })
+
+        const stopIds = stops.map(stop => stop.id) // ['12345', 'abd']
+        console.log('action.payload :', action.payload)
+        console.log('parentStopId :', parentStopId)
+        console.log('stops :', stops)
+        console.log('stopLookup[parentStopId] :', stopLookup[parentStopId])
+
+        if (!parentStopId) {
+          return update(state, {
+            location: {
+              nearbyStops: { $set: stopIds }
+            },
+            transitIndex: { stops: { $merge: stopLookup } }
+          })
+        } else {
+          // We need to remove the parent stop from the stop lookup to avoid overwriting it and
+          // losing the child stops field we're adding here.
+          delete stopLookup[parentStopId]
+          return update(state, {
+            transitIndex: { stops: {
+              // For the parent stop, we want to add the nearby stops as a new child stops field
+              [parentStopId]: {$merge: {childStops: stopIds}},
+              // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
+              $merge: stopLookup // going to include the parentStop
+            } }
+          })
+        }
       case 'STOPS_WITHIN_BBOX_RESPONSE':
         return update(state, {
           overlay: {
@@ -937,7 +960,7 @@ function createOtpReducer (config) {
         })
       case 'UPDATE_OVERLAY_VISIBILITY':
         const mapOverlays = clone(state.config.map.overlays)
-        for (let key in action.payload) {
+        for (const key in action.payload) {
           const overlay = mapOverlays.find(o => o.name === key)
           overlay.visible = action.payload[key]
         }