front: use Date instead of string in OsrdConfState.startTime

Improves type safety.

Previously, it was important for OsrdConfState.startTime to be in
a specific timezone, because the string was later truncated and
directly used on an datetime-local form input. This patch improves
robustness by converting to the local timezone right before feeding
the value to the datetime-local form input, making it so a different
timezone in OsrdConfState.startTime doesn't break the app.

IsoDateTimeString is not longer used and can be dropped.

Signed-off-by: Simon Ser <[email protected]>

Author: emersion

front/src/common/types.ts

@@ -15,15 +15,6 @@ export const DATA_TYPES = {
  */
 export type TimeString = string;
 
-/**
- * A string with the complete iso format
- *
- * @example "2024-08-08T10:12:46.209Z"
- * @example "2024-08-08T10:12:46Z"
- * @example "2024-08-08T10:12:46+02:00"
- */
-export type IsoDateTimeString = string;
-
 /**
  * A ISO 8601 duration string
  * @example "PT3600S"

front/src/modules/trainschedule/components/ManageTrainSchedule/AddTrainScheduleButton.tsx

@@ -13,7 +13,7 @@ import { useStoreDataForRollingStockSelector } from 'modules/rollingStock/compon
 import trainNameWithNum from 'modules/trainschedule/components/ManageTrainSchedule/helpers/trainNameHelper';
 import { setFailure, setSuccess } from 'reducers/main';
 import { useAppDispatch } from 'store';
-import { formatToIsoDate, isoDateToMs, isoDateWithTimezoneToSec } from 'utils/date';
+import { isoDateToMs, isoDateWithTimezoneToSec } from 'utils/date';
 import { castErrorToFailure } from 'utils/error';
 import { sec2time } from 'utils/timeManipulation';
 
@@ -58,16 +58,10 @@ const AddTrainScheduleButton = ({
       let actualTrainCount = 1;
 
       for (let nb = 1; nb <= trainCount; nb += 1) {
-        const newStartTimeString = formatToIsoDate(
-          formattedStartTimeMs + 1000 * 60 * trainDelta * (nb - 1)
-        );
+        const newStartTime = new Date(formattedStartTimeMs + 1000 * 60 * trainDelta * (nb - 1));
         const trainName = trainNameWithNum(baseTrainName, actualTrainCount, trainCount);
 
-        const trainSchedule = formatTrainSchedulePayload(
-          validTrainConfig,
-          trainName,
-          newStartTimeString
-        );
+        const trainSchedule = formatTrainSchedulePayload(validTrainConfig, trainName, newStartTime);
         trainScheduleParams.push({ ...trainSchedule });
         actualTrainCount += trainStep;
       }

front/src/modules/trainschedule/components/ManageTrainSchedule/TrainSettings.tsx

@@ -11,7 +11,7 @@ import ChipsSNCF from 'common/BootstrapSNCF/ChipsSNCF';
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
 import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import { useAppDispatch } from 'store';
-import { dateTimeToIso } from 'utils/date';
+import { parseLocalDateTime, formatLocalDateTime } from 'utils/date';
 import { useDebounce } from 'utils/helpers';
 import { isInvalidFloatNumber } from 'utils/numbers';
 
@@ -27,7 +27,7 @@ export default function TrainSettings() {
   const startTimeFromStore = useSelector(getStartTime);
 
   const [name, setName] = useState<string>(nameFromStore);
-  const [startTime, setStartTime] = useState(startTimeFromStore.substring(0, 19));
+  const [startTime, setStartTime] = useState(formatLocalDateTime(startTimeFromStore));
   const [initialSpeed, setInitialSpeed] = useState<number | undefined>(initialSpeedFromStore);
   const dispatch = useAppDispatch();
 
@@ -52,8 +52,8 @@ export default function TrainSettings() {
   }, [debouncedName]);
 
   useEffect(() => {
-    const formatedStartTime = dateTimeToIso(debouncedStartTime);
-    if (formatedStartTime) dispatch(updateStartTime(formatedStartTime));
+    const newStartTime = parseLocalDateTime(debouncedStartTime);
+    if (newStartTime) dispatch(updateStartTime(newStartTime));
   }, [debouncedStartTime]);
 
   useEffect(() => {
@@ -63,7 +63,7 @@ export default function TrainSettings() {
   useEffect(() => {
     setName(nameFromStore);
     setInitialSpeed(initialSpeedFromStore);
-    setStartTime(startTimeFromStore.substring(0, 19));
+    setStartTime(formatLocalDateTime(startTimeFromStore));
   }, [nameFromStore, initialSpeedFromStore, startTimeFromStore]);
 
   const isInvalidTrainScheduleName = isInvalidName(name);

front/src/modules/trainschedule/components/ManageTrainSchedule/helpers/checkCurrentConfig.ts

@@ -149,7 +149,7 @@ const checkCurrentConfig = (
     margins: formatMargin(compact(pathSteps)),
     schedule: formatSchedule(compact(pathSteps)),
     powerRestrictions: powerRestriction,
-    firstStartTime: startTime,
+    firstStartTime: startTime.toISOString(),
     speedLimitByTag,
   };
 };

front/src/modules/trainschedule/components/ManageTrainSchedule/helpers/formatTrainSchedulePayload.ts

@@ -6,7 +6,7 @@ import type { ValidConfig } from '../types';
 export default function formatTrainSchedulePayload(
   validConfig: ValidConfig,
   trainName: string,
-  startTime: string
+  startTime: Date
 ): TrainScheduleBase {
   const {
     constraintDistribution,
@@ -35,7 +35,7 @@ export default function formatTrainSchedulePayload(
     rolling_stock_name: rollingStockName,
     schedule: validConfig.schedule,
     speed_limit_tag: speedLimitByTag,
-    start_time: startTime,
+    start_time: startTime.toISOString(),
     train_name: trainName,
   };
 }

front/src/reducers/index.ts

@@ -58,7 +58,7 @@ const saveUserFilter = createFilter('user', userWhiteList);
 const saveMainFilter = createFilter('main', mainWhiteList);
 
 // Deserialize date strings coming from local storage
-const dateTransform = createTransform(
+const stdcmPathStepsDateTransform = createTransform(
   null,
   (outboundState: { arrival?: string }[]) =>
     outboundState.map(({ arrival, ...step }) => {
@@ -69,14 +69,22 @@ const dateTransform = createTransform(
     }),
   { whitelist: ['stdcmPathSteps'] }
 );
+const operationalStudiesDateTransform = createTransform(
+  null,
+  ({ startTime, ...outboundState }: { startTime: string }) => ({
+    ...outboundState,
+    startTime: new Date(startTime),
+  }),
+  { whitelist: ['operationalStudiesConf'] }
+);
 
 // Useful to only blacklist a sub-propertie of osrdconf
 const buildOsrdConfPersistConfig = <T extends OsrdConfState>(
   slice: ConfSlice
 ): PersistConfig<T> => ({
   key: slice.name,
   storage,
-  transforms: [dateTransform],
+  transforms: [stdcmPathStepsDateTransform, operationalStudiesDateTransform],
   blacklist: ['featureInfoClick'],
 });
 

front/src/reducers/osrdconf/operationalStudiesConf/index.ts

@@ -5,7 +5,6 @@ import type { TrainScheduleWithDetails } from 'modules/trainschedule/components/
 import computeBasePathStep from 'modules/trainschedule/helpers/computeBasePathStep';
 import { defaultCommonConf, buildCommonConfReducers } from 'reducers/osrdconf/osrdConfCommon';
 import type { OsrdConfState } from 'reducers/osrdconf/types';
-import { convertIsoUtcToLocalTime } from 'utils/date';
 import { msToKmh } from 'utils/physics';
 
 import { builPowerRestrictionReducer } from './powerRestrictionReducer';
@@ -27,7 +26,7 @@ export const operationalStudiesConfSlice = createSlice({
         rollingStock,
         trainName,
         initial_speed,
-        start_time,
+        startTime,
         options,
         speedLimitTag,
         labels,
@@ -38,7 +37,7 @@ export const operationalStudiesConfSlice = createSlice({
 
       state.rollingStockID = rollingStock?.id;
       state.pathSteps = path.map((_, index) => computeBasePathStep(action.payload, index));
-      state.startTime = convertIsoUtcToLocalTime(start_time);
+      state.startTime = startTime;
 
       state.name = trainName;
       state.initialSpeed = initial_speed ? Math.floor(msToKmh(initial_speed) * 10) / 10 : 0;

front/src/reducers/osrdconf/operationalStudiesConf/operationalStudiesConfReducer.spec.ts

@@ -88,7 +88,7 @@ describe('simulationConfReducer', () => {
           receptionSignal: undefined,
         },
       ],
-      startTime: '2021-01-01T00:00:00+00:00',
+      startTime: new Date('2021-01-01T00:00:00+00:00'),
     });
   });
 

front/src/reducers/osrdconf/osrdConfCommon/__tests__/utils.ts

@@ -255,7 +255,7 @@ const testCommonConfReducers = (slice: OperationalStudiesConfSlice | StdcmConfSl
   });
 
   it('should handle updateStartTime', () => {
-    const newStartTime = '2024-05-01T11:08:00.000+01:00';
+    const newStartTime = new Date('2024-05-01T11:08:00.000+01:00');
     defaultStore.dispatch(slice.actions.updateStartTime(newStartTime));
     const state = defaultStore.getState()[slice.name];
     expect(state.startTime).toBe(newStartTime);

front/src/reducers/osrdconf/osrdConfCommon/index.ts

@@ -37,7 +37,7 @@ export const defaultCommonConf: OsrdConfState = {
   // Corresponds to origin and destination not defined
   pathSteps: [null, null],
   rollingStockComfort: 'STANDARD' as const,
-  startTime: new Date().toISOString(),
+  startTime: new Date(),
 };
 
 interface CommonConfReducers<S extends OsrdConfState> extends InfraStateReducers<S> {

front/src/reducers/osrdconf/types.ts

@@ -42,8 +42,7 @@ export interface OsrdConfState extends InfraState {
   featureInfoClick: { displayPopup: boolean; feature?: Feature; coordinates?: number[] };
   pathSteps: (PathStep | null)[];
   rollingStockComfort: Comfort;
-  // Format ISO 8601
-  startTime: string;
+  startTime: Date;
 }
 
 export interface StandardAllowance {

front/src/utils/__tests__/date.spec.ts

@@ -1,36 +1,36 @@
 import { describe, it, expect } from 'vitest';
 
 import {
-  dateTimeToIso,
+  parseLocalDateTime,
   isoDateToMs,
   formatToIsoDate,
   serializeDateTimeWithoutYear,
   extractDateAndTime,
   isArrivalDateInSearchTimeWindow,
 } from 'utils/date';
 
-describe('dateTimeToIso', () => {
+describe('parseLocalDateTime', () => {
   it('should return an iso date by passing a date without milliseconds', () => {
     const inputDate = '2024-04-25T08:20';
-    const isoDate = dateTimeToIso(inputDate);
-    expect(isoDate).toEqual('2024-04-25T08:20:00Z'); // Ends by Z because CI seems to be in UTC timezone
+    const isoDate = parseLocalDateTime(inputDate);
+    expect(isoDate?.toISOString()).toEqual('2024-04-25T08:20:00.000Z');
   });
 
   it('should return an iso date by passing a date with milliseconds', () => {
     const inputDate = '2024-04-25T08:20:10';
-    const isoDate = dateTimeToIso(inputDate);
-    expect(isoDate).toEqual('2024-04-25T08:20:10Z'); // Ends by Z because CI seems to be in UTC timezone
+    const isoDate = parseLocalDateTime(inputDate);
+    expect(isoDate?.toISOString()).toEqual('2024-04-25T08:20:10.000Z');
   });
 
   it('should return an iso date by passing a date with a space between date and time instead of a T', () => {
     const inputDate = '2024-04-25 08:20:10';
-    const isoDate = dateTimeToIso(inputDate);
-    expect(isoDate).toEqual('2024-04-25T08:20:10Z'); // Ends by Z because CI seems to be in UTC timezone
+    const isoDate = parseLocalDateTime(inputDate);
+    expect(isoDate?.toISOString()).toEqual('2024-04-25T08:20:10.000Z');
   });
 
   it('should return null by passing a date with the wrong format', () => {
     const inputDate = '04-25 08:20:10';
-    const isoDate = dateTimeToIso(inputDate);
+    const isoDate = parseLocalDateTime(inputDate);
     expect(isoDate).toBeNull();
   });
 });

front/src/utils/date.ts

@@ -6,7 +6,6 @@ import utc from 'dayjs/plugin/utc';
 import i18next from 'i18next';
 
 import type { ScheduleConstraint } from 'applications/stdcm/types';
-import type { IsoDateTimeString } from 'common/types';
 import i18n from 'i18n';
 
 dayjs.extend(utc);
@@ -43,15 +42,18 @@ export function dateTimeFormatting(date: Date, withoutTime: boolean = false) {
  * @param inputDate e.g. 2024-04-25T08:30
  * @return an ISO 8601 date (e.g. 2024-04-25T08:30:00+02:00) or null
  */
-export const dateTimeToIso = (inputDateTime: string) => {
+export const parseLocalDateTime = (inputDateTime: string) => {
   // Regex to check format 1234-56-78T12:00:00(:00)
   const inputDateTimeRegex = /^\d{4}-\d{2}-\d{2}[T\s]\d{2}:\d{2}(?::\d{2}){0,1}$/;
   if (inputDateTimeRegex.test(inputDateTime)) {
-    return dayjs.tz(inputDateTime, userTimeZone).format();
+    return dayjs.tz(inputDateTime, userTimeZone).toDate();
   }
   return null;
 };
 
+export const formatLocalDateTime = (date: Date) =>
+  dayjs(date).local().format('YYYY-MM-DDTHH:mm:ss');
+
 /**
  * Transform a milliseconds date to an ISO 8601 date with the user timezone
  * @param msDate milliseconds date (elapsed from January 1st 1970)
@@ -132,10 +134,6 @@ export function convertUTCDateToLocalDate(date: number) {
   return Math.abs(timeDifferenceMinutes) * 60 + date;
 }
 
-export function convertIsoUtcToLocalTime(isoUtcString: IsoDateTimeString): string {
-  return dayjs(isoUtcString).local().format();
-}
-
 export function addDurationToDate(
   startTime: Date,
   duration: number,