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 'next-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 sx={{
35 height: 'auto',
36 '& .MuiDrawer-paper': {
37 width: isMobile ? '100%' : '375px',
38 maxWidth: '100%',
39 },
40 }}
41 >
42 <Box
43 bgcolor="background.default"
44 padding={2}
45 sx={{height: '100%', overflow: 'auto'}}
46 >
47 <DrawerHeader
48 onClose={onClose}
49 markAllRead={markAllRead}
50 disabled={isAllRead}
51 />
52 <Box>
53 {hasNotifications ? (
54 notifications.map(notification => (
55 <CardNotification
56 key={notification.id}
57 onClose={onClose}
58 notification={notification}
59 />
60 ))
61 ) : (
62 <Box
63 display="flex"
64 alignItems="center"
65 justifyContent="center"
66 paddingY={4}
67 >
68 <Icon>inbox</Icon>
69 <Typography color="initial" sx={{pl: 2}}>
70 {t`notifications.content`}
71 </Typography>
72 </Box>
73 )}
74 </Box>
75 </Box>
76 </Drawer>
77 );
78};
79
80export default DrawerContent;