feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

client/src/components/header/header.component.jsx

@@ -27,7 +27,7 @@ import Icon, {
   UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Space } from "antd";
+import { Badge, Layout, Menu, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -47,6 +47,9 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 import { useState, useEffect } from "react";
 import { debounce } from "lodash";
+import { useQuery } from "@apollo/client";
+import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
+import { NotificationCenterContainer } from "../notification-center/notification-center.container.jsx";
 
 // Used to Determine if the Header is in Mobile Mode, and to toggle the multiple menus
 const HEADER_MOBILE_BREAKPOINT = 576;
@@ -132,6 +135,19 @@ function Header({
     setIsMobile(effectiveWidth <= HEADER_MOBILE_BREAKPOINT);
   }, 200);
 
+  const [notificationVisible, setNotificationVisible] = useState(false);
+
+  const { data: unreadData } = useQuery(GET_UNREAD_COUNT, {
+    fetchPolicy: "cache-and-network"
+  });
+
+  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count || 0;
+
+  const handleNotificationClick = (e) => {
+    setNotificationVisible(!notificationVisible);
+    if (handleMenuClick) handleMenuClick(e);
+  };
+
   useEffect(() => {
     window.addEventListener("resize", handleResize);
     window.addEventListener("orientationchange", handleResize);
@@ -652,8 +668,13 @@ function Header({
     // Right-aligned items on desktop, merged on mobile
     {
       key: "notifications",
-      icon: <BellFilled />,
-      id: "header-notifications"
+      icon: (
+        <Badge count={unreadCount} offset={[10, 0]}>
+          <BellFilled />
+        </Badge>
+      ),
+      id: "header-notifications",
+      onClick: handleNotificationClick
     },
     {
       key: "recent",
@@ -774,6 +795,7 @@ function Header({
               overflow: "visible"
             }}
           />
+          <NotificationCenterContainer visible={notificationVisible} onClose={() => setNotificationVisible(false)} />
         </div>
       )}
     </Layout.Header>