Revize 8c57f958

refactor to use Redux instead of localstate

re #9629

frontend/src/features/TrackingTool/MapPath.tsx

@@ -1 @@
-import { Fragment, FunctionComponent, useState } from 'react'
+import { Fragment, FunctionComponent, useEffect, useState } from 'react'
 import { CatalogItemDto } from '../../swagger/data-contracts'
 import { PathVariant } from './buildPathVariants'
 import TextPath from 'react-leaflet-textpath'
@@ -6 +6 @@
 import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
 import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
 import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../Catalog/CatalogItemDetail'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../redux/store'
 
 // CatalogItemDto wrapper to keep track whether the item is active or not
 class DisplayableMapPoint {
@@ -17 +19 @@
 
 export interface MapPathProps {
     pathVariant: PathVariant // aka CatalogItemDto[]
-    active: boolean // whether this component is active
     idx: number // index of path in the list
-    primaryIdx: number // reference to index of path which has primary color
-    setPrimary: (idx: number) => void // callback to set the primary path
 }
 
 // Blue
@@ -29 +28 @@
 // Grey
 export const secondaryPathColor = '#878e9c'
 
-// Map path component 
-const MapPath: FunctionComponent<MapPathProps> = ({
-    pathVariant,
-    active,
-    primaryIdx,
-    idx,
-    setPrimary
-}) => {
+// 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))
     )
-    
+
+    // Set of all active paths
+    const activePaths = useSelector(
+        (state: RootState) => state.trackingTool.activePaths
+    )
+    // Index of the primary path
+    const primaryPathIdx = useSelector(
+        (state: RootState) => state.trackingTool.primaryPathIdx
+    )
+
+    // Whether the path is active or not
+    const [active, setActive] = useState(false)
+    useEffect(() => {
+        setActive(activePaths.has(idx))
+    }, [activePaths, idx])
 
     const getActiveMapPoints = () => mapPoints.filter((item) => item.active)
 
+    const dispatch = useDispatch()
+
     // Builds all edges of the path
     const buildEdges = () => {
         const activeMapPoints = getActiveMapPoints()
@@ -73 +82 @@
                     attributes={{
                         'font-size': 25,
                         // Set to primaryPathColor if primary index in the tracking tool is equal to this index
-                        fill: primaryIdx === idx ? primaryPathColor : secondaryPathColor,
+                        fill:
+                            primaryPathIdx === idx
+                                ? primaryPathColor
+                                : secondaryPathColor,
                     }}
                     onClick={() => {
-                        setPrimary(idx)
-                        console.log('hehehe')
-                    }
-                    }
+                        dispatch(setPrimaryIdx(idx))
+                    }}
                     repeat
                     center
                     weight={9}
@@ -111 +121 @@
                                 fontWeight="bold"
                                 fontSize={16}
                             >
-                                {formatHtmlStringToReactDom(mapPoint.catalogItem.name as string)}
+                                {formatHtmlStringToReactDom(
+                                    mapPoint.catalogItem.name as string
+                                )}
                             </Typography>
                             <FormControlLabel
                                 control={
@@ -126 +138 @@
                                 labelPlacement="end"
                                 label="Active"
                             />
-                            <CatalogItemDetailDialog itemId={mapPoint.catalogItem.id ?? ''} />
+                            <CatalogItemDetailDialog
+                                itemId={mapPoint.catalogItem.id ?? ''}
+                            />
                         </Stack>
                     </Fragment>
                 </Popup>
@@ -136 +150 @@
 
     return (
         <Fragment>
-            {active && <Fragment>
-                {buildVertices()}
-                {buildEdges()}
-                </Fragment>}
+            {active && (
+                <Fragment>
+                    {buildVertices()}
+                    {buildEdges()}
+                </Fragment>
+            )}
         </Fragment>
     )
 }
 
 export default MapPath
+function setPrimaryIdx(idx: number): any {
+    throw new Error('Function not implemented.')
+}