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;