Improve map state after creating a new route

Now the newly created route will be added to the state correctly.
Previously there were desync in state which resulted in several bugs:
- Refreshing the view would cause the route to get lost
- Clicking the map would cause state to lose the route id, resulting in user not being able to do changes to the route

Author: patricvincit

ui/src/components/map/Map.tsx

@@ -4,6 +4,7 @@ import {
   MutableRefObject,
   RefObject,
   forwardRef,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -40,6 +41,7 @@ import { RouteStopsOverlay } from './routes/RouteStopsOverlay';
 import { FunctionalAreaVisualization, StopAreas } from './stop-areas';
 import { MemberStopLines, Stops } from './stops';
 import { Terminals } from './terminals';
+import { useMapUrlStateContext } from './utils/mapUrlState';
 
 type MapViewState = {
   readonly mapStopViewState: MapEntityEditorViewState;
@@ -179,10 +181,22 @@ export const MapComponent: ForwardRefRenderFunction<
   MapProps
 > = ({ className, width = '100vw', height = '100vh' }, externalRef) => {
   const [showRoute, setShowRoute] = useState(true);
+  const {
+    state: {
+      displayedRoute: { routeId: urlRouteId },
+    },
+  } = useMapUrlStateContext();
+  const dispatch = useAppDispatch();
 
   const editorRefs = useEditorRefs();
   const mapViewState = useMapViewState();
 
+  useEffect(() => {
+    if (urlRouteId) {
+      dispatch(setSelectedRouteIdAction(urlRouteId));
+    }
+  }, [dispatch, urlRouteId]);
+
   useRouteEditorImperativeHandle(externalRef, editorRefs.routeEditorRef);
   const onClick = useOnClickMap(editorRefs, mapViewState);
 

ui/src/components/map/routes/RouteEditor.tsx

@@ -32,6 +32,7 @@ import {
 } from '../../../redux';
 import { isDateInRange } from '../../../time';
 import { RequiredKeys } from '../../../types';
+import { Priority } from '../../../types/enums';
 import { ConfirmationDialog } from '../../../uiComponents';
 import {
   showSuccessToast,
@@ -83,6 +84,7 @@ const RouteEditorComponent: ForwardRefRenderFunction<
     state: {
       filters: { observationDate },
     },
+    setDisplayedRoute,
     setFlatUrlState,
     resetUrlState,
   } = useMapUrlStateContext();
@@ -156,11 +158,17 @@ const RouteEditorComponent: ForwardRefRenderFunction<
     // Select created route
     dispatch(setSelectedRouteIdAction(newRoute.route_id));
 
-    setFlatUrlState((p) => ({ ...p, routeId: newRoute.route_id }));
-    // If created route is not valid at the selected observation date,
-    // change observation date to created route's validity start date
-    // so the user can see the freshly created route
-
+    setDisplayedRoute(() => ({
+      routeId: newRoute.route_id,
+      lineLabel: null,
+      routeLabels: [],
+      routePriorities: [Priority.Standard, Priority.Temporary, Priority.Draft],
+      showSelectedDaySituation: false,
+    }));
+
+    // // If created route is not valid at the selected observation date,
+    // // change observation date to created route's validity start date
+    // // so the user can see the freshly created route
     if (
       !isDateInRange(
         observationDate,
@@ -176,9 +184,13 @@ const RouteEditorComponent: ForwardRefRenderFunction<
       showWarningToast(t(($) => $.filters.observationDateAdjusted));
     }
 
-    // Reset map editor drap mode and remove draft route
-    // as it is now saved
-
+    /* 
+      - Reset map editor drap mode and remove draft route as it is now saved
+      - Parent has no access to ref here so use removeRoute directly 
+        here instead of onDeleteDrawnRoute which relies on the ref 
+    */
+    removeRoute(map?.getMap(), SNAPPING_LINE_LAYER_ID);
+    dispatch(resetDraftRouteGeometryAction());
     dispatch(resetRouteCreatingAction());
   };