diff --git a/client/src/components/notification-center/notification-center.component.jsx b/client/src/components/notification-center/notification-center.component.jsx index b48e5c3f7..c7e6d4f58 100644 --- a/client/src/components/notification-center/notification-center.component.jsx +++ b/client/src/components/notification-center/notification-center.component.jsx @@ -11,7 +11,7 @@ const { Text, Title } = Typography; /** * Notification Center Component - * @type {React.ForwardRefExoticComponent & React.RefAttributes>} + * @type {React.ForwardRefExoticComponent & React.RefAttributes>} */ const NotificationCenterComponent = forwardRef( ( @@ -20,7 +20,6 @@ const NotificationCenterComponent = forwardRef( onClose, notifications, loading, - error, showUnreadOnly, toggleUnreadOnly, markAllRead, @@ -79,7 +78,7 @@ const NotificationCenterComponent = forwardRef(

{t("notifications.labels.notification-center")}

- {loading && !error && } + {loading && }
@@ -103,7 +102,6 @@ const NotificationCenterComponent = forwardRef(
- {error && onClose()} />} { 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 { - data, - fetchMore, - loading, - error: queryError, - refetch - } = useQuery(GET_NOTIFICATIONS, { + const { data, fetchMore, loading, 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}