Handle list refresh

5 files changed, 19 insertions, 7 deletions

diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index b7c15dc..c9abce3 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -14,6 +14,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
+import { useEffectAsync } from './reactHelper';
 
 const useStyles = makeStyles(() => ({
   list: {
@@ -22,12 +23,19 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const DeviceView = ({ onMenuClick }) => {
+const DeviceView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
   const items = useSelector(state => Object.values(state.devices.items));
 
+  useEffectAsync(async () => {
+    const response = await fetch('/api/devices');
+    if (response.ok) {
+      dispatch(devicesActions.refresh(await response.json()));
+    }
+  }, [updateTimestamp]);
+
   return (
     <List className={classes.list}>
       {items.map((item, index, list) => (
diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js
index 59ea2db..bec1056 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/EditCollectionView.js
@@ -24,6 +24,7 @@ const EditCollectionView = ({ content, editPath, endpoint }) => {
   const [selectedId, setSelectedId] = useState(null);
   const [selectedAnchorEl, setSelectedAnchorEl] = useState(null);
   const [removeDialogShown, setRemoveDialogShown] = useState(false);
+  const [updateTimestamp, setUpdateTimestamp] = useState(Date.now());
 
   const menuShow = (anchorId, itemId) => {
     setSelectedAnchorEl(anchorId);
@@ -51,13 +52,14 @@ const EditCollectionView = ({ content, editPath, endpoint }) => {
 
   const handleRemoveResult = () => {
     setRemoveDialogShown(false);
+    setUpdateTimestamp(Date.now());
   }
 
   const Content = content;
 
   return (
     <>
-      <Content onMenuClick={menuShow} />
+      <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} />
       <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}>
         <AddIcon />
       </Fab>
diff --git a/modern/src/RemoveDialog.js b/modern/src/RemoveDialog.js
index 57be787..a810735 100644
--- a/modern/src/RemoveDialog.js
+++ b/modern/src/RemoveDialog.js
@@ -8,7 +8,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 
 const RemoveDialog = ({ open, endpoint, itemId, onResult }) => {
   const handleRemove = async () => {
-    const response = fetch(`/api/${endpoint}/${itemId}`, { method: 'DELETE' })
+    const response = await fetch(`/api/${endpoint}/${itemId}`, { method: 'DELETE' })
     if (response.ok) {
       onResult(true);
     }
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 3d9748b..73df6d0 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -60,15 +60,13 @@ const SocketController = () => {
     if (authenticated) {
       const response = await fetch('/api/devices');
       if (response.ok) {
-        const devices = await response.json();
-        dispatch(devicesActions.update(devices));
+        dispatch(devicesActions.refresh(await response.json()));
       }
       connectSocket();
     } else {
       const response = await fetch('/api/session');
       if (response.ok) {
-        const user = await response.json();
-        dispatch(sessionActions.updateUser(user));
+        dispatch(sessionActions.updateUser(await response.json()));
       } else {
         history.push('/login');
       }
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index 3d7be3e..66c1607 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -7,6 +7,10 @@ const { reducer, actions } = createSlice({
     selectedId: null
   },
   reducers: {
+    refresh(state, action) {
+      state.items = {};
+      action.payload.forEach(item => state.items[item['id']] = item);
+    },
     update(state, action) {
       action.payload.forEach(item => state.items[item['id']] = item);
     },