Fix Twenty Four Hour Setting

Author: consindo

js/stores/SettingsStore.js

@@ -1,17 +1,16 @@
 class SettingsStore {
   constructor() {
     this.state = {
-      clock: true,
-      longName: false,
+      isTwentyFourHour: false,
       lastLocation: [-36.844229, 174.767823], // britomart
       bikeShare: false,
     }
     if (localStorage.getItem('SettingsData')) {
       const preState = JSON.parse(localStorage.getItem('SettingsData'))
       // copies saved state, preserves defaults
-      for (const attrname in preState) {
-        this.state[attrname] = preState[attrname]
-      }
+      Object.keys(preState).forEach(attr => {
+        this.state[attr] = preState[attr]
+      })
     }
     localStorage.setItem('AppVersion', '2.4.6')
   }

js/views/lines/Line.jsx

@@ -6,6 +6,7 @@ import { withRouter } from 'react-router'
 import queryString from 'query-string'
 
 import { vars } from '../../styles.js'
+import SettingsStore from '../../stores/SettingsStore.js'
 import UiStore from '../../stores/UiStore.js'
 import Header from '../reusable/Header.jsx'
 import Spinner from '../reusable/Spinner.jsx'
@@ -447,6 +448,7 @@ class Line extends React.Component {
           realtimeStopUpdates={realtimeStopUpdates}
           triggerTrip={this.triggerTrip}
           region={match.params.region}
+          isTwentyFourHour={SettingsStore.state.isTwentyFourHour}
         />
       ) : null
     const lineStops = loading ? (
@@ -465,6 +467,7 @@ class Line extends React.Component {
           selectedStop={this.lineData.stop_id}
           currentTrip={currentTrip}
           realtimeStopUpdates={realtimeStopUpdates}
+          isTwentyFourHour={SettingsStore.state.isTwentyFourHour}
         />
       </>
     )

js/views/lines/LineStops.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react'
+import React, { useState } from 'react'
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native'
 
 import { vars } from '../../styles.js'
@@ -15,6 +15,7 @@ export const LineStops = ({
   currentTrip = '',
   selectedStop = null,
   realtimeStopUpdates = {},
+  isTwentyFourHour = false,
 }) => {
   const stopStyle = [styles.stop, { borderColor: color }]
   const [showAll, setShowAll] = useState(false)
@@ -59,7 +60,7 @@ export const LineStops = ({
   comparisionStopTime.setSeconds(0) // so it makes more sense in the UI
 
   return (
-    <Fragment>
+    <>
       {!showAll && selectedStopIndex > 0 ? (
         <TouchableOpacity
           onClick={() => setShowAll(true)}
@@ -160,6 +161,7 @@ export const LineStops = ({
                         delay * 1000
                     ).toLocaleTimeString(navigator.language, {
                       timeZone: 'UTC',
+                      hour12: !isTwentyFourHour,
                       hour: 'numeric',
                       minute: 'numeric',
                     })}
@@ -170,7 +172,7 @@ export const LineStops = ({
           )
         })}
       </View>
-    </Fragment>
+    </>
   )
 }
 

js/views/lines/Timetable.jsx

@@ -6,10 +6,10 @@ import { vars } from '../../styles.js'
 
 import { getTime } from '../../helpers/date.js'
 
-const formatDate = (dateString, delay, region) => {
+const formatDate = (dateString, delay, isTwentyFourHour, region) => {
   const date = new Date(dateString)
   date.setTime(date.getTime() + delay * 1000)
-  const humanTime = getTime(date, false, true, region)
+  const humanTime = getTime(date, isTwentyFourHour, true, region)
 
   // make this nicer
   return `${humanTime.text || ''}${humanTime.subtext || ''}${
@@ -25,6 +25,7 @@ const Timetable = ({
   triggerTrip,
   realtimeStopUpdates,
   region,
+  isTwentyFourHour = false,
 }) => {
   const tripIds = {}
   return (
@@ -99,7 +100,12 @@ const Timetable = ({
                 onPress={triggerTrip(service.trip_id)}
               >
                 <Text style={[styles.departureDate, departureTextStyle]}>
-                  {formatDate(service.departure_time, delay, region)}
+                  {formatDate(
+                    service.departure_time,
+                    delay,
+                    isTwentyFourHour,
+                    region
+                  )}
                 </Text>
                 <Text style={[styles.departureStatus, emotion]}>
                   {scheduleRelationship}

js/views/pages/Settings.jsx

@@ -73,7 +73,7 @@ const Settings = () => {
         <Text style={paragraphStyles.h1}>
           {t('settings.preferences.title')}
         </Text>
-        <Toggle id="clock">
+        <Toggle id="isTwentyFourHour">
           <ClockIcon />
           <Text style={styles.buttonText}>{t('settings.preferences.hrs')}</Text>
         </Toggle>

js/views/station/Station.jsx

@@ -448,6 +448,7 @@ class Station extends React.Component {
                   isRealtime: i.isRealtime,
                   platform: i.platform,
                 }))}
+                isTwentyFourHour={SettingsStore.state.isTwentyFourHour}
                 onClick={() =>
                   this.triggerMap(
                     agencyId,