fix: single line map timezone handling (#1536)

Co-authored-by: Eran Markus <eran132@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 3 people

src/api/gtfsService.ts

@@ -1,5 +1,5 @@
 import { GTFS_API } from 'src/api/apiConfig'
-import dayjs from 'src/dayjs'
+import dayjs, { toIsraelTimezone } from 'src/dayjs'
 import { BusRoute, fromGtfsRoute } from 'src/model/busRoute'
 import { BusStop, fromGtfsStop } from 'src/model/busStop'
 
@@ -10,23 +10,25 @@ export async function getRoutesAsync(
   lineNumber?: string,
   signal?: AbortSignal,
 ): Promise<BusRoute[]> {
+  const fromDate = toIsraelTimezone(fromTimestamp).format('YYYY-MM-DD')
+  const toDate = toIsraelTimezone(toTimestamp).format('YYYY-MM-DD')
+
   const gtfsRoutes = await GTFS_API.gtfsRoutesListGet(
     {
       routeShortName: lineNumber,
       operatorRefs: operatorId,
       dateFrom: fromTimestamp.startOf('day').toDate(),
-      dateTo: dayjs.min(toTimestamp.endOf('day'), dayjs()).toDate(),
+      dateTo: dayjs.min(toTimestamp.endOf('day'), toIsraelTimezone()).toDate(),
       limit: 100,
     },
     { signal },
   )
   const routes = Object.values(
     gtfsRoutes
-      .filter(
-        (route) =>
-          route.date.getDate() >= fromTimestamp.date() &&
-          route.date.getDate() <= toTimestamp.date(),
-      )
+      .filter((route) => {
+        const routeDate = toIsraelTimezone(route.date).format('YYYY-MM-DD')
+        return routeDate >= fromDate && routeDate <= toDate
+      })
       .map((route) => fromGtfsRoute(route))
       .reduce(
         (agg, line) => {

src/dayjs.ts

@@ -12,7 +12,10 @@ dayjs.extend(minMax)
 dayjs.extend(isoWeek)
 
 // Set default timezone
-dayjs.tz.setDefault('Asia/Jerusalem')
+export const ISRAEL_TIMEZONE = 'Asia/Jerusalem'
+dayjs.tz.setDefault(ISRAEL_TIMEZONE)
+
+export const toIsraelTimezone = (value?: dayjs.ConfigType) => dayjs(value).tz(ISRAEL_TIMEZONE)
 
 // Set default locale
 dayjs.locale('he')

src/hooks/useSingleLineData.ts

@@ -1,19 +1,18 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { getRoutesAsync, getRoutesByLineRef, getStopsForRouteAsync } from 'src/api/gtfsService'
-import dayjs from 'src/dayjs'
+import dayjs, { toIsraelTimezone } from 'src/dayjs'
 import useVehicleLocations from 'src/hooks/useVehicleLocations'
 import { BusRoute } from 'src/model/busRoute'
 import { BusStop } from 'src/model/busStop'
 import { SearchContext } from 'src/model/pageState'
-import { getServiceDayBounds } from 'src/model/serviceDay'
 import { type Point, toPoint } from 'src/pages/components/map-related/map-types'
 import { routeStartEnd, vehicleIDFormat } from 'src/pages/components/utils/rotueUtils'
 import {
   normalizeStartTimeToken,
   parseStartTimeToken,
 } from 'src/pages/components/utils/startTimeUtils'
 
-const formatTime = (time: dayjs.Dayjs) => time.format('HH:mm')
+const formatTime = (time: dayjs.ConfigType) => toIsraelTimezone(time).format('HH:mm')
 
 export const useSingleLineData = (
   operatorId?: string,
@@ -60,7 +59,7 @@ export const useSingleLineData = (
     }
 
     const controller = new AbortController()
-    const time = dayjs(search.timestamp)
+    const time = toIsraelTimezone(search.timestamp)
 
     getRoutesAsync(time, time, operatorId, lineNumber, controller.signal)
       .then((routes) => {
@@ -86,9 +85,9 @@ export const useSingleLineData = (
     return routes?.find((route) => route.key === routeKey)
   }, [routes, routeKey])
 
-  const [serviceDayStart, serviceDayEnd] = useMemo(() => {
-    const { start, end } = getServiceDayBounds(dayjs(search.timestamp))
-    return [start, end]
+  const [today, tomorrow] = useMemo(() => {
+    const today = toIsraelTimezone(search.timestamp).startOf('day')
+    return [today, today.add(1, 'day')]
   }, [search.timestamp])
 
   const validVehicleNumber = useMemo(() => {
@@ -98,8 +97,8 @@ export const useSingleLineData = (
   }, [vehicleNumber])
 
   const { locations, isLoading: locationsAreLoading } = useVehicleLocations({
-    from: serviceDayStart.valueOf(),
-    to: serviceDayEnd.valueOf(),
+    from: today.valueOf(),
+    to: tomorrow.valueOf(),
     operatorRef: operatorId ? Number(operatorId) : undefined,
     lineRef: selectedRoute?.lineRef ? Number(selectedRoute.lineRef) : undefined,
     vehicleRef: validVehicleNumber,
@@ -121,8 +120,8 @@ export const useSingleLineData = (
       for (const position of positions) {
         const startTime = position.point?.siriRideScheduledStartTime
         if (!startTime) continue
-        const dayjsTime = dayjs(startTime)
-        if (!dayjsTime.isBefore(serviceDayStart) && dayjsTime.isBefore(serviceDayEnd)) {
+        const dayjsTime = toIsraelTimezone(startTime)
+        if (dayjsTime.isAfter(today) && dayjsTime.isBefore(tomorrow)) {
           const formattedTime = formatTime(dayjsTime)
           const key = `${formattedTime}|${position.point?.siriRideVehicleRef}`
           if (!uniqueTimes.has(key)) {
@@ -168,7 +167,7 @@ export const useSingleLineData = (
     }
 
     fetchOptions()
-  }, [positions, serviceDayStart, serviceDayEnd, vehicleNumber])
+  }, [positions, today, tomorrow, vehicleNumber])
 
   useEffect(() => {
     const parsedStartTime = parseStartTimeToken(startTime)
@@ -184,7 +183,7 @@ export const useSingleLineData = (
         const vehicleRef = position.point?.siriRideVehicleRef?.toString()
         if (!scheduledStart || !vehicleRef || !scheduledTime) return false
         return (
-          formatTime(dayjs(scheduledStart)) === scheduledTime &&
+          formatTime(scheduledStart) === scheduledTime &&
           (scheduledVehicle ? scheduledVehicle === vehicleRef : true) &&
           (scheduledLine ? scheduledLine === position.point?.siriRouteLineRef?.toString() : true)
         )
@@ -199,11 +198,7 @@ export const useSingleLineData = (
         const scheduledTime = parsedStartTime?.scheduledTime
         const scheduledLine = parsedStartTime?.lineRef
         const [hour, minute] = scheduledTime ? scheduledTime.split(':').map(Number) : [0, 0]
-        const startTimeTimestamp = serviceDayStart
-          .hour(hour)
-          .minute(minute)
-          .second(0)
-          .millisecond(0)
+        const startTimeTimestamp = today.hour(hour).minute(minute).second(0).millisecond(0)
         let routeIds: number[] | undefined
         if (selectedRoute?.routeIds && selectedRoute.routeIds.length > 0) {
           routeIds = selectedRoute.routeIds
@@ -224,7 +219,7 @@ export const useSingleLineData = (
       }
     }
     fetchStops()
-  }, [selectedRoute?.routeIds, operatorId, startTime, serviceDayStart])
+  }, [selectedRoute?.routeIds, operatorId, startTime, today])
 
   return {
     positions: filteredPositions,

src/pages/singleLineMap/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material'
 import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import dayjs from 'src/dayjs'
+import dayjs, { toIsraelTimezone } from 'src/dayjs'
 import { useSingleLineData } from 'src/hooks/useSingleLineData'
 import LineNumberSelector from 'src/pages/components/LineSelector'
 import OperatorSelector from 'src/pages/components/OperatorSelector'
@@ -94,7 +94,7 @@ const SingleLineMapPage = () => {
         <Grid container spacing={2} size={{ xs: 12 }}>
           {/* choose date*/}
           <Grid size={{ sm: 4, xs: 12 }}>
-            <DateSelector time={dayjs(timestamp)} onChange={handleTimestampChange} />
+            <DateSelector time={toIsraelTimezone(timestamp)} onChange={handleTimestampChange} />
           </Grid>
           {/* choose operator */}
           <Grid size={{ sm: 4, xs: 12 }}>

tests/timezone.spec.ts

@@ -0,0 +1,59 @@
+import { expect, harOptions, setupTest, test, visitPage } from './utils'
+
+const TIMEZONES = ['Asia/Jerusalem', 'America/New_York', 'Europe/London', 'Asia/Tokyo'] as const
+
+const SINGLE_LINE_START_TIMES = [
+  '04:30 (74-892-26)',
+  '04:47 (61-265-26)',
+  '05:00 (74-891-26)',
+  '05:23 (74-899-26)',
+  '05:33 (60-860-26)',
+  '05:44 (74-893-26)',
+  '05:54 (74-895-26)',
+] as const
+
+const SINGLE_LINE_ROUTES = [
+  'תחנת מוניות רמת גן דרך הטייסים-תל אביב יפו ⟵ תחנת מוניות תל אביב הכובשים-תל אביב יפו',
+  'תחנת מוניות תל אביב הכובשים-תל אביב יפו ⟵ תחנת מוניות רמת גן דרך הטייסים-תל אביב יפו',
+] as const
+
+for (const timezone of TIMEZONES) {
+  test.describe(`Timezone: ${timezone}`, () => {
+    test.use({ timezoneId: timezone })
+    test(`single line map page route selector uses Israel timezone (${timezone})`, async ({
+      page,
+      advancedRouteFromHAR,
+    }) => {
+      await setupTest(page)
+      await advancedRouteFromHAR('tests/HAR/singleline.har', harOptions)
+      await visitPage(page, 'singleline_map_page_title')
+
+      await page.getByLabel('חברה מפעילה').click()
+      await page.getByRole('option', { name: 'אודליה מוניות בעמ', exact: true }).click()
+      await page.getByRole('textbox', { name: 'מספר קו' }).fill('16')
+      await page.getByLabel(/בחירת מסלול נסיעה/).click()
+
+      await expect(page.getByRole('option')).toContainText(SINGLE_LINE_ROUTES)
+    })
+
+    test(`single line map page start time list uses Israel timezone (${timezone})`, async ({
+      page,
+      advancedRouteFromHAR,
+    }) => {
+      await setupTest(page)
+      await advancedRouteFromHAR('tests/HAR/singleline.har', harOptions)
+      await visitPage(page, 'singleline_map_page_title')
+
+      await page.getByLabel('חברה מפעילה').click()
+      await page.getByRole('option', { name: 'אודליה מוניות בעמ', exact: true }).click()
+      await page.getByRole('textbox', { name: 'מספר קו' }).fill('16')
+      await page.getByLabel(/בחירת מסלול נסיעה/).click()
+      await page.getByRole('option', { name: SINGLE_LINE_ROUTES[0] }).click()
+
+      await page.getByLabel('בחירת שעת התחלה').click()
+      await expect(page.getByRole('option', { name: SINGLE_LINE_START_TIMES[0] })).toBeVisible()
+
+      await expect(page.getByRole('option')).toContainText(SINGLE_LINE_START_TIMES)
+    })
+  })
+}