fix(util/viewer): Extract headsign if stop times don't have them.

Author: binh-dam-ibigroup

lib/components/viewers/stop-schedule-table.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 
+import { isBlank } from '../../util/ui'
 import { getFormattedStopTime, getStopTimesByPattern } from '../../util/viewer'
 
 const { getTimeFormat } = coreUtils.time
@@ -25,13 +26,16 @@ const StyledTable = styled.table`
   }
 `
 
-const RouteTd = styled.td`
+const DestHeader = styled.th`
+  width: 100%;
+`
+const RouteCell = styled.td`
   font-weight: bold;
 `
-const DestTd = styled.td`
+const DestCell = styled.td`
   width: 100%;
 `
-const TimeTd = styled.td`
+const TimeCell = styled.td`
   font-weight: bold;
   text-align: right;
   white-space: nowrap;
@@ -50,17 +54,19 @@ class StopScheduleTable extends Component {
 
     // Merge stop times, so that we can sort them across all route patterns.
     let mergedStopTimes = []
-    Object.values(stopTimesByPattern).forEach(pattern => {
+    Object.values(stopTimesByPattern).forEach(pattern => { //TODO:breakup pattern vars
       const filteredTimes = pattern.times
         //TODO refactor - Copied from util/viewers
         .filter(stopTime => {
           return stopTime.stopIndex < stopTime.stopCount - 1 // ensure that this isn't the last stop
         })
         .map(stopTime => {
-          // Add a route attribute to each stop time for rendering route info.
+          // Add the route attribute and headsign to each stop time for rendering route info.
+          const headsign = isBlank(stopTime.headsign) ? pattern.pattern.headsign : stopTime.headsign
           return {
             ...stopTime,
-            route: pattern.route
+            route: pattern.route,
+            headsign
           }
         })
       mergedStopTimes = mergedStopTimes.concat(filteredTimes) // reduce?
@@ -79,21 +85,21 @@ class StopScheduleTable extends Component {
           <tr>
             <th>Block</th>
             <th>Route</th>
-            <th>To</th>
+            <DestHeader>To</DestHeader>
             <th>Departure</th>
           </tr>
         </thead>
         <tbody>
-          {mergedStopTimes.map(stopTime => {
+          {mergedStopTimes.map((stopTime, index) => {
             const { blockId, headsign, route } = stopTime
             const routeName = route.shortName ? route.shortName : route.longName
-            const time = getFormattedStopTime(stopTime, homeTimezone, stopViewerArriving, timeFormat, true)
+            const time = getFormattedStopTime(stopTime, homeTimezone, stopViewerArriving, timeFormat, true, false, false)
             return (
-              <tr>
+              <tr key={index}>
                 <td>{blockId}</td>
-                <RouteTd>{routeName}</RouteTd>
-                <DestTd>{headsign}</DestTd>
-                <TimeTd>{time}</TimeTd>
+                <RouteCell>{routeName}</RouteCell>
+                <DestCell>{headsign}</DestCell>
+                <TimeCell>{time}</TimeCell>
               </tr>
             )
           })}

lib/util/viewer.js

@@ -4,6 +4,7 @@ import 'moment-timezone'
 import React from 'react'
 
 import Icon from '../components/narrative/icon'
+import { isBlank } from './ui'
 
 const {
   formatDuration,
@@ -135,8 +136,18 @@ export function getStopTimesByPattern (stopData) {
   if (stopData && stopData.routes && stopData.stopTimes) {
     stopData.stopTimes.forEach(patternTimes => {
       const routeId = getRouteIdForPattern(patternTimes.pattern)
-      const headsign = patternTimes.times[0] && patternTimes.times[0].headsign
+
+      let headsign = patternTimes.times[0] && patternTimes.times[0].headsign
+      // In case stop time headsign is blank, extract headsign from the pattern 'desc' attribute
+      // (format: '49 to <Destination> (<destid>)[ from <Origin> (<originid)]').
+      if (isBlank(headsign)) {
+        const matches = patternTimes.pattern.desc.match(/ to ([^(from)]+) \(.+\)/)
+        if (matches) {
+          headsign = matches[1]
+        }
+      }
       patternTimes.pattern.headsign = headsign
+
       const id = `${routeId}-${headsign}`
       if (!(id in stopTimesByPattern)) {
         const route = stopData.routes.find(r => r.id === routeId)