feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

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

@@ -24,7 +24,7 @@ const NotificationCenterComponent = ({
       scenarioTextLength: notification.scenarioText.length,
       read: notification.read,
       created_at: notification.created_at,
-      associationid: notification.associationid // Log associationid for debugging
+      associationid: notification.associationid
     });
     return (
       <List.Item
@@ -41,6 +41,7 @@ const NotificationCenterComponent = ({
               </ul>
             </Text>
             <Text type="secondary">{new Date(notification.created_at).toLocaleString()}</Text>
+            {notification.associationid && <Text type="secondary">Association ID: {notification.associationid}</Text>}
           </div>
         </Badge>
       </List.Item>

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useQuery, useMutation } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
@@ -29,6 +29,18 @@ export function NotificationCenterContainer({ visible, onClose }) {
     }
   });
 
+  useEffect(() => {
+    console.log(
+      "Notifications data updated:",
+      data?.notifications?.map((n) => ({
+        id: n.id,
+        read: n.read,
+        created_at: n.created_at,
+        associationid: n.associationid
+      }))
+    );
+  }, [data]);
+
   const [markAllReadMutation, { error: mutationError }] = useMutation(MARK_ALL_NOTIFICATIONS_READ, {
     update: (cache) => {
       cache.modify({
@@ -51,57 +63,53 @@ export function NotificationCenterContainer({ visible, onClose }) {
   // Remove refetchNotifications function and useEffect/context logic
   useEffect(() => {
     if (data?.notifications) {
-      const processedNotifications = data.notifications.map((notif) => {
-        let scenarioText;
-        let scenarioMeta;
-        try {
-          scenarioText =
-            typeof notif.scenario_text === "string" ? JSON.parse(notif.scenario_text) : notif.scenario_text || [];
-          scenarioMeta =
-            typeof notif.scenario_meta === "string" ? JSON.parse(notif.scenario_meta) : notif.scenario_meta || [];
-        } catch (e) {
-          console.error("Error parsing JSON for notification:", notif.id, e);
-          scenarioText = [notif.fcm_text || "Invalid notification data"];
-          scenarioMeta = [];
-        }
+      const processedNotifications = data.notifications
+        .map((notif) => {
+          let scenarioText;
+          let scenarioMeta;
+          try {
+            scenarioText =
+              typeof notif.scenario_text === "string" ? JSON.parse(notif.scenario_text) : notif.scenario_text || [];
+            scenarioMeta =
+              typeof notif.scenario_meta === "string" ? JSON.parse(notif.scenario_meta) : notif.scenario_meta || [];
+          } catch (e) {
+            console.error("Error parsing JSON for notification:", notif.id, e);
+            scenarioText = [notif.fcm_text || "Invalid notification data"];
+            scenarioMeta = [];
+          }
 
-        if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
-        if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];
+          if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
+          if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];
 
-        console.log("Processed notification:", {
-          id: notif.id,
-          scenarioText,
-          scenarioMeta,
-          read: notif.read,
-          created_at: notif.created_at,
-          raw: notif // Log raw data for debugging
-        });
-        return {
-          id: notif.id,
-          jobid: notif.jobid,
-          associationid: notif.associationid,
-          scenarioText,
-          scenarioMeta, // Add scenarioMeta for completeness (optional for rendering)
-          created_at: notif.created_at,
-          read: notif.read,
-          __typename: notif.__typename
-        };
-      });
+          console.log("Processed notification:", {
+            id: notif.id,
+            scenarioText,
+            scenarioMeta,
+            read: notif.read,
+            created_at: notif.created_at,
+            associationid: notif.associationid,
+            raw: notif
+          });
+          return {
+            id: notif.id,
+            jobid: notif.jobid,
+            associationid: notif.associationid,
+            scenarioText,
+            scenarioMeta,
+            created_at: notif.created_at,
+            read: notif.read,
+            __typename: notif.__typename
+          };
+        })
+        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); // Explicitly sort by created_at desc
 
-      console.log(
-        "Notifications data updated:",
-        data?.notifications?.map((n) => ({
-          id: n.id,
-          read: n.read,
-          created_at: n.created_at
-        }))
-      );
       console.log(
         "Processed Notifications:",
         processedNotifications.map((n) => ({
           id: n.id,
           read: n.read,
-          created_at: n.created_at
+          created_at: n.created_at,
+          associationid: n.associationid
         }))
       );
       console.log("Number of notifications to render:", processedNotifications.length);
@@ -137,7 +145,9 @@ export function NotificationCenterContainer({ visible, onClose }) {
   };
 
   const handleMarkAllRead = () => {
-    markAllReadMutation();
+    markAllReadMutation().catch((e) =>
+      console.error(`Something went wrong marking all notifications read: ${e?.message || ""}`)
+    );
   };
 
   useEffect(() => {