feature/IO-3096-GlobalNotifications - Code Review Part 1

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

@@ -18,7 +18,8 @@ const NotificationCenterComponent = ({
   toggleUnreadOnly,
   markAllRead,
   loadMore,
-  onNotificationClick
+  onNotificationClick,
+  unreadCount
 }) => {
   const { t } = useTranslation();
 
@@ -61,8 +62,6 @@ const NotificationCenterComponent = ({
     );
   };
 
-  const hasUnread = notifications.some((n) => !n.read);
-
   return (
     <div className={`notification-center ${visible ? "visible" : ""}`}>
       <div className="notification-header">
@@ -82,9 +81,9 @@ const NotificationCenterComponent = ({
           <Tooltip title={t("notifications.labels.mark-all-read")}>
             <Button
               type="link"
-              icon={hasUnread ? <CheckCircleFilled /> : <CheckCircleOutlined />}
+              icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
               onClick={markAllRead}
-              disabled={!hasUnread}
+              disabled={!unreadCount}
             />
           </Tooltip>
         </div>

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

@@ -3,7 +3,7 @@ import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
-import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import day from "../../utils/day.js";
@@ -11,7 +11,7 @@ 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 }) {
+export function NotificationCenterContainer({ visible, onClose, bodyshop, unreadCount }) {
   const [showUnreadOnly, setShowUnreadOnly] = useState(false);
   const [notifications, setNotifications] = useState([]);
   const [error, setError] = useState(null);
@@ -169,6 +169,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
       markAllRead={handleMarkAllRead}
       loadMore={loadMore}
       onNotificationClick={handleNotificationClick}
+      unreadCount={unreadCount}
     />
   );
 }