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