Revize 8c57f958

refactor to use Redux instead of localstate

re #9629

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -1 @@
-import { Card, CardContent, Grid, Stack, Typography } from '@mui/material'
+import {
+    Button,
+    Card,
+    CardContent,
+    Grid,
+    Stack,
+    Typography,
+} from '@mui/material'
 import { Fragment, useEffect, useState } from 'react'
-import { MapContainer, TileLayer } from 'react-leaflet'
+import { MapContainer, TileLayer, useMap } from 'react-leaflet'
 import mapConfig from '../../config/mapConfig'
 import TextPath from 'react-leaflet-textpath'
 import PlaintextUpload from './PlaintextUpload'
@@ -9 +16 @@
 import DeleteIcon from '@mui/icons-material/Delete'
 import { PathDto } from '../../swagger/data-contracts'
 import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
-import buildPathVariants, { PathVariant } from './buildPathVariants'
 import MapPath from './MapPath'
+import EditIcon from '@mui/icons-material/Edit'
+import { useSelector } from 'react-redux'
+import { RootState } from '../redux/store'
 
 // Page with tracking tool
 const TrackingTool = () => {
     // Path response from the API
-    const [pathDto, setPathDto] = useState<PathDto | undefined>(undefined)
+    const pathDto = useSelector((state: RootState) => state.trackingTool.pathDto)
+    const pathVariants = useSelector((state: RootState) => state.trackingTool.pathVariants)
+    const mapCenter = useSelector((state: RootState) => state.trackingTool.mapCenter)
 
-    // Whether the path variants are building
-    const [buildingPathVariants, setBuildingPathVariants] =
-        useState<boolean>(false)
+    // const map = useMap()
 
-    // List of all computed path variants
-    const [pathVariants, setPathVariants] = useState<PathVariant[] | undefined>(
-        undefined
-    )
-
-    // latitude longitude pair of where the map is to be centered
-    const [mapCenter, setMapCenter] = useState<number[]>([
-        mapConfig.defaultCoordinates[0],
-        mapConfig.defaultCoordinates[1],
-    ])
-
-    const [primaryPathIdx, setActivePathIdx] = useState(0)
-
-    // TODO make some sort of selection list to select active paths?
-    const [activePaths, setActivePaths] = useState<Set<number>>(new Set())
+    // // Set the map center
+    // useEffect(() => {
+    //     map.flyTo(mapCenter, mapConfig.defaultZoom)
+    // }, [map, mapCenter])
 
-    // Returns tuple of average latitude and longitude
-    const calculateMapCenter = (pathVariant: PathVariant) => [
-        pathVariant
-            .map((item) => item.latitude ?? 0)
-            .reduce((a, b) => a + b, 0) / pathVariant.length,
-        pathVariant
-            .map((item) => item.longitude ?? 0)
-            .reduce((a, b) => a + b, 0) / pathVariant.length,
-    ]
-
-    useEffect(() => {
-        if (!pathVariants || pathVariants.length === 0) {
-            return
-        }
-        // TODO calculate only for path that has some non-null coordinates
-        setMapCenter(calculateMapCenter(pathVariants[0]))
-    }, [pathVariants])
-
-    useEffect(() => {
-        if (!pathDto) {
-            return
-        }
-
-        setBuildingPathVariants(true)
-        buildPathVariants(pathDto).then((pathVariants) => {
-            setActivePaths(new Set(pathVariants.map((_, idx) => idx)))
-            setPathVariants(pathVariants)
-            setBuildingPathVariants(false)
-        })
-    }, [pathDto])
 
     return (
         <Fragment>
@@ -92 +60 @@
                                     )}
                                 </Typography>
                             </Stack>
+                            <Stack justifyItems="flex-end" alignSelf="flex-end" alignItems="flex-end">
+                                <Button size="small" variant="outlined" startIcon={<EditIcon />}>Edit</Button>
+                            </Stack>
                         </CardContent>
                     </Card>
                 </Fragment>
@@ -123 +94 @@
                         >
                             {pathDto ? 'Update path' : 'Show Path'}
                         </Typography>
-                        <PlaintextUpload setPaths={setPathDto} />
+                        <PlaintextUpload />
                         <FileUpload />
                     </Stack>
                 </Grid>
@@ -153 +124 @@
                                     key={idx}
                                     pathVariant={pathVariant}
                                     idx={idx}
-                                    setPrimary={setActivePathIdx}
-                                    primaryIdx={primaryPathIdx}
-                                    active={activePaths.has(idx)}
                                 />
                             ))}
                     </MapContainer>