front: refacto stdcm op schedule

front/src/applications/stdcm/components/StdcmForm/StdcmDestination.tsx

@@ -1,70 +1,22 @@
-import { useMemo } from 'react';
-
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { getTimesInfoFromDate } from 'applications/stdcm/utils';
 import DestinationIcon from 'assets/pictures/mapMarkers/destination.svg';
-import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
-import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
+import { useOsrdConfSelectors } from 'common/osrdContext';
 import type { StdcmConfSelectors } from 'reducers/osrdconf/stdcmConf/selectors';
-import { useAppDispatch } from 'store';
 
 import StdcmCard from './StdcmCard';
 import StdcmOperationalPoint from './StdcmOperationalPoint';
 import StdcmOpSchedule from './StdcmOpSchedule';
-import type { ArrivalTimeTypes, ScheduleConstraint, StdcmConfigCardProps } from '../../types';
+import type { StdcmConfigCardProps } from '../../types';
 
 const StdcmDestination = ({ disabled = false }: StdcmConfigCardProps) => {
   const { t } = useTranslation('stdcm');
-  const dispatch = useAppDispatch();
 
   const { getStdcmDestination } = useOsrdConfSelectors() as StdcmConfSelectors;
 
   const destination = useSelector(getStdcmDestination);
 
-  const { updateStdcmPathStep } = useOsrdConfActions() as StdcmConfSliceActions;
-
-  const { destinationArrival, destinationToleranceValues } = useMemo(
-    () => ({
-      destinationArrival: getTimesInfoFromDate(destination.arrival),
-      destinationToleranceValues: {
-        arrivalToleranceBefore: destination.tolerances?.before || 0,
-        arrivalToleranceAfter: destination.tolerances?.after || 0,
-      },
-    }),
-    [destination]
-  );
-
-  const onArrivalChange = ({ date, hours, minutes }: ScheduleConstraint) => {
-    date.setHours(hours, minutes);
-    dispatch(
-      updateStdcmPathStep({
-        id: destination.id,
-        updates: { arrival: date },
-      })
-    );
-  };
-
-  const onArrivalTypeChange = (arrivalType: ArrivalTimeTypes) => {
-    dispatch(updateStdcmPathStep({ id: destination.id, updates: { arrivalType } }));
-  };
-
-  const onToleranceChange = ({
-    toleranceBefore,
-    toleranceAfter,
-  }: {
-    toleranceBefore: number;
-    toleranceAfter: number;
-  }) => {
-    dispatch(
-      updateStdcmPathStep({
-        id: destination.id,
-        updates: { tolerances: { before: toleranceBefore, after: toleranceAfter } },
-      })
-    );
-  };
-
   return (
     <StdcmCard
       data-testid="destination-card"
@@ -78,16 +30,7 @@ const StdcmDestination = ({ disabled = false }: StdcmConfigCardProps) => {
         pathStepId={destination.id}
         disabled={disabled}
       />
-      <StdcmOpSchedule
-        onArrivalChange={onArrivalChange}
-        onArrivalTypeChange={onArrivalTypeChange}
-        onArrivalToleranceChange={onToleranceChange}
-        opTimingData={destinationArrival}
-        opToleranceValues={destinationToleranceValues}
-        opScheduleTimeType={destination.arrivalType}
-        disabled={disabled}
-        opId="destination-arrival"
-      />
+      <StdcmOpSchedule pathStep={destination} disabled={disabled} opId="destination-arrival" />
     </StdcmCard>
   );
 };

front/src/applications/stdcm/components/StdcmForm/StdcmOpSchedule.tsx

@@ -1,83 +1,55 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { DatePicker, Select, TimePicker, TolerancePicker } from '@osrd-project/ui-core';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { useOsrdConfSelectors } from 'common/osrdContext';
-import { formatDateString, isArrivalDateInSearchTimeWindow } from 'utils/date';
+import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
+import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
+import type { StdcmPathStep } from 'reducers/osrdconf/types';
+import { useAppDispatch } from 'store';
+import { dateToHHMMSS, formatDateString } from 'utils/date';
 import { createStringSelectOptions } from 'utils/uiCoreHelpers';
 
 import type { ArrivalTimeTypes, ScheduleConstraint } from '../../types';
 
 type StdcmOpScheduleProps = {
   disabled: boolean;
-  onArrivalChange: ({ date, hours, minutes }: ScheduleConstraint) => void;
-  onArrivalTypeChange: (arrivalType: ArrivalTimeTypes) => void;
-  onArrivalToleranceChange: ({
-    toleranceBefore,
-    toleranceAfter,
-  }: {
-    toleranceBefore: number;
-    toleranceAfter: number;
-  }) => void;
-  opScheduleTimeType: ArrivalTimeTypes;
-  opTimingData?: {
-    date: Date;
-    arrivalDate: string;
-    arrivalTime: string;
-    arrivalTimeHours: number;
-    arrivalTimeMinutes: number;
-  };
-  opToleranceValues: {
-    arrivalToleranceBefore: number;
-    arrivalToleranceAfter: number;
-  };
+  pathStep: Extract<StdcmPathStep, { isVia: false }>;
   opId: string;
   isOrigin?: boolean;
 };
 
-const defaultDate = (date?: Date) => {
-  const newDate = date ? new Date(date) : new Date();
-  newDate.setHours(0, 0, 0);
-  return newDate;
-};
-
-const StdcmOpSchedule = ({
-  disabled,
-  onArrivalChange,
-  onArrivalTypeChange,
-  onArrivalToleranceChange,
-  opTimingData,
-  opScheduleTimeType,
-  opToleranceValues,
-  opId,
-  isOrigin = false,
-}: StdcmOpScheduleProps) => {
+const StdcmOpSchedule = ({ disabled, pathStep, opId, isOrigin = false }: StdcmOpScheduleProps) => {
   const { t } = useTranslation('stdcm');
+  const dispatch = useAppDispatch();
+
+  const { updateStdcmPathStep } = useOsrdConfActions() as StdcmConfSliceActions;
   const { getSearchDatetimeWindow } = useOsrdConfSelectors();
   const searchDatetimeWindow = useSelector(getSearchDatetimeWindow);
 
-  const { arrivalDate, arrivalTime, arrivalTimeHours, arrivalTimeMinutes, arrivalToleranceValues } =
-    useMemo(() => {
-      const isArrivalDateValid =
-        opTimingData?.arrivalDate &&
-        isArrivalDateInSearchTimeWindow(opTimingData.date, searchDatetimeWindow);
-
+  const { arrivalTime, arrivalTimeHours, arrivalTimeMinutes } = useMemo(() => {
+    if (!pathStep.arrival) {
       return {
-        arrivalDate:
-          opTimingData && isArrivalDateValid
-            ? opTimingData.date
-            : defaultDate(searchDatetimeWindow?.begin),
-        arrivalTime: opTimingData?.arrivalTime,
-        arrivalTimeHours: opTimingData?.arrivalTimeHours,
-        arrivalTimeMinutes: opTimingData?.arrivalTimeMinutes,
-        arrivalToleranceValues: {
-          minusTolerance: opToleranceValues.arrivalToleranceBefore,
-          plusTolerance: opToleranceValues.arrivalToleranceAfter,
-        },
+        arrivalTime: undefined,
+        arrivalTimeHours: undefined,
+        arrivalTimeMinutes: undefined,
       };
-    }, [opTimingData, opToleranceValues, searchDatetimeWindow]);
+    }
+    return {
+      arrivalTime: dateToHHMMSS(pathStep.arrival, { withoutSeconds: true }),
+      arrivalTimeHours: pathStep.arrival.getHours(),
+      arrivalTimeMinutes: pathStep.arrival.getMinutes(),
+    };
+  }, [pathStep.arrival]);
+
+  const tolerances = useMemo(
+    () => ({
+      minusTolerance: pathStep.tolerances?.before || 0,
+      plusTolerance: pathStep.tolerances?.after || 0,
+    }),
+    [pathStep.tolerances]
+  );
 
   const selectableSlot = useMemo(
     () =>
@@ -101,26 +73,27 @@ const StdcmOpSchedule = ({
     [t, searchDatetimeWindow]
   );
 
-  useEffect(() => {
-    if (
-      (!isArrivalDateInSearchTimeWindow(arrivalDate, searchDatetimeWindow) ||
-        !opTimingData?.arrivalDate) &&
-      opScheduleTimeType === 'preciseTime'
-    ) {
-      onArrivalChange({
-        date: defaultDate(searchDatetimeWindow?.begin),
-        hours: arrivalTimeHours || 0,
-        minutes: arrivalTimeMinutes || 0,
-      });
-    }
-  }, [searchDatetimeWindow, opScheduleTimeType]);
+  const onArrivalChange = ({ date, hours, minutes }: ScheduleConstraint) => {
+    const newDate = new Date(date);
+    newDate.setHours(hours, minutes);
+    dispatch(
+      updateStdcmPathStep({
+        id: pathStep.id,
+        updates: { arrival: newDate },
+      })
+    );
+  };
+
+  const onArrivalTypeChange = (arrivalType: ArrivalTimeTypes) => {
+    dispatch(updateStdcmPathStep({ id: pathStep.id, updates: { arrivalType } }));
+  };
 
   return (
     <>
       <div className="arrival-type-select">
         <Select
           id={`select-${opId}`}
-          value={opScheduleTimeType}
+          value={pathStep.arrivalType}
           onChange={(e) => {
             if (e) {
               onArrivalTypeChange(e as ArrivalTimeTypes);
@@ -135,7 +108,7 @@ const StdcmOpSchedule = ({
           disabled={disabled}
         />
       </div>
-      {opScheduleTimeType === 'preciseTime' && (
+      {pathStep.arrivalType === 'preciseTime' && (
         <div className="schedule">
           <DatePicker
             inputProps={{
@@ -145,7 +118,7 @@ const StdcmOpSchedule = ({
               disabled,
             }}
             selectableSlot={selectableSlot}
-            value={arrivalDate}
+            value={pathStep.arrival}
             onDateChange={(e) => {
               onArrivalChange({
                 date: e,
@@ -161,7 +134,11 @@ const StdcmOpSchedule = ({
             hours={arrivalTimeHours}
             minutes={arrivalTimeMinutes}
             onTimeChange={({ hours, minutes }) => {
-              onArrivalChange({ date: arrivalDate, hours, minutes });
+              onArrivalChange({
+                date: pathStep.arrival || searchDatetimeWindow!.begin,
+                hours,
+                minutes,
+              });
             }}
             disabled={disabled}
             value={arrivalTime}
@@ -171,13 +148,15 @@ const StdcmOpSchedule = ({
             <TolerancePicker
               id={`stdcm-tolerance-${opId}`}
               label={t('trainPath.tolerance')}
-              toleranceValues={arrivalToleranceValues}
+              toleranceValues={tolerances}
               onChange={() => {}}
               onToleranceChange={({ minusTolerance, plusTolerance }) => {
-                onArrivalToleranceChange({
-                  toleranceBefore: minusTolerance,
-                  toleranceAfter: plusTolerance,
-                });
+                dispatch(
+                  updateStdcmPathStep({
+                    id: pathStep.id,
+                    updates: { tolerances: { before: minusTolerance, after: plusTolerance } },
+                  })
+                );
               }}
               disabled={disabled}
             />

front/src/applications/stdcm/components/StdcmForm/StdcmOrigin.tsx

@@ -1,74 +1,21 @@
-import { useMemo } from 'react';
-
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { getTimesInfoFromDate } from 'applications/stdcm/utils';
 import OriginIcon from 'assets/pictures/mapMarkers/start.svg';
-import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
-import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
+import { useOsrdConfSelectors } from 'common/osrdContext';
 import type { StdcmConfSelectors } from 'reducers/osrdconf/stdcmConf/selectors';
-import { useAppDispatch } from 'store';
 
 import StdcmCard from './StdcmCard';
 import StdcmOperationalPoint from './StdcmOperationalPoint';
 import StdcmOpSchedule from './StdcmOpSchedule';
-import type { ArrivalTimeTypes, ScheduleConstraint, StdcmConfigCardProps } from '../../types';
+import type { StdcmConfigCardProps } from '../../types';
 
 const StdcmOrigin = ({ disabled = false }: StdcmConfigCardProps) => {
   const { t } = useTranslation('stdcm');
-  const dispatch = useAppDispatch();
 
   const { getStdcmOrigin } = useOsrdConfSelectors() as StdcmConfSelectors;
   const origin = useSelector(getStdcmOrigin);
 
-  const { updateStdcmPathStep } = useOsrdConfActions() as StdcmConfSliceActions;
-
-  const { originArrival, originToleranceValues } = useMemo(
-    () => ({
-      originArrival: getTimesInfoFromDate(origin.arrival),
-      originToleranceValues: {
-        arrivalToleranceBefore: origin.tolerances?.before || 0,
-        arrivalToleranceAfter: origin.tolerances?.after || 0,
-      },
-    }),
-    [origin]
-  );
-
-  const onOriginArrivalChange = ({ date, hours, minutes }: ScheduleConstraint) => {
-    date.setHours(hours, minutes);
-    dispatch(
-      updateStdcmPathStep({
-        id: origin.id,
-        updates: { arrival: date },
-      })
-    );
-  };
-
-  const onOriginArrivalTypeChange = (arrivalType: ArrivalTimeTypes) => {
-    dispatch(
-      updateStdcmPathStep({
-        id: origin.id,
-        updates: { arrivalType },
-      })
-    );
-  };
-
-  const onOriginToleranceChange = ({
-    toleranceBefore,
-    toleranceAfter,
-  }: {
-    toleranceBefore: number;
-    toleranceAfter: number;
-  }) => {
-    dispatch(
-      updateStdcmPathStep({
-        id: origin.id,
-        updates: { tolerances: { before: toleranceBefore, after: toleranceAfter } },
-      })
-    );
-  };
-
   return (
     <StdcmCard
       name={t('trainPath.origin')}
@@ -82,17 +29,7 @@ const StdcmOrigin = ({ disabled = false }: StdcmConfigCardProps) => {
         pathStepId={origin.id}
         disabled={disabled}
       />
-      <StdcmOpSchedule
-        onArrivalChange={onOriginArrivalChange}
-        onArrivalTypeChange={onOriginArrivalTypeChange}
-        onArrivalToleranceChange={onOriginToleranceChange}
-        opTimingData={originArrival}
-        opToleranceValues={originToleranceValues}
-        opScheduleTimeType={origin.arrivalType}
-        disabled={disabled}
-        opId="origin-arrival"
-        isOrigin
-      />
+      <StdcmOpSchedule pathStep={origin} disabled={disabled} opId="origin-arrival" isOrigin />
     </StdcmCard>
   );
 };