use time zone from config

Author: graue

src/components/Itinerary.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { formatDurationBetween } from '../lib/time';
-import { getAgencyDisplayName } from '../lib/region';
+import { getAgencyDisplayName, getTimezone } from '../lib/region';
 import Icon from './primitives/Icon';
 import ItineraryBikeLeg from './ItineraryBikeLeg';
 import ItineraryHeader from './ItineraryHeader';
@@ -129,6 +129,8 @@ export default function Itinerary({
       ? route.legs[0]
       : null;
 
+  const timezone = getTimezone();
+
   return (
     <div className="py-8 px-5">
       <div className="Itinerary_backBtnAndHeadings">
@@ -144,12 +146,12 @@ export default function Itinerary({
               description="start and end time for a trip"
               values={{
                 startTime: intl.formatTime(startTime, {
-                  timeZone: 'America/Los_Angeles',
+                  timeZone: timezone,
                   hour: 'numeric',
                   minute: 'numeric',
                 }),
                 endTime: intl.formatTime(endTime, {
-                  timeZone: 'America/Los_Angeles',
+                  timeZone: timezone,
                   hour: 'numeric',
                   minute: 'numeric',
                 }),

src/components/RoutesOverview.tsx

@@ -11,7 +11,7 @@ import type {
   TransitLeg,
 } from '../lib/BikeHopperClient';
 import formatDistance from '../lib/formatDistance';
-import { getTransitDataAcknowledgement } from '../lib/region';
+import { getTimezone, getTransitDataAcknowledgement } from '../lib/region';
 import { formatInterval } from '../lib/time';
 import BorderlessButton from './BorderlessButton';
 import Icon from './primitives/Icon';
@@ -61,6 +61,8 @@ export default function RoutesOverview({
     dispatch(shareRoutes(intl));
   };
 
+  const timezone = getTimezone();
+
   return (
     <div className="flex flex-col">
       {outOfAreaMsg && <div className="border-gray-300">{outOfAreaMsg}</div>}
@@ -143,14 +145,14 @@ export default function RoutesOverview({
                 description="compact departure and arrival time"
                 values={{
                   depart: intl.formatTime(route.legs[0].departure_time, {
-                    timeZone: 'America/Los_Angeles',
+                    timeZone: timezone,
                     hour: 'numeric',
                     minute: 'numeric',
                   }),
                   arrive: intl.formatTime(
                     route.legs[route.legs.length - 1].arrival_time,
                     {
-                      timeZone: 'America/Los_Angeles',
+                      timeZone: timezone,
                       hour: 'numeric',
                       minute: 'numeric',
                     },

src/lib/BikeHopperClient.ts

@@ -2,6 +2,7 @@ import { DateTime } from 'luxon';
 import delay from './delay';
 import {
   getDefaultViewportBounds,
+  getTimezone,
   RegionConfig,
   RegionConfigSchema,
 } from './region';
@@ -40,10 +41,9 @@ export async function fetchRegionConfig(): Promise<RegionConfig> {
 }
 
 function timeStampToLocalTime(timeStamp: number) {
-  const serverTime = DateTime.fromMillis(timeStamp).setZone(
-    'America/Los_Angeles',
-    { keepLocalTime: true },
-  );
+  const serverTime = DateTime.fromMillis(timeStamp).setZone(getTimezone(), {
+    keepLocalTime: true,
+  });
   const clientTime = serverTime.toLocal().toMillis();
   return clientTime;
 }

src/lib/region.ts

@@ -31,6 +31,10 @@ export function getDefaultViewportBounds(): [number, number, number, number] {
   }
 }
 
+export function getTimezone(): string | undefined {
+  return _getConfig().timezone;
+}
+
 export function getTransitServiceArea():
   | GeoJSON.Feature<GeoJSON.Polygon>
   | undefined {
@@ -103,6 +107,7 @@ export const RegionConfigSchema = z.object({
   supportedRegionDescription: z.string().optional(),
   mapboxAccessToken: z.string().optional(),
   mapboxStyleUrl: z.string().optional(),
+  timezone: z.string().optional(),
 });
 export type RegionConfig = z.infer<typeof RegionConfigSchema>;
 

src/lib/time.ts

@@ -1,11 +1,12 @@
 import { DateTime, Duration } from 'luxon';
 import type { IntlShape } from 'react-intl';
+import { getTimezone } from './region';
 
 // TODO localize all of these
 
 export function formatTime(jsDate: Date) {
   return DateTime.fromJSDate(jsDate)
-    .setZone('America/Los_Angeles')
+    .setZone(getTimezone())
     .toLocaleString(DateTime.TIME_SIMPLE);
 }