feature/IO-3255-simplified-parts-management - centralize alerts

client/src/hooks/useAlertsNotifications.jsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import * as Sentry from "@sentry/react";
+import { useNotification } from "../contexts/Notifications/notificationContext.jsx";
+import { addAlerts } from "../redux/application/application.actions.js";
+import { selectAlerts } from "../redux/application/application.selectors.js";
+import InstanceRenderManager from "../utils/instanceRenderMgr.js";
+
+const DEFAULT_ALERT_FILE_URL = InstanceRenderManager({
+  imex: "https://images.imex.online/alerts/alerts-imex.json",
+  rome: "https://images.imex.online/alerts/alerts-rome.json"
+});
+
+/**
+ * useAlertsNotifications
+ * - Fetches alerts JSON and stores it in Redux
+ * - Shows notifications for new alerts (deduped via localStorage)
+ * - Persists dismissed alert IDs under a stable key (default: "displayedAlerts")
+ */
+export default function useAlertsNotifications({
+  storageKey = "displayedAlerts",
+  alertFileUrl = DEFAULT_ALERT_FILE_URL
+} = {}) {
+  const dispatch = useDispatch();
+  const alerts = useSelector(selectAlerts);
+  const notification = useNotification();
+
+  // Track which alerts have been shown/dismissed
+  const [displayedAlertIds, setDisplayedAlertIds] = useState([]);
+
+  // Load displayed alert IDs from localStorage on mount
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(storageKey) || "[]";
+      const parsed = JSON.parse(raw);
+      setDisplayedAlertIds(Array.isArray(parsed) ? parsed : []);
+    } catch {
+      setDisplayedAlertIds([]);
+    }
+  }, [storageKey]);
+
+  // Fetch alerts from the remote JSON and dispatch to Redux
+  useEffect(() => {
+    let aborted = false;
+
+    async function fetchAlerts() {
+      try {
+        const response = await fetch(alertFileUrl, { cache: "no-store" });
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const fetchedAlerts = await response.json();
+        if (!aborted) dispatch(addAlerts(fetchedAlerts));
+      } catch (error) {
+        Sentry.captureException(error, {
+          tags: { scope: "useAlertsNotifications", phase: "fetch-alerts" }
+        });
+      }
+    }
+
+    fetchAlerts();
+    return () => {
+      aborted = true;
+    };
+  }, [alertFileUrl, dispatch]);
+
+  // Show notifications for any alerts that haven't been dismissed yet
+  useEffect(() => {
+    if (!alerts || Object.keys(alerts).length === 0) return;
+
+    const alertArray = Object.values(alerts).filter(Boolean);
+    const newAlerts = alertArray.filter((a) => !displayedAlertIds.includes(a.id));
+
+    newAlerts.forEach((alert) => {
+      notification.open({
+        key: `notification-alerts-${alert.id}`,
+        message: alert.message,
+        description: alert.description,
+        type: alert.type || "info",
+        duration: 0,
+        closable: true,
+        onClose: () => {
+          setDisplayedAlertIds((prev) => {
+            const next = prev.includes(alert.id) ? prev : [...prev, alert.id];
+            try {
+              localStorage.setItem(storageKey, JSON.stringify(next));
+            } catch (e) {
+              Sentry.captureException(e, {
+                tags: { scope: "useAlertsNotifications", phase: "persist-dismissed" }
+              });
+            }
+            return next;
+          });
+        }
+      });
+    });
+  }, [alerts, displayedAlertIds, notification, storageKey]);
+}