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

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

@@ -11,7 +11,7 @@ const { Text, Title } = Typography;
 
 /**
  * Notification Center Component
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly error?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
  */
 const NotificationCenterComponent = forwardRef(
   (
@@ -20,7 +20,6 @@ const NotificationCenterComponent = forwardRef(
       onClose,
       notifications,
       loading,
-      error,
       showUnreadOnly,
       toggleUnreadOnly,
       markAllRead,
@@ -79,7 +78,7 @@ const NotificationCenterComponent = forwardRef(
         <div className="notification-header">
           <Space direction="horizontal">
             <h3>{t("notifications.labels.notification-center")}</h3>
-            {loading && !error && <Spin spinning={loading} size="small"></Spin>}
+            {loading && <Spin spinning={loading} size="small"></Spin>}
           </Space>
           <div className="notification-controls">
             <Tooltip title={t("notifications.labels.show-unread-only")}>
@@ -103,7 +102,6 @@ const NotificationCenterComponent = forwardRef(
             </Tooltip>
           </div>
         </div>
-        {error && <Alert message={error} type="error" closable onClose={() => onClose()} />}
         <Virtuoso
           style={{ height: "400px", width: "100%" }}
           data={notifications}

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

@@ -23,7 +23,6 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
 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
 
@@ -37,13 +36,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
     return showUnreadOnly ? { ...baseWhereClause, read: { _is_null: true } } : baseWhereClause;
   }, [baseWhereClause, showUnreadOnly]);
 
-  const {
+  const { data, fetchMore, loading, refetch } = useQuery(GET_NOTIFICATIONS, {
-    data,
-    fetchMore,
-    loading,
-    error: queryError,
-    refetch
-  } = useQuery(GET_NOTIFICATIONS, {
     variables: {
       limit: INITIAL_NOTIFICATIONS,
       offset: 0,
@@ -54,7 +47,6 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
     pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
     skip: !userAssociationId,
     onError: (err) => {
-      setError(err.message);
       console.error(`Error polling Notifications in notification-center: ${err?.message || ""}`);
       setTimeout(() => refetch(), day.duration(2, "seconds").asMilliseconds());
     }
@@ -63,6 +55,11 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
   // Handle click outside to close
   useEffect(() => {
     const handleClickOutside = (event) => {
+      // Prevent open + close behavior from the header
+      if (event.target.closest("#header-notifications")) {
+        return;
+      }
+
       if (visible && notificationRef.current && !notificationRef.current.contains(event.target)) {
         onClose();
       }
@@ -104,16 +101,9 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
         })
         .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
       setNotifications(processedNotifications);
-      setError(null);
     }
   }, [data]);
 
-  useEffect(() => {
-    if (queryError) {
-      setError(queryError.message);
-    }
-  }, [queryError]);
-
   const loadMore = useCallback(() => {
     if (!loading && data?.notifications.length) {
       fetchMore({
@@ -125,7 +115,6 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
           };
         }
       }).catch((err) => {
-        setError(err.message);
         console.error("Fetch more error:", err);
       });
     }
@@ -187,7 +176,6 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
       onClose={onClose}
       notifications={notifications}
       loading={loading}
-      error={error}
       showUnreadOnly={showUnreadOnly}
       toggleUnreadOnly={handleToggleUnreadOnly}
       markAllRead={handleMarkAllRead}