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