1import Icon from '@mui/material/Icon';
 2import IconButton from '@mui/material/IconButton';
 3import React, {useState} from 'react';
 4import {useUserNotificationsQuery} from '../../generated/graphql';
 5import Badge from '@mui/material/Badge';
 6import DrawerContent from './DrawerContent';
 7
 8const DrawerNotification = () => {
 9  const POLL_INTERVAL = 30000;
10  const {data} = useUserNotificationsQuery({
11    pollInterval: POLL_INTERVAL,
12  });
13  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
14
15  const notifications = data?.me?.profile?.notifications?.data || [];
16
17  const hasUnreadNotifications = notifications.some(
18    notification => !notification.attributes.read
19  );
20
21  return (
22    <>
23      <IconButton
24        sx={{marginRight: 0}}
25        color="inherit"
26        edge="end"
27        id="NotificationBtn"
28        aria-label="notifications"
29        onClick={() => setIsDrawerOpen(true)}
30      >
31        {hasUnreadNotifications ? (
32          <Badge color="error" variant="dot">
33            <Icon>notifications_none_outlined</Icon>
34          </Badge>
35        ) : (
36          <Icon>notifications_none_outlined</Icon>
37        )}
38      </IconButton>
39
40      <DrawerContent
41        isOpen={isDrawerOpen}
42        onClose={() => setIsDrawerOpen(false)}
43      />
44    </>
45  );
46};
47
48export default DrawerNotification;