Implement users editing

1 files changed, 69 insertions, 0 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
new file mode 100644
index 00000000..28ead786
--- /dev/null
+++ b/modern/src/DevicesList.js
@@ -0,0 +1,69 @@
+import React, { Fragment } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+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 ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+import { devicesActions } from './store';
+import EditCollectionView from './EditCollectionView';
+import { useEffectAsync } from './reactHelper';
+
+const useStyles = makeStyles(() => ({
+  list: {
+    maxHeight: '100%',
+    overflow: 'auto',
+  },
+}));
+
+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) => (
+        <Fragment key={item.id}>
+          <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
+            <ListItemAvatar>
+              <Avatar>
+                <LocationOnIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={item.name} secondary={item.uniqueId} />
+            <ListItemSecondaryAction>
+              <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+                <MoreVertIcon />
+              </IconButton>
+            </ListItemSecondaryAction>
+          </ListItem>
+          {index < list.length - 1 ? <Divider /> : null}
+        </Fragment>
+      ))}
+    </List>
+  );
+}
+
+const DevicesList = () => {
+  return (
+    <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
+  );
+}
+
+export default DevicesList;