fix: correct timezone discrepancies and time formatting in stop&trip viewers

Author: evansiroky

lib/components/viewers/stop-viewer.js

@@ -403,21 +403,30 @@ function getHomeTime (homeTimezone = 'America/New_York') {
   return now.tz(homeTimezone).diff(now.clone().startOf('day'), 'seconds')
 }
 
-// helper method to generate stop time w/ status icon
+/**
+ * Helper method to generate stop time w/ status icon
+ *
+ * @param  {object} stopTime  A stopTime object as received from a transit index API
+ * @param  {string} [homeTimezone]  If configured, the timezone of the area
+ * @param  {string} [soonText='Due']  The text to display for departure times
+ *    about to depart in a short amount of time
+ * @param  {string} timeFormat  A valid moment.js formatting string
+ */
 function getFormattedStopTime (stopTime, homeTimezone, soonText = 'Due', timeFormat) {
-  const now = moment()
-  const serviceDay = moment(stopTime.serviceDay * 1000)
-  const currentHomeTime = getHomeTime(homeTimezone)
-  const differentDay = now.date() !== serviceDay.date()
-
   // use a bit of hackery to force a specific timezone to be used during testing
   const userTimeZone = process.env.NODE_ENV === 'test'
     ? process.env.TZ
     : moment.tz.guess()
   const inHomeTimezone = homeTimezone && homeTimezone === userTimeZone
+
+  const now = moment().tz(userTimeZone)
+  const serviceDay = moment(stopTime.serviceDay * 1000).tz(userTimeZone)
+  const currentHomeSecondsAfterMidnight = getHomeTime(homeTimezone)
+  const differentDay = now.date() !== serviceDay.date()
+
   // 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
+  const secondsUntilDeparture = stopTime.realtimeDeparture - currentHomeSecondsAfterMidnight
+  const departsInFuture = stopTime.realtimeDeparture > currentHomeSecondsAfterMidnight
   // Show the exact time if the departure occurs after midnight and if the
   // departure happens within an hour.
   // FIXME: It's unclear why this was designed to show exact time after midnight.
@@ -430,10 +439,13 @@ function getFormattedStopTime (stopTime, homeTimezone, soonText = 'Due', timeFor
   const countdownString = secondsUntilDeparture < 60
     ? soonText
     : formatDuration(secondsUntilDeparture)
-  // Only show timezone (e.g., PDT) if user is not in home time zone (e.g., user
-  // in New York, but viewing a trip planner for service based in Los Angeles).
-  const tzToDisplay = inHomeTimezone ? null : homeTimezone
-  const formattedTime = formatStopTime(stopTime.realtimeDeparture, tzToDisplay, timeFormat)
+  const formattedTime = formatStopTime(
+    stopTime.realtimeDeparture,
+    // Only show timezone (e.g., PDT) if user is not in home time zone (e.g., user
+    // in New York, but viewing a trip planner for service based in Los Angeles).
+    inHomeTimezone ? timeFormat : `${timeFormat} z`,
+    homeTimezone
+  )
   return (
     <div>
       <div style={{ float: 'left' }}>

lib/components/viewers/trip-viewer.js

@@ -10,7 +10,7 @@ import { setViewedTrip } from '../../actions/ui'
 import { findTrip } from '../../actions/api'
 import { setLocation } from '../../actions/map'
 
-import { formatStopTime } from '../../util/time'
+import { formatStopTime, getTimeFormat } from '../../util/time'
 
 class TripViewer extends Component {
   static propTypes = {
@@ -28,7 +28,13 @@ class TripViewer extends Component {
   }
 
   render () {
-    const { viewedTrip, tripData, hideBackButton, languageConfig } = this.props
+    const {
+      hideBackButton,
+      languageConfig,
+      timeFormat,
+      tripData,
+      viewedTrip
+    } = this.props
 
     return (
       <div className='trip-viewer'>
@@ -93,7 +99,7 @@ class TripViewer extends Component {
                 <div key={i}>
                   {/* the departure time */}
                   <div className='stop-time'>
-                    {formatStopTime(tripData.stopTimes[i].scheduledDeparture)}
+                    {formatStopTime(tripData.stopTimes[i].scheduledDeparture, timeFormat)}
                   </div>
 
                   {/* the vertical strip map */}
@@ -128,9 +134,10 @@ class TripViewer extends Component {
 const mapStateToProps = (state, ownProps) => {
   const viewedTrip = state.otp.ui.viewedTrip
   return {
+    languageConfig: state.otp.config.language,
+    timeFormat: getTimeFormat(state.otp.config),
     tripData: state.otp.transitIndex.trips[viewedTrip.tripId],
-    viewedTrip,
-    languageConfig: state.otp.config.language
+    viewedTrip
   }
 }
 

lib/util/time.js

@@ -52,15 +52,14 @@ export function formatTime (ms, options) {
 
 /**
  * Formats a stop time value for display in narrative
- * @param  {[type]} seconds           time since midnight in seconds
- * @param  {[type]} [timezone=null]   optional time zone to include in result
- * @param  {string} [timeFormat='h:mm a'] time format
+ * @param  {number} seconds  time since midnight in seconds
+ * @param  {string} timeFormat  A valid moment.js time format
+ * @param  {string} [timezone=null] optional time zone to initialize moment with
  * @return {string}                   formatted text representation
  */
-export function formatStopTime (seconds, timezone = null, timeFormat = 'h:mm a') {
+export function formatStopTime (seconds, timeFormat, timezone = null) {
   const m = timezone ? moment().tz(timezone) : moment()
-  const format = timezone ? `${timeFormat} z` : timeFormat
-  return m.startOf('day').seconds(seconds).format(format)
+  return m.startOf('day').seconds(seconds).format(timeFormat)
 }
 
 /**