fix(child-stop-details.js): Fixed flow errors

#412
opentripplanner · Jul 21, 2021 · 062f164 · 062f164
1 parent 57cb055
commit 062f164
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 55 deletions.
diff --git a/lib/components/viewers/child-stop-details.js b/lib/components/viewers/child-stop-details.js
@@ -1,65 +1,86 @@
 import React, { Component } from 'react'
 
-import { getStopViewerConfig } from '../../util/state'
-import { stopTimeComparator } from '../../util/viewer'
+// import { getStopViewerConfig } from '../../util/state'
+import { getRouteIdForPattern, getStopTimesByPattern, routeIsValid } from '../../util/viewer'
+import Icon from '../narrative/icon'
 
-import StopTimeCell from './stop-time-cell'
+import NextArrivalForPattern from './next-arrival-for-pattern'
+import ViewStopButton from './view-stop-button'
 
 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,
+      stopViewerConfig,
       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>
+    const showChildStops = childStops?.map(s => {
+      console.log('ssss', s)
+      const stopTimesByPattern = getStopTimesByPattern(s)
+      return (
+        <div className='child-stop-container' style={{
+          padding: '1rem',
+          marginBottom: '1rem' }}>
+          <div className='child-stops-header' style={{
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+            marginBottom: '10px'
+          }}>
+            <div>
+              <Icon type={s.routes && s.routes[0].mode.toLowerCase()} style={{ marginRight: '5px', fontSize: '20px' }} />
+              {s.name.charAt(0).toUpperCase()}{s.name.slice(1).toLowerCase()}
+            </div>
+            <div>
+              <ViewStopButton stopId={s.id} text='View details' childStop />
+            </div>
+          </div>
+          <div className='child-stop-footer' style={{
+            display: 'flex',
+            width: '100%'
+          }}>
+            {Object.values(stopTimesByPattern)
+              .map(({ id, pattern, route, times }, index) => {
+                // Only add pattern if route info is returned by OTP.
+                if (index < 1) {
+                  return routeIsValid(route, getRouteIdForPattern(pattern))
+                    ? (
+                      <NextArrivalForPattern
+                        homeTimezone={homeTimezone}
+                        key={id}
+                        pattern={pattern}
+                        route={route}
+                        stopTimes={times}
+                        stopViewerArriving={stopViewerArriving}
+                        stopViewerConfig={stopViewerConfig}
+                        timeFormat={timeFormat}
+                      />
+                    ) : null
+                }
+              })
+            }
+          </div>
         </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>
+        <h4 className='childStops__title' style={{ backgroundColor: '#ffffff', padding: '0.5rem', position: 'relative', width: 'fit-content', marginLeft: '1rem' }}>Related Stops</h4>
+        <div className='childstop__details' style={{
+          border: '1px solid',
+          borderRadius: '7px',
+          display: 'flex',
+          flexWrap: 'wrap',
+          padding: '0.5rem',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          marginTop: '-2.5rem' }}>
+          <ul style={{ padding: '10px', width: '90%' }}>{showChildStops}</ul>
+        </div>
       </>
     )
   }

diff --git a/lib/components/viewers/next-arrival-for-pattern.js b/lib/components/viewers/next-arrival-for-pattern.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+
+import { stopTimeComparator } from '../../util/viewer'
+
+import StopTimeCell from './stop-time-cell'
+
+/**
+ * Shows the next arrival for a pattern within the related stops view.
+ */
+export default class NextArrivalForPattern extends Component {
+  render () {
+    const {
+      homeTimezone,
+      route,
+      stopTimes,
+      stopViewerArriving,
+      stopViewerConfig,
+      timeFormat
+    } = this.props
+
+    // sort stop times by next departure
+    let sortedStopTimes = []
+    const hasStopTimes = stopTimes && stopTimes.length > 0
+    if (hasStopTimes) {
+      sortedStopTimes = stopTimes
+        .concat()
+        .sort(stopTimeComparator)
+        // We request only x departures per pattern, but the patterns are merged
+        // according to shared headsigns, so we need to slice the stop times
+        // here as well to ensure only x times are shown per route/headsign combo.
+        // This is applied after the sort, so we're keeping the soonest departures.
+        .slice(0, stopViewerConfig.numberOfDepartures)
+    } else {
+      // Do not render pattern row if it has no stop times.
+      return null
+    }
+
+    const routeName = route.shortName ? route.shortName : route.longName
+    return (
+      <div style={{ display: 'flex', width: '100%', alignItems: 'center' }}>
+        {/* route name */}
+        <div style={{ display: 'flex', marginRight: '20px', alignItems: 'center' }}>
+          <span style={{
+            border: '1px solid',
+            borderRadius: '50%',
+            padding: '4px',
+            fontSize: '13px',
+            width: '24px',
+            height: '24px',
+            display: 'flex',
+            justifyContent: 'center',
+            position: 'relative',
+            letterSpacing: '-1.5px',
+            textAlign: 'center',
+            marginRight: '5px'
+          }}>{routeName}</span> To {route.longName}
+        </div>
+        {/* next departure preview */}
+        {hasStopTimes && (
+          <div>
+            <StopTimeCell
+              homeTimezone={homeTimezone}
+              soonText={stopViewerArriving}
+              stopTime={sortedStopTimes[0]}
+              timeFormat={timeFormat}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+}
diff --git a/lib/components/viewers/stop-viewer.js b/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 ChildStopDetails from './child-stop-viewer'
+import ChildStopDetails from './child-stop-details'
 import LiveStopTimes from './live-stop-times'
 import StopScheduleTable from './stop-schedule-table'
 
@@ -282,7 +282,12 @@ class StopViewer extends Component {
             <Scrollable>
               {contents}
               {!scheduleView &&
-                <ChildStopDetails childStops={childStops} parentStop={stopData} />
+                <ChildStopDetails
+                  childStops={childStops}
+                  parentStop={stopData}
+                  stopViewerArriving={stopViewerArriving}
+                  stopViewerConfig={stopViewerConfig}
+                  timeFormat={timeFormat} />
               }
             </Scrollable>
             {/* Future: add stop details */}

diff --git a/lib/components/viewers/view-stop-button.js b/lib/components/viewers/view-stop-button.js
@@ -7,6 +7,7 @@ import { setMainPanelContent, setViewedStop } from '../../actions/ui'
 
 class ViewStopButton extends Component {
   static propTypes = {
+    childStop: PropTypes.bool,
     stopId: PropTypes.string,
     text: PropTypes.string
   }
@@ -20,8 +21,9 @@ class ViewStopButton extends Component {
     return (
       <Button
         bsSize='xsmall'
-        className='view-stop-button'
+        className={this.props.childStop ? 'view-child-stop-button' : 'view-stop-button'}
         onClick={this._onClick}
+        style={this.props.childStop && { color: '#000080', border: 'none', background: 'none' }}
       >{this.props.text || (this.props.languageConfig.stopViewer || 'Stop Viewer')}</Button>
     )
   }

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
@@ -671,14 +671,9 @@ function createOtpReducer (config) {
         const stopLookup = {}
         stops.forEach(s => {
           stopLookup[s.id] = s
-          console.log(s)
         })
 
-        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])
+        const stopIds = stops.map(stop => stop.id).filter(id => parentStopId !== id)
 
         if (!parentStopId) {
           return update(state, {