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 { formatNotificationTitle, formatTime } from '../common/util/formatter'; import { useTranslation } from '../common/components/LocalizationProvider'; import { eventsActions } from '../store'; const useStyles = makeStyles((theme) => ({ drawer: { width: theme.dimensions.eventsDrawerWidth, }, toolbar: { paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), }, title: { flexGrow: 1, }, })); const EventsDrawer = ({ open, onClose }) => { const classes = useStyles(); const dispatch = useDispatch(); const t = useTranslation(); const devices = useSelector((state) => state.devices.items); const events = useSelector((state) => state.events.items); const formatType = (event) => formatNotificationTitle(t, { type: event.type, attributes: { alarms: event.attributes.alarm, }, }); return ( {t('reportEvents')} dispatch(eventsActions.deleteAll())}> {events.map((event) => ( dispatch(eventsActions.delete(event))}> ))} ); }; export default EventsDrawer;