fix(alert): fix time formatter for alert effective time

fix ibi-group/trimet-mod-otp#219

Author: landonreed

lib/components/narrative/line-itin/line-itinerary.js

@@ -60,9 +60,19 @@ export default class LineItinerary extends NarrativeItinerary {
 
     return (
       <div className='line-itin'>
-        <ItinerarySummary companies={companies} itinerary={itinerary} timeOptions={timeOptions} onClick={onClick} customIcons={customIcons} />
+        <ItinerarySummary
+          companies={companies}
+          itinerary={itinerary}
+          timeOptions={timeOptions}
+          onClick={onClick}
+          customIcons={customIcons} />
         {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}
-        {active || expanded ? <ItineraryBody {...this.props} itinerary={itinerary} timeOptions={timeOptions} /> : null}
+        {active || expanded
+          ? <ItineraryBody
+            {...this.props}
+            itinerary={itinerary}
+            timeOptions={timeOptions} />
+          : null}
         {itineraryFooter}
       </div>
     )

lib/components/narrative/line-itin/transit-leg-body.js

@@ -6,7 +6,7 @@ import moment from 'moment'
 
 import ViewTripButton from '../../viewers/view-trip-button'
 import { getIcon } from '../../../util/itinerary'
-import { formatDuration } from '../../../util/time'
+import { formatDuration, getTimeFormat } from '../../../util/time'
 
 // TODO: support multi-route legs for profile routing
 
@@ -38,7 +38,7 @@ class TransitLegBody extends Component {
   }
 
   render () {
-    const { customIcons, leg, operator } = this.props
+    const { customIcons, leg, operator, timeFormat } = this.props
     const {
       agencyBrandingUrl,
       agencyName,
@@ -108,7 +108,7 @@ class TransitLegBody extends Component {
 
         {/* The Alerts body, if visible */}
         <VelocityTransitionGroup enter={{animation: 'slideDown'}} leave={{animation: 'slideUp'}}>
-          {alertsExpanded && <AlertsBody alerts={leg.alerts} />}
+          {alertsExpanded && <AlertsBody alerts={leg.alerts} timeFormat={timeFormat} />}
         </VelocityTransitionGroup>
         {/* The "Ride X Min / X Stops" Row, including IntermediateStops body */}
         {leg.intermediateStops && leg.intermediateStops.length > 0 && (
@@ -151,7 +151,8 @@ class TransitLegBody extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    operator: state.otp.config.operators.find(operator => operator.id === ownProps.leg.agencyId)
+    operator: state.otp.config.operators.find(operator => operator.id === ownProps.leg.agencyId),
+    timeFormat: getTimeFormat(state.otp.config)
   }
 }
 
@@ -184,22 +185,29 @@ class AlertsBody extends Component {
   }
 
   render () {
+    const { timeFormat } = this.props
     return (
       <div className='transit-alerts'>
-        {this.props.alerts.sort((a, b) => (a.effectiveStartDate < b.effectiveStartDate) ? 1 : -1).map((alert, k) => {
-          const effectiveStartDate = moment(alert.effectiveStartDate)
-          let effectiveDateString = 'Effective as of '
-          const daysAway = moment().diff(effectiveStartDate, 'days')
-          if (Math.abs(daysAway) <= 1) effectiveDateString += moment(effectiveStartDate).format('h:MMa, ')
-          effectiveDateString += effectiveStartDate.calendar(null, { sameElse: 'MMMM D, YYYY' }).split(' at')[0]
-          return (
-            <div key={k} className='transit-alert'>
-              <div className='alert-icon'><i className='fa fa-exclamation-triangle' /></div>
-              <div className='alert-body'>{alert.alertDescriptionText}</div>
-              <div className='effective-date'>{effectiveDateString}</div>
-            </div>
-          )
-        })}
+        {this.props.alerts
+          .sort((a, b) => b.effectiveStartDate - a.effectiveStartDate)
+          .map((alert, i) => {
+            const effectiveStartDate = moment(alert.effectiveStartDate)
+            let effectiveDateString = 'Effective as of '
+            const daysAway = moment().diff(effectiveStartDate, 'days')
+            // Add time if alert is effective within one day.
+            if (Math.abs(daysAway) <= 1) {
+              effectiveDateString += `${effectiveStartDate.format(timeFormat)}, `
+            }
+            effectiveDateString += effectiveStartDate.calendar(null, { sameElse: 'MMMM D, YYYY' }).split(' at')[0]
+            return (
+              <div key={i} className='transit-alert'>
+                <div className='alert-icon'><i className='fa fa-exclamation-triangle' /></div>
+                <div className='alert-body'>{alert.alertDescriptionText}</div>
+                <div className='effective-date'>{effectiveDateString}</div>
+              </div>
+            )
+          })
+        }
       </div>
     )
   }

lib/components/viewers/stop-viewer.js

@@ -371,7 +371,7 @@ function getFormattedStopTime (stopTime, homeTimezone, soonText = 'Due', timeFor
 
   const userTimeZone = moment.tz.guess()
   const inHomeTimezone = homeTimezone && homeTimezone === userTimeZone
-  // Determine whether to show departure as countdown (e.g. "5 min") or as HH:MM time
+  // Determine whether to show departure as countdown (e.g. "5 min") or as HH:mm time
   const secondsUntilDeparture = stopTime.realtimeDeparture - currentHomeTime
   const departsInFuture = stopTime.realtimeDeparture > currentHomeTime
   // Show the exact time if the departure occurs after midnight and if the

lib/util/query-params.js

@@ -82,7 +82,7 @@ const queryParams = [
     default: getCurrentDate()
   },
 
-  { /* time - the arrival/departure time for an itinerary trip, in HH:MM format */
+  { /* time - the arrival/departure time for an itinerary trip, in HH:mm format */
     name: 'time',
     routingTypes: [ 'ITINERARY' ],
     default: getCurrentTime()
@@ -95,13 +95,13 @@ const queryParams = [
     itineraryRewrite: value => ({ arriveBy: (value === 'ARRIVE') })
   },
 
-  { /* startTime - the start time for a profile trip, in HH:MM format */
+  { /* startTime - the start time for a profile trip, in HH:mm format */
     name: 'startTime',
     routingTypes: [ 'PROFILE' ],
     default: '07:00'
   },
 
-  { /* endTime - the end time for a profile trip, in HH:MM format */
+  { /* endTime - the end time for a profile trip, in HH:mm format */
     name: 'endTime',
     routingTypes: [ 'PROFILE' ],
     default: '09:00'

lib/util/time.js

@@ -1,16 +1,28 @@
 import moment from 'moment'
 import 'moment-timezone'
 
+const TIME_FORMAT_24_HR = 'HH:mm'
+
+/**
+ * @param  {[type]} config the OTP config object found in store
+ * @return {string}        the config-defined time formatter or HH:mm (24-hr time)
+ */
 export function getTimeFormat (config) {
-  return (config.dateTime && config.dateTime.timeFormat) ? config.dateTime.timeFormat : 'HH:mm'
+  return (config.dateTime && config.dateTime.timeFormat)
+    ? config.dateTime.timeFormat
+    : TIME_FORMAT_24_HR
 }
 
 export function getDateFormat (config) {
-  return (config.dateTime && config.dateTime.dateFormat) ? config.dateTime.dateFormat : 'YYYY-MM-DD'
+  return (config.dateTime && config.dateTime.dateFormat)
+    ? config.dateTime.dateFormat
+    : 'YYYY-MM-DD'
 }
 
 export function getLongDateFormat (config) {
-  return (config.dateTime && config.dateTime.longDateFormat) ? config.dateTime.longDateFormat : 'D MMMM YYYY'
+  return (config.dateTime && config.dateTime.longDateFormat)
+    ? config.dateTime.longDateFormat
+    : 'D MMMM YYYY'
 }
 
 /**
@@ -35,7 +47,7 @@ export function formatDuration (seconds) {
  */
 export function formatTime (ms, options) {
   return moment(ms + (options && options.offset ? options.offset : 0))
-    .format(options && options.format ? options.format : 'HH:mm')
+    .format(options && options.format ? options.format : TIME_FORMAT_24_HR)
 }
 
 /**
@@ -56,7 +68,7 @@ export function formatStopTime (seconds, timezone = null, timeFormat = 'h:mm a')
  * @returns {string} formatted text representation
  */
 export function getCurrentTime () {
-  return moment().format('HH:mm')
+  return moment().format(TIME_FORMAT_24_HR)
 }
 
 /**