Show Times in Time Zone of City

js/helpers/date.js

@@ -1,4 +1,21 @@
-export const getTime = (date, isTwentyFourHour, showDue) => {
+export const prefixToTimezone = prefix => {
+  switch (prefix) {
+    case 'au-syd':
+      return 'Australia/Sydney'
+    case 'au-mel':
+      return 'Australia/Melbourne'
+    case 'au-per':
+      return 'Australia/Perth'
+    case 'us-nyc':
+      return 'America/New_York'
+    case 'nz-wlg':
+    case 'nz-akl':
+    default:
+      return 'Pacific/Auckland'
+  }
+}
+
+export const getTime = (date, isTwentyFourHour, showDue, region) => {
   const now = new Date()
   if (date <= now) {
     if (showDue === true) {
@@ -19,6 +36,7 @@ export const getTime = (date, isTwentyFourHour, showDue) => {
       hour12: !isTwentyFourHour,
       hour: 'numeric',
       minute: 'numeric',
+      timeZone: prefixToTimezone(region),
     })
     // if us -> AM/PM, if au/nz -> am/pm, if gb -> 24h
     return {

js/views/lines/Line.jsx

@@ -415,6 +415,7 @@ class Line extends React.Component {
           timetable={timetable}
           realtimeStopUpdates={realtimeStopUpdates}
           triggerTrip={this.triggerTrip}
+          region={match.params.region}
         />
       ) : null
     const lineStops = loading ? (

js/views/lines/Timetable.jsx

@@ -6,10 +6,10 @@ import { vars } from '../../styles.js'
 
 import { getTime } from '../../helpers/date.js'
 
-const formatDate = (dateString, delay) => {
+const formatDate = (dateString, delay, region) => {
   const date = new Date(dateString)
   date.setTime(date.getTime() + delay * 1000)
-  const humanTime = getTime(date, false, true)
+  const humanTime = getTime(date, false, true, region)
 
   // make this nicer
   return `${humanTime.text || ''}${humanTime.subtext || ''}${
@@ -24,7 +24,9 @@ const Timetable = ({
   currentTrip,
   triggerTrip,
   realtimeStopUpdates,
+  region,
 }) => {
+  const tripIds = {}
   return (
     <View>
       <Text style={styles.direction}>Departures</Text>
@@ -47,7 +49,11 @@ const Timetable = ({
             }
             return service
           })
-          .filter(service => service.visible === true)
+          .filter(service => {
+            // ensures that services that start and finish at the same place with the same trip_id don't show up more than once
+            tripIds[service.trip_id] = (tripIds[service.trip_id] || 0) + 1
+            return service.visible === true && tripIds[service.trip_id] === 1
+          })
           .map(service => {
             let departureTextStyle = null
             let emotion = null
@@ -89,7 +95,7 @@ const Timetable = ({
                 onPress={triggerTrip(service.trip_id)}
               >
                 <Text style={[styles.departureDate, departureTextStyle]}>
-                  {formatDate(service.departure_time, delay)}
+                  {formatDate(service.departure_time, delay, region)}
                 </Text>
                 <Text style={[styles.departureStatus, emotion]}>
                   {scheduleRelationship}

js/views/station/Station.jsx

@@ -358,41 +358,42 @@ class Station extends React.Component {
     let loading
     let content
 
+    const { reducedTrips, error, html, route_type, updated } = this.state
     const { region } = this.props.match.params
     const stop = this.props.match.params.station
     const regionStop = `${region}|${stop}`
     if (this.state.loading) {
       loading = <div className="spinner" />
-    } else if (this.state.route_type === -2) {
-      content = <Onzo updated={this.state.updated} />
-    } else if (this.state.html !== null) {
+    } else if (route_type === -2) {
+      content = <Onzo updated={updated} />
+    } else if (html !== null) {
       content = (
         <div>
-          <div dangerouslySetInnerHTML={{ __html: this.state.html.html }} />
+          <div dangerouslySetInnerHTML={{ __html: html.html }} />
           <div className="align-center" style={{ paddingBottom: '15px' }}>
             <a
               target="_blank"
               rel="noopener"
-              href={this.state.html.url}
+              href={html.url}
               className="nice-button primary"
             >
               More Info
             </a>
             <a
               target="_blank"
               rel="noopener"
-              href={this.state.html.twitter}
+              href={html.twitter}
               className="nice-button secondary"
             >
-              @{this.state.html.twitter.split('/').slice(-1)} on Twitter
+              @{html.twitter.split('/').slice(-1)} on Twitter
             </a>
           </div>
         </div>
       )
-    } else if (this.state.error !== null) {
+    } else if (error !== null) {
       loading = (
         <div className="error">
-          <p>{this.state.error}</p>
+          <p>{error}</p>
           <button
             type="button"
             className="nice-button primary"
@@ -402,7 +403,7 @@ class Station extends React.Component {
           </button>
         </div>
       )
-    } else if (this.state.reducedTrips.length === 0) {
+    } else if (reducedTrips.length === 0) {
       loading = (
         <div className="error">
           <p>{t('station.noservices')}</p>
@@ -411,7 +412,7 @@ class Station extends React.Component {
     } else {
       content = (
         <View style={styles.tripWrapper}>
-          {this.state.reducedTrips.map(item => {
+          {reducedTrips.map(item => {
             const {
               trip_id: tripId,
               agency_id: agencyId,
@@ -428,6 +429,7 @@ class Station extends React.Component {
                 direction={directionId}
                 color={routeColor}
                 textColor={routeTextColor}
+                region={region}
                 trips={item.map(i => ({
                   destination: i.trip_headsign,
                   departureTime: new Date(i.departure_time),

js/views/station/TripItemV2.jsx

@@ -73,6 +73,7 @@ export const TripItem = ({
   isTwentyFourHour = false,
   trips = [],
   onClick,
+  region,
 }) => {
   if (trips.length === 0) return null
   const textColorStyles = {
@@ -86,7 +87,7 @@ export const TripItem = ({
   )
   const secondaryDepartureTime = trips
     .slice(1, 3)
-    .map(i => getTime(i.departureTime, isTwentyFourHour, false))
+    .map(i => getTime(i.departureTime, isTwentyFourHour, false, region))
   return (
     <TouchableOpacity activeOpacity={0.85} onClick={onClick}>
       <View style={[styles.wrapper, { backgroundColor: color }]}>
@@ -265,4 +266,8 @@ styles = StyleSheet.create({
   strong: {
     fontWeight: 'bold',
   },
+  and: {
+    fontFamily,
+    fontSize: 13,
+  },
 })

package.json

@@ -7,7 +7,8 @@
     "start": "node index.js",
     "build": "cross-env NODE_ENV=production webpack --progress --colors --mode production",
     "watch": "webpack-dev-server --mode development",
-    "watch:live": "cross-env NODE_ENV=devlive webpack-dev-server  --mode development",
+    "watch:live": "cross-env NODE_ENV=devlive webpack-dev-server --mode development",
+    "watch:uat": "cross-env NODE_ENV=devuat webpack-dev-server --mode development",
     "anal": "webpack --json > report.json",
     "test": "echo \"Error: no test specified\"",
     "watch:local": "cross-env NODE_ENV=local webpack-dev-server",

webpack.config.js

@@ -181,4 +181,11 @@ if (process.env.NODE_ENV === 'devlive') {
   config.devServer.proxy['/a'].changeOrigin = true
 }
 
+if (process.env.NODE_ENV === 'devuat') {
+  console.log('Using UAT Server for API')
+  config.devServer.proxy['/a'].target = 'https://uat.waka.app'
+  config.devServer.proxy['/a'].pathRewrite = null
+  config.devServer.proxy['/a'].changeOrigin = true
+}
+
 module.exports = config