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;