IO-3166-Global-Notifications-Part-2 - Checkpoint

client/src/components/notification-center/notification-center.container.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"; // Add useRef
 import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
@@ -11,11 +11,21 @@ import day from "../../utils/day.js";
 // This will be used to poll for notifications when the socket is disconnected
 const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
 
-export function NotificationCenterContainer({ visible, onClose, bodyshop, unreadCount }) {
+/**
+ * Notification Center Container
+ * @param visible
+ * @param onClose
+ * @param bodyshop
+ * @param unreadCount
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }) => {
   const [showUnreadOnly, setShowUnreadOnly] = useState(false);
   const [notifications, setNotifications] = useState([]);
   const [error, setError] = useState(null);
   const { isConnected, markNotificationRead, markAllNotificationsRead } = useSocket();
+  const notificationRef = useRef(null); // Add ref for the notification center
 
   const userAssociationId = bodyshop?.associations?.[0]?.id;
 
@@ -50,6 +60,19 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop, unread
     }
   });
 
+  // Handle click outside to close
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (visible && notificationRef.current && !notificationRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [visible, onClose]);
+
   useEffect(() => {
     if (data?.notifications) {
       const processedNotifications = data.notifications
@@ -159,6 +182,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop, unread
 
   return (
     <NotificationCenterComponent
+      ref={notificationRef}
       visible={visible}
       onClose={onClose}
       notifications={notifications}
@@ -172,7 +196,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop, unread
       unreadCount={unreadCount}
     />
   );
-}
+};
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop