diff --git a/client/src/components/notification-center/notification-center.component.jsx b/client/src/components/notification-center/notification-center.component.jsx index 1c91717f7..df2b5feb3 100644 --- a/client/src/components/notification-center/notification-center.component.jsx +++ b/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 ( {new Date(notification.created_at).toLocaleString()} + {notification.associationid && Association ID: {notification.associationid}} diff --git a/client/src/components/notification-center/notification-center.container.jsx b/client/src/components/notification-center/notification-center.container.jsx index 2085fc6c5..6930765de 100644 --- a/client/src/components/notification-center/notification-center.container.jsx +++ b/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(() => {