1 files changed, 19 insertions, 20 deletions

diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index d0d0853f..7521de80 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -1,16 +1,14 @@
 import React, { Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import makeStyles from '@mui/styles/makeStyles';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 
-import { devicesActions } from '../store';
-import EditCollectionView from '../settings/components/EditCollectionView';
+import { devicesActions, geofencesActions } from '../store';
+import CollectionActions from '../settings/components/CollectionActions';
+import { useCatchCallback } from '../reactHelper';
 
 const useStyles = makeStyles(() => ({
   list: {
@@ -24,23 +22,28 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const GeofenceView = ({ onMenuClick }) => {
+const GeofencesList = () => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
   const items = useSelector((state) => state.geofences.items);
 
+  const refreshGeofences = useCatchCallback(async () => {
+    const response = await fetch('/api/geofences');
+    if (response.ok) {
+      dispatch(geofencesActions.refresh(await response.json()));
+    } else {
+      throw Error(await response.text());
+    }
+  }, [dispatch]);
+
   return (
     <List className={classes.list}>
       {Object.values(items).map((item, index, list) => (
         <Fragment key={item.id}>
           <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item.id))}>
             <ListItemText primary={item.name} />
-            <ListItemSecondaryAction>
-              <IconButton size="small" onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
-                <MoreVertIcon />
-              </IconButton>
-            </ListItemSecondaryAction>
+            <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
           </ListItem>
           {index < list.length - 1 ? <Divider /> : null}
         </Fragment>
@@ -49,8 +52,4 @@ const GeofenceView = ({ onMenuClick }) => {
   );
 };
 
-const GeofencesList = () => (
-  <EditCollectionView content={GeofenceView} editPath="/settings/geofence" endpoint="geofences" disableAdd />
-);
-
 export default GeofencesList;