feature/IO-3026-Enhanced-Notifications - Initial commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/pages/manage/manage.page.component.jsx

@@ -1,4 +1,4 @@
-import { FloatButton, Layout, Spin } from "antd";
+import { FloatButton, Layout, notification, Spin } from "antd";
 // import preval from "preval.macro";
 import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -21,11 +21,12 @@ import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-st
 import { requestForToken } from "../../firebase/firebase.utils";
 import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
-
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
 import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
+import { selectAlerts } from "../../redux/application/application.selectors.js";
+import { addAlerts } from "../../redux/application/application.actions.js";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
@@ -104,16 +105,125 @@ const { Content, Footer } = Layout;
 
 const mapStateToProps = createStructuredSelector({
   conflict: selectInstanceConflict,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  alerts: selectAlerts
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+// images.imex.online/alerts/alerts.json
+const ALERT_FILE_URL = "http://localhost:5000/alerts.json";
 
-export function Manage({ conflict, bodyshop }) {
+const mapDispatchToProps = (dispatch) => ({
+  setAlerts: (alerts) => dispatch(addAlerts(alerts))
+});
+
+export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
   const { socket, clientId } = useContext(SocketContext);
 
+  // State to track displayed alerts
+  const [displayedAlertIds, setDisplayedAlertIds] = useState([]);
+
+  // Fetch displayed alerts from localStorage on mount
+  useEffect(() => {
+    const displayedAlerts = JSON.parse(localStorage.getItem("displayedAlerts") || "[]");
+    setDisplayedAlertIds(displayedAlerts);
+  }, []);
+
+  // Fetch alerts from the JSON file and dispatch to Redux store
+  useEffect(() => {
+    const fetchAlerts = async () => {
+      try {
+        const response = await fetch(ALERT_FILE_URL);
+        const fetchedAlerts = await response.json();
+        setAlerts(fetchedAlerts);
+      } catch (error) {
+        console.error("Error fetching alerts:", error);
+      }
+    };
+
+    fetchAlerts();
+  }, []);
+
+  useEffect(() => {
+    console.log("Alerts in Manage component:", alerts);
+    if (alerts && Object.keys(alerts).length > 0) {
+      // Convert the alerts object into an array
+      const alertArray = Object.values(alerts);
+
+      // Filter out alerts that have already been displayed
+      const newAlerts = alertArray.filter((alert) => !displayedAlertIds.includes(alert.id));
+
+      console.log("New alerts to display:", newAlerts);
+
+      newAlerts.forEach((alert) => {
+        // Display the notification
+        notification.open({
+          key: "notification-alerts-" + alert.id,
+          message: alert.message,
+          description: alert.description,
+          type: alert.type || "info",
+          duration: 0,
+          placement: "bottomRight",
+          closable: true
+        });
+
+        // Update displayed alerts state and localStorage
+        setDisplayedAlertIds((prevIds) => {
+          const updatedIds = [...prevIds, alert.id];
+          localStorage.setItem("displayedAlerts", JSON.stringify(updatedIds));
+          return updatedIds;
+        });
+      });
+    }
+  }, [alerts]);
+
+  // useEffect(() => {
+  //   const fetchAlerts = async () => {
+  //     try {
+  //       const response = await fetch(ALERT_FILE_URL);
+  //
+  //       // Check if the response is OK (status in the range 200-299)
+  //       if (!response.ok) {
+  //         console.error(`Network response was not ok: ${response.status} ${response.statusText}`);
+  //         return; // Exit the function early since we can't proceed
+  //       }
+  //
+  //       const alerts = await response.json();
+  //
+  //       // Check if alerts is an array
+  //       if (!Array.isArray(alerts)) {
+  //         console.error("Alerts data is not an array");
+  //         return;
+  //       }
+  //
+  //       const displayedAlerts = JSON.parse(localStorage.getItem("displayedAlerts") || "[]");
+  //       const alertsNotDisplayed = alerts.filter((alert) => !displayedAlerts.includes(alert.id));
+  //
+  //       // Display notifications for alerts not yet displayed
+  //       alertsNotDisplayed.forEach((alert) => {
+  //         // Update localStorage immediately to prevent duplicate notifications
+  //         displayedAlerts.push(alert.id);
+  //         localStorage.setItem("displayedAlerts", JSON.stringify(displayedAlerts));
+  //
+  //         notification.open({
+  //           key: "notification-alerts-" + alert.id,
+  //           message: alert.message,
+  //           description: alert.description,
+  //           type: alert.type || "info",
+  //           duration: 0,
+  //           placement: "bottomRight",
+  //           closable: true
+  //         });
+  //       });
+  //     } catch (error) {
+  //       console.error("Error fetching alerts:", error);
+  //     }
+  //   };
+  //
+  //   fetchAlerts();
+  // }, []);
+
   useEffect(() => {
     const widgetId = InstanceRenderManager({
       imex: "IABVNO4scRKY11XBQkNr",