Implement device removal

4 files changed, 48 insertions, 23 deletions

diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index b047826f..5e09041a 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -34,6 +34,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const DeviceList = () => {
+  const [menuDeviceId, setMenuDeviceId] = useState(null);
   const [menuAnchorEl, setMenuAnchorEl] = useState(null);
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const devices = useSelector(state => Object.values(state.devices.items));
@@ -41,7 +42,8 @@ const DeviceList = () => {
   const classes = useStyles();
   const history = useHistory();
 
-  const handleMenuClick = (event) => {
+  const handleMenuClick = (event, deviceId) => {
+    setMenuDeviceId(deviceId);
     setMenuAnchorEl(event.currentTarget);
   }
 
@@ -50,7 +52,7 @@ const DeviceList = () => {
   }
 
   const handleMenuEdit = () => {
-    history.push('/device');
+    history.push(`/device/${menuDeviceId}`);
     handleMenuClose();
   }
 
@@ -59,6 +61,18 @@ const DeviceList = () => {
     handleMenuClose();
   }
 
+  const handleAdd = () => {
+    history.push('/device');
+    handleMenuClose();
+  }
+
+  const handleRemoveResult = (removed) => {
+    setRemoveDialogOpen(false);
+    if (removed) {
+      dispatch(devicesActions.remove(menuDeviceId));
+    }
+  }
+
   return (
     <>
       <List className={classes.list}>
@@ -72,27 +86,25 @@ const DeviceList = () => {
               </ListItemAvatar>
               <ListItemText primary={device.name} secondary={device.uniqueId} />
               <ListItemSecondaryAction>
-                <IconButton onClick={handleMenuClick}>
+                <IconButton onClick={(event) => handleMenuClick(event, device.id)}>
                   <MoreVertIcon />
                 </IconButton>
               </ListItemSecondaryAction>
             </ListItem>
             {index < list.length - 1 ? <Divider /> : null}
           </Fragment>
-        ))
-        }
+        ))}
       </List>
-      <Fab size="medium" color="primary" className={classes.fab}>
+      <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}>
         <AddIcon />
       </Fab>
       <Menu id="device-menu" anchorEl={menuAnchorEl} keepMounted open={Boolean(menuAnchorEl)} onClose={handleMenuClose}>
         <MenuItem onClick={handleMenuEdit}>{t('sharedEdit')}</MenuItem>
         <MenuItem onClick={handleMenuRemove}>{t('sharedRemove')}</MenuItem>
       </Menu>
-      <RemoveDialog open={removeDialogOpen} onClose={() => { setRemoveDialogOpen(false) }} />
+      <RemoveDialog deviceId={menuDeviceId} open={removeDialogOpen} onResult={handleRemoveResult} />
     </>
   );
 }
 
 export default DeviceList;
-
diff --git a/modern/src/RemoveDialog.js b/modern/src/RemoveDialog.js
index 14952e64..bca936f4 100644
--- a/modern/src/RemoveDialog.js
+++ b/modern/src/RemoveDialog.js
@@ -7,18 +7,28 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 
 const RemoveDialog = (props) => {
+  const handleRemove = () => {
+    fetch(`/api/devices/${props.deviceId}`, { method: 'DELETE' }).then(response => {
+      if (response.ok) {
+        props.onResult(true);
+      }
+    });
+  }
+
   return (
-    <Dialog
-      open={props.open}
-      onClose={() => { props.onClose() }}>
-      <DialogContent>
-        <DialogContentText>{t('sharedRemoveConfirm')}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button color="primary">{t('sharedRemove')}</Button>
-        <Button color="primary" autoFocus>{t('sharedCancel')}</Button>
-      </DialogActions>
-    </Dialog>
+    <>
+      <Dialog
+        open={props.open}
+        onClose={() => { props.onResult(false) }}>
+        <DialogContent>
+          <DialogContentText>{t('sharedRemoveConfirm')}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button color="primary" onClick={handleRemove}>{t('sharedRemove')}</Button>
+          <Button autoFocus onClick={() => props.onResult(false)}>{t('sharedCancel')}</Button>
+        </DialogActions>
+      </Dialog>
+    </>
   );
 };
 
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 6de3369a..13ff0a9d 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -20,7 +20,7 @@ const displayNotifications = events => {
   }
 };
 
-const SocketController = (props) => {
+const SocketController = () => {
   const dispatch = useDispatch();
 
   const connectSocket = () => {
@@ -34,10 +34,10 @@ const SocketController = (props) => {
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data.devices) {
-        props.dispatch(devicesActions.update(data.devices));
+        dispatch(devicesActions.update(data.devices));
       }
       if (data.positions) {
-        props.dispatch(positionsActions.update(data.positions));
+        dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
         displayNotifications(data.events);
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index 0d96e98d..3d7be3e6 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -12,7 +12,10 @@ const { reducer, actions } = createSlice({
     },
     select(state, action) {
       state.selectedId = action.payload.id;
-    }
+    },
+    remove(state, action) {
+      delete state.items[action.payload];
+    },
   }
 });