Implement geofence selection

2 files changed, 8 insertions, 6 deletions

diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index 5463d73a..d26eff09 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -5,7 +5,7 @@ import {
   Divider, List, ListItemButton, ListItemText,
 } from '@mui/material';
 
-import { devicesActions, geofencesActions } from '../store';
+import { geofencesActions } from '../store';
 import CollectionActions from '../settings/components/CollectionActions';
 import { useCatchCallback } from '../reactHelper';
 
@@ -21,7 +21,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const GeofencesList = () => {
+const GeofencesList = ({ onGeofenceSelected }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
@@ -40,7 +40,7 @@ const GeofencesList = () => {
     <List className={classes.list}>
       {Object.values(items).map((item, index, list) => (
         <Fragment key={item.id}>
-          <ListItemButton key={item.id} onClick={() => dispatch(devicesActions.select(item.id))}>
+          <ListItemButton key={item.id} onClick={() => onGeofenceSelected(item.id)}>
             <ListItemText primary={item.name} />
             <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
           </ListItemButton>
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 8af8a711..59dcdc4e 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
   Divider, Typography, IconButton, useMediaQuery, Toolbar,
@@ -62,6 +62,8 @@ const GeofencesPage = () => {
 
   const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
 
+  const [selectedGeofenceId, setSelectedGeofenceId] = useState();
+
   const handleFile = (event) => {
     const files = Array.from(event.target.files);
     const [file] = files;
@@ -117,11 +119,11 @@ const GeofencesPage = () => {
             </label>
           </Toolbar>
           <Divider />
-          <GeofencesList />
+          <GeofencesList onGeofenceSelected={setSelectedGeofenceId} />
         </Drawer>
         <div className={classes.mapContainer}>
           <MapView>
-            <MapGeofenceEdit />
+            <MapGeofenceEdit selectedGeofenceId={selectedGeofenceId} />
           </MapView>
           <MapCurrentLocation />
           <MapGeocoder />