feature/IO-3096-GlobalNotifications - Checkpoint - clicking an individual notification will mark it read

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

@@ -17,7 +17,8 @@ const NotificationCenterComponent = ({
   showUnreadOnly,
   toggleUnreadOnly,
   markAllRead,
-  loadMore
+  loadMore,
+  onNotificationClick
 }) => {
   const { t } = useTranslation();
 
@@ -26,10 +27,10 @@ const NotificationCenterComponent = ({
       <List.Item
         key={`${notification.id}-${index}`}
         className={notification.read ? "notification-read" : "notification-unread"}
+        onClick={() => !notification.read && onNotificationClick(notification.id)}
       >
         <Badge dot={!notification.read}>
           <div>
-            {/* RO number as title/link */}
             <Title
               level={5}
               style={{
@@ -39,7 +40,14 @@ const NotificationCenterComponent = ({
                 alignItems: "center"
               }}
             >
-              <Link to={`/manage/jobs/${notification.jobid}`} target="_blank">
+              <Link
+                to={`/manage/jobs/${notification.jobid}`}
+                target="_blank"
+                onClick={(e) => {
+                  e.stopPropagation(); // Prevent List.Item click handler from firing
+                  !notification.read && onNotificationClick(notification.id); // Mark as read when link clicked
+                }}
+              >
                 RO #{notification.roNumber}
               </Link>
               <Text type="secondary">{new Date(notification.created_at).toLocaleString()}</Text>
@@ -75,7 +83,6 @@ const NotificationCenterComponent = ({
         style={{ height: "400px", width: "100%" }}
         data={notifications}
         totalCount={notifications.length}
-        overscan={200}
         endReached={loadMore}
         itemContent={renderNotification}
       />