Add simple events drawer

1 files changed, 55 insertions, 0 deletions

diff --git a/modern/src/main/EventsDrawer.js b/modern/src/main/EventsDrawer.js
new file mode 100644
index 00000000..91d6e3db
--- /dev/null
+++ b/modern/src/main/EventsDrawer.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Drawer, IconButton, List, ListItem, ListItemText, Toolbar, Typography,
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import { eventsActions } from '../store';
+
+const useStyles = makeStyles((theme) => ({
+  drawer: {
+    width: theme.dimensions.eventsDrawerWidth,
+  },
+  header: {
+    flexGrow: 1,
+  },
+}));
+
+const EventsDrawer = ({ open, onClose }) => {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const t = useTranslation();
+
+  const events = useSelector((state) => state.events.items);
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+    >
+      <Toolbar>
+        <Typography variant="h6" className={classes.header}>
+          {t('reportEvents')}
+        </Typography>
+        <IconButton color="inherit" edge="end" onClick={() => dispatch(eventsActions.deleteAll())}>
+          <DeleteIcon />
+        </IconButton>
+      </Toolbar>
+      <List className={classes.drawer} dense>
+        {events.map((event) => (
+          <ListItem key={event.id}>
+            <ListItemText primary={event.attributes.message} />
+            <IconButton size="small" onClick={() => dispatch(eventsActions.delete(event))}>
+              <DeleteIcon fontSize="small" className={classes.negative} />
+            </IconButton>
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export default EventsDrawer;