front: add scenario train ids to query params and local storage

Signed-off-by: Alice Khoudli <[email protected]>

Author: Synar

front/src/applications/operationalStudies/hooks/useScenarioData.ts

@@ -11,7 +11,6 @@ import {
   type TrainScheduleResult,
 } from 'common/api/osrdEditoastApi';
 import { setFailure } from 'reducers/main';
-import { updateSelectedTrainId, updateTrainIdUsedForProjection } from 'reducers/simulationResults';
 import {
   getSelectedTrainId,
   getTrainIdUsedForProjection,
@@ -164,15 +163,6 @@ const useScenarioData = (
     });
   }, []);
 
-  useEffect(() => {
-    dispatch(updateTrainIdUsedForProjection(undefined));
-    dispatch(updateSelectedTrainId(undefined));
-    return () => {
-      dispatch(updateTrainIdUsedForProjection(undefined));
-      dispatch(updateSelectedTrainId(undefined));
-    };
-  }, []);
-
   return {
     selectedTrainId,
     trainScheduleSummaries,

front/src/applications/operationalStudies/hooks/useScenarioQueryParams.ts

@@ -0,0 +1,87 @@
+import { useEffect, useCallback, useMemo } from 'react';
+
+import { useSelector } from 'react-redux';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+
+import { updateSelectedTrainId, updateTrainIdUsedForProjection } from 'reducers/simulationResults';
+import {
+  getSelectedTrainId,
+  getTrainIdUsedForProjection,
+} from 'reducers/simulationResults/selectors';
+import { useAppDispatch } from 'store';
+
+type SimulationParams = {
+  projectId: string;
+  studyId: string;
+  scenarioId: string;
+};
+
+const useScenarioQueryParams = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  const {
+    projectId: urlProjectId,
+    studyId: urlStudyId,
+    scenarioId: urlScenarioId,
+  } = useParams() as SimulationParams;
+  const localKey = `useScenarioQueryParams_project${urlProjectId}_study${urlStudyId}_scenario${urlScenarioId}`;
+
+  const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+
+  const reduxSelectedTrainId = useSelector(getSelectedTrainId);
+  const reduxProjectionTrainId = useSelector(getTrainIdUsedForProjection);
+
+  // Helper function to get a parameter from the URL, or if absent from local storage
+  const getParamFromUrlOrStorage = useCallback(
+    (paramName: string) =>
+      searchParams.get(paramName) || localStorage.getItem(`${localKey}_${paramName}`) || undefined,
+    [localKey, searchParams]
+  );
+
+  // Helper function to get a parameter from the URL or local storage
+  const setParamsInUrlAndStorage = useCallback(
+    (paramName: string, paramValue: string | undefined) => {
+      if (paramValue === undefined) {
+        searchParams.delete(paramName);
+        localStorage.removeItem(`${localKey}_${paramName}`);
+      } else {
+        searchParams.set(paramName, paramValue);
+        localStorage.setItem(`${localKey}_${paramName}`, paramValue);
+      }
+      navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
+    },
+    [localKey, searchParams, location.pathname, navigate]
+  );
+
+  // Update the redux store on page load
+  useEffect(() => {
+    const selectedTrainFromUrl = getParamFromUrlOrStorage('selected_train');
+    const projectionFromUrl = getParamFromUrlOrStorage('projection');
+
+    if (selectedTrainFromUrl) {
+      dispatch(updateSelectedTrainId(Number(selectedTrainFromUrl)));
+    }
+    if (projectionFromUrl) {
+      dispatch(updateTrainIdUsedForProjection(Number(projectionFromUrl)));
+    }
+  }, [dispatch, getParamFromUrlOrStorage]);
+
+  // Update the URL and local storage on redux store change
+  useEffect(() => {
+    if (reduxSelectedTrainId?.toString() !== getParamFromUrlOrStorage('selected_train')) {
+      setParamsInUrlAndStorage('selected_train', reduxSelectedTrainId?.toString());
+    }
+    if (reduxProjectionTrainId?.toString() !== getParamFromUrlOrStorage('projection')) {
+      setParamsInUrlAndStorage('projection', reduxProjectionTrainId?.toString());
+    }
+  }, [
+    reduxSelectedTrainId,
+    reduxProjectionTrainId,
+    setParamsInUrlAndStorage,
+    getParamFromUrlOrStorage,
+  ]);
+};
+
+export default useScenarioQueryParams;

front/src/applications/operationalStudies/views/Scenario.tsx

@@ -1,12 +1,16 @@
 import BreadCrumbs from 'applications/operationalStudies/components/BreadCrumbs';
 import ScenarioContent from 'applications/operationalStudies/components/Scenario/ScenarioContent';
 import useScenario from 'applications/operationalStudies/hooks/useScenario';
+import useScenarioQueryParams from 'applications/operationalStudies/hooks/useScenarioQueryParams';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import useInfraStatus from 'modules/pathfinding/hooks/useInfraStatus';
 
 const Scenario = () => {
   const { scenario, timetable } = useScenario();
 
+  // Initialize and sync the URL and local storage with Redux
+  useScenarioQueryParams();
+
   const infraData = useInfraStatus();
   const { infra } = infraData;