1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
Button, 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>
<Button color="inherit" onClick={() => dispatch(eventsActions.deleteAll())}>
{t('reportClear')}
</Button>
</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;
|
