frontend/containers/DrawerNotification/DrawerContent.tsx (view raw)
1import {Drawer, Box, Icon, Typography} from '@mui/material/';
2import useMediaQuery from '@mui/material/useMediaQuery';
3import {
4 useReadNotificationsMutation,
5 NotificationEntity,
6} from '../../generated/graphql';
7import CardNotification from './CardNotification';
8import DrawerHeader from './DrawerHeader';
9import {useTranslation} from 'react-i18next';
10
11interface Props {
12 isOpen: boolean;
13 onClose: () => void;
14 notifications: NotificationEntity[];
15}
16
17const DrawerContent = ({isOpen, onClose, notifications}: Props) => {
18 const isMobile = useMediaQuery('(max-width:400px)');
19 const {t} = useTranslation();
20 const hasNotifications = notifications.length > 0;
21 const [readNotifications] = useReadNotificationsMutation();
22 const isAllRead = notifications.every(
23 notification => notification.attributes.read
24 );
25
26 const markAllRead = () =>
27 readNotifications({refetchQueries: ['UserNotifications']});
28
29 return (
30 <Drawer
31 anchor="right"
32 open={isOpen}
33 onClose={onClose}
34 hideBackdrop={true}
35 sx={{
36 height: 'auto',
37 '& .MuiDrawer-paper': {
38 width: isMobile ? '100%' : '375px',
39 maxWidth: '100%',
40 },
41 }}
42 >
43 <Box
44 bgcolor="background.default"
45 padding={2}
46 sx={{height: '100%', overflow: 'auto'}}
47 >
48 <DrawerHeader
49 onClose={onClose}
50 markAllRead={markAllRead}
51 disabled={isAllRead}
52 />
53 <Box>
54 {hasNotifications ? (
55 notifications.map(notification => (
56 <CardNotification
57 key={notification.id}
58 onClose={onClose}
59 notification={notification}
60 />
61 ))
62 ) : (
63 <Box
64 display="flex"
65 alignItems="center"
66 justifyContent="center"
67 paddingY={4}
68 >
69 <Icon>inbox</Icon>
70 <Typography color="initial" sx={{pl: 2}}>
71 {t`notifications.content`}
72 </Typography>
73 </Box>
74 )}
75 </Box>
76 </Box>
77 </Drawer>
78 );
79};
80
81export default DrawerContent;