97 lines
3.3 KiB
JavaScript
97 lines
3.3 KiB
JavaScript
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}`,
|
|
title: 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]);
|
|
}
|