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