Revize dd270a41

path autorefresh works as intended

re #9629

frontend/src/features/TrackingTool/MapPath.tsx

@@ -3 +3 @@
 import { PathVariant } from './buildPathVariants'
 import TextPath from 'react-leaflet-textpath'
 import { Marker, Popup } from 'react-leaflet'
-import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
+import {
+    Checkbox,
+    FormControlLabel,
+    Paper,
+    Stack,
+    Typography,
+} from '@mui/material'
 import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
 import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../Catalog/CatalogItemDetail'
 import { useDispatch, useSelector } from 'react-redux'
@@ -31 +37 @@
 // Map path component
 const MapPath: FunctionComponent<MapPathProps> = ({ idx, pathVariant }) => {
     // List of all map points that belong to the path
-    const [mapPoints, setMapPoints] = useState<DisplayableMapPoint[]>(
-        pathVariant
-            .filter((item) => item.latitude && item.longitude)
-            .map((item) => new DisplayableMapPoint(item))
+    const pathVariants = useSelector(
+        (state: RootState) => state.trackingTool.pathVariants
     )
+    const [mapPoints, setMapPoints] = useState<DisplayableMapPoint[]>([])
+    const dispatch = useDispatch()
 
     // Set of all active paths
     const activePaths = useSelector(
@@ -54 +60 @@
 
     const getActiveMapPoints = () => mapPoints.filter((item) => item.active)
 
-    const dispatch = useDispatch()
+    // Refresh the list of map points if it has changed
+    useEffect(() => {
+        if (!pathVariants || pathVariants.length <= idx) {
+            return
+        }
+        setMapPoints(
+            [...pathVariants[idx]]
+                .filter((item) => item.latitude && item.longitude)
+                .map((item) => new DisplayableMapPoint(item))
+        )
+    }, [pathVariants, idx])
 
     // Builds all edges of the path
     const buildEdges = () => {