feat(child-stop-details.js): Created basic template with data from ap…

…i ready to style - phase 1

#412

lib/actions/api.js

@@ -795,7 +795,12 @@ export function findNearbyStops (params, parentStopId) {
       // retrieve routes for each stop
       postprocess: (stops, dispatch, getState) => {
         if (params.max && stops.length > params.max) stops = stops.slice(0, params.max)
-        stops.forEach(stop => dispatch(findRoutesAtStop(stop.id)))
+        stops.forEach(stop => {
+          console.log('11', stop.id)
+          console.log('22', params)
+          dispatch(findRoutesAtStop(stop.id))
+          dispatch(findStopTimesForStop({stopId: stop.id}))
+        })
       }
     }
   )

lib/components/viewers/child-stop-details.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+
+import { getStopViewerConfig } from '../../util/state'
+import { stopTimeComparator } from '../../util/viewer'
+
+import StopTimeCell from './stop-time-cell'
+
+class ChildStopDetails extends Component {
+  componentDidMount () {
+  }
+
+  getStopTime (childStopTimes) {
+    let sortedStopTimes = []
+    sortedStopTimes = childStopTimes
+      .concat()
+      .sort(stopTimeComparator)
+      .slice(0, getStopViewerConfig.numberOfDepartures)
+    console.log(sortedStopTimes[0])
+    return sortedStopTimes[0]
+  }
+
+  render () {
+    const {
+      childStops,
+      homeTimezone,
+      stopViewerArriving,
+      timeFormat
+    } = this.props
+
+    const showChildStops = childStops?.map(s =>
+      <div className='childstop__details'>
+        {/* {s.stopTimes && this.getStopTime(s.stopTimes[0].times)} */}
+        <div className='childstop__row1'>
+          <span>
+            {s.routes && s.routes[0].mode}
+          </span>
+          {s.name.charAt(0).toUpperCase()}{s.name.slice(1).toLowerCase()}
+          <a href='/'>View Details</a>
+        </div>
+        <div className='childstop__row2'>
+          <span className='childstop__route-short-name' style={{ border: '1px solid', borderRadius: '50%', padding: '3px' }}>
+            {s.routes && s.routes[0].shortName}
+          </span>
+          <span>
+            {s.routes && s.routes[0].longName}
+          </span>
+          {s.stopTimes && (
+            <div className='next-trip-preview'>
+              <StopTimeCell
+                homeTimezone={homeTimezone}
+                soonText={stopViewerArriving}
+                stopTime={this.getStopTime(s.stopTimes[0].times)}
+                timeFormat={timeFormat}
+              />
+            </div>)}
+        </div>
+      </div>
+    )
+    return (
+      <>
+        <h3>Related Stops</h3>
+        <ul>{showChildStops}</ul>
+      </>
+    )
+  }
+}
+
+export default ChildStopDetails

lib/components/viewers/stop-time-cell.js

@@ -32,8 +32,8 @@ const StopTimeCell = ({
   // 48:00 hours (or more) from the start of the service day.
   const departureTimeRemainder = departureTime % ONE_DAY_IN_SECONDS
   const daysAfterServiceDay = (departureTime - departureTimeRemainder) / ONE_DAY_IN_SECONDS
-  const departureDay = serviceDay.add(daysAfterServiceDay, 'day')
-  const vehicleDepartsToday = now.dayOfYear() === departureDay.dayOfYear()
+  const departureDay = serviceDay?.add(daysAfterServiceDay, 'day')
+  const vehicleDepartsToday = now?.dayOfYear() === departureDay?.dayOfYear()
 
   // Determine whether to show departure as countdown (e.g. "5 min") or as HH:mm
   // time, using realtime updates if available.

lib/components/viewers/stop-viewer.js

@@ -14,7 +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 ChildStopDetails from './child-stop-viewer'
 import LiveStopTimes from './live-stop-times'
 import StopScheduleTable from './stop-schedule-table'
 
@@ -72,7 +72,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 })
+    this.props.fetchStopInfo(this.props.viewedStop)
     console.log('this.props.viewedStop.stopId', this.props.viewedStop.stopId)
   }
 
@@ -108,7 +108,7 @@ class StopViewer extends Component {
     ) {
       // Reset state to default if stop changes (i.e., show next arrivals).
       this.setState(defaultState)
-      this.props.findStop({ stopId: this.props.viewedStop.stopId })
+      this.props.fetchStopInfo(this.props.viewedStop)
     }
   }
 
@@ -228,7 +228,6 @@ class StopViewer extends Component {
     const {
       autoRefreshStopTimes,
       childStops,
-      findStop,
       findStopTimesForStop,
       homeTimezone,
       stopData,
@@ -283,8 +282,7 @@ class StopViewer extends Component {
             <Scrollable>
               {contents}
               {!scheduleView &&
-                // <RelatedStops childStops={childStops} />
-                <ChildStopViewer childStops={childStops} findStops={findStop} />
+                <ChildStopDetails childStops={childStops} parentStop={stopData} />
               }
             </Scrollable>
             {/* Future: add stop details */}
@@ -319,7 +317,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  findStop: apiActions.findStop,
+  fetchStopInfo: apiActions.fetchStopInfo,
   findStopTimesForStop: apiActions.findStopTimesForStop,
   forgetStop: mapActions.forgetStop,
   rememberStop: mapActions.rememberStop,

lib/reducers/create-otp-reducer.js

@@ -671,6 +671,7 @@ function createOtpReducer (config) {
         const stopLookup = {}
         stops.forEach(s => {
           stopLookup[s.id] = s
+          console.log(s)
         })
 
         const stopIds = stops.map(stop => stop.id) // ['12345', 'abd']