diff options
| -rw-r--r-- | modern/src/main/EventsDrawer.js | 12 |
1 files changed, 9 insertions, 3 deletions
diff --git a/modern/src/main/EventsDrawer.js b/modern/src/main/EventsDrawer.js index 69b7e1b8..46664f87 100644 --- a/modern/src/main/EventsDrawer.js +++ b/modern/src/main/EventsDrawer.js @@ -1,7 +1,8 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; import { - Drawer, IconButton, List, ListItem, ListItemText, Toolbar, Typography, + Drawer, IconButton, List, ListItemButton, ListItemText, Toolbar, Typography, } from '@mui/material'; import { makeStyles } from '@mui/styles'; import DeleteIcon from '@mui/icons-material/Delete'; @@ -24,6 +25,7 @@ const useStyles = makeStyles((theme) => ({ const EventsDrawer = ({ open, onClose }) => { const classes = useStyles(); + const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); @@ -54,12 +56,16 @@ const EventsDrawer = ({ open, onClose }) => { </Toolbar> <List className={classes.drawer} dense> {events.map((event) => ( - <ListItem key={event.id}> + <ListItemButton + key={event.id} + onClick={() => navigate(`/event/${event.id}`)} + disabled={!event.id} + > <ListItemText primary={`${devices[event.deviceId]?.name} • ${formatType(event)}`} secondary={formatTime(event.eventTime)} /> <IconButton size="small" onClick={() => dispatch(eventsActions.delete(event))}> <DeleteIcon fontSize="small" className={classes.negative} /> </IconButton> - </ListItem> + </ListItemButton> ))} </List> </Drawer> |