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 = () => {

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -18 +18 @@
 import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
 import MapPath from './MapPath'
 import EditIcon from '@mui/icons-material/Edit'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../redux/store'
+import { consumeErr as consumeError } from './trackingToolSlice'
+import { showNotification } from '../Notification/notificationSlice'
 
 // Page with tracking tool
 const TrackingTool = () => {
@@ -35 +37 @@
     //     map.flyTo(mapCenter, mapConfig.defaultZoom)
     // }, [map, mapCenter])
 
+    // Consume any error
+    const err = useSelector((state: RootState) => state.trackingTool.lastError)
+    const dispatch = useDispatch()
+
+    useEffect(() => {
+        console.log('oi')
+        if (!err) {
+            return
+        }
+        const error = `${err}`
+        dispatch(consumeError())
+        dispatch(showNotification({
+            message: error,
+            severity: 'error',
+
+        }))
+    }, [err, dispatch])
 
     return (
         <Fragment>
@@ -118 +137 @@
                             attribution={mapConfig.attribution}
                             url={mapConfig.url}
                         />
-                        {pathVariants &&
-                            pathVariants.map((pathVariant, idx) => (
-                                <MapPath
-                                    key={idx}
-                                    pathVariant={pathVariant}
-                                    idx={idx}
-                                />
-                            ))}
+                        {pathVariants?.map((pathVariant, idx) => (
+                            <MapPath
+                                pathVariant={pathVariant}
+                                idx={idx} />
+                        ))}
                     </MapContainer>
                 </Grid>
             </Grid>

frontend/src/features/TrackingTool/trackingToolSlice.ts

@@ -9 +9 @@
     isLoading: boolean // whether the data is being loaded
     pathDto?: PathDto // the data
     pathVariants?: PathVariant[] // undefined signals that no path variants were yet fetched from the API
-    lastErr?: string // consumable for errors during thunks
+    lastError?: string // consumable for errors during thunks
     mapCenter: LatLngTuple // pair of latitude and longitude
     primaryPathIdx: number // index of the primary path
     activePaths: Set<number> // indices of the active paths
@@ -70 +70 @@
         })
         builder.addCase(sendTextForProcessing.rejected, (state, action) => ({
             ...initialState,
-            lastErr: action.error.message,
+            lastError: action.error.message,
             isLoading: false,
             dialogApiCallSuccess: false,
         }))

frontend/src/features/TrackingTool/trackingToolThunks.ts

@@ -13 +13 @@
             }
             return data
         } catch (err: any) {
+            console.log(err)
             return Promise.reject('Error, server is currently unavailable')
         }
     }