feature/IO-3026-Enhanced-Notifications - final revisions

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

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

@@ -109,8 +109,10 @@ const mapStateToProps = createStructuredSelector({
   alerts: selectAlerts
 });
 
-// images.imex.online/alerts/alerts.json
-const ALERT_FILE_URL = "http://localhost:5000/alerts.json";
+const ALERT_FILE_URL = InstanceRenderManager({
+  imex: "https://images.imex.online/alerts/alerts-imex.json",
+  rome: "https://images.imex.online/alerts/alerts-rome.json"
+});
 
 const mapDispatchToProps = (dispatch) => ({
   setAlerts: (alerts) => dispatch(addAlerts(alerts))
@@ -145,17 +147,15 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
     fetchAlerts();
   }, []);
 
+  // Use useEffect to watch for new alerts
   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
+      // Filter out alerts that have already been dismissed
       const newAlerts = alertArray.filter((alert) => !displayedAlertIds.includes(alert.id));
 
-      console.log("New alerts to display:", newAlerts);
-
       newAlerts.forEach((alert) => {
         // Display the notification
         notification.open({
@@ -165,18 +165,19 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
           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;
+          closable: true,
+          onClose: () => {
+            // When the notification is closed, update displayed alerts state and localStorage
+            setDisplayedAlertIds((prevIds) => {
+              const updatedIds = [...prevIds, alert.id];
+              localStorage.setItem("displayedAlerts", JSON.stringify(updatedIds));
+              return updatedIds;
+            });
+          }
         });
       });
     }
-  }, [alerts]);
+  }, [alerts, displayedAlertIds]);
 
   // useEffect(() => {
   //   const fetchAlerts = async () => {

client/src/redux/application/application.actions.js

@@ -68,11 +68,6 @@ export const setUpdateAvailable = (isUpdateAvailable) => ({
   payload: isUpdateAvailable
 });
 
-export const setAlerts = (alerts) => ({
-  type: ApplicationActionTypes.SET_ALERTS,
-  payload: alerts
-});
-
 export const addAlerts = (alerts) => ({
   type: ApplicationActionTypes.ADD_ALERTS,
   payload: alerts

client/src/redux/application/application.reducer.js

@@ -92,19 +92,11 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
     case ApplicationActionTypes.SET_WSS_STATUS: {
       return { ...state, wssStatus: action.payload };
     }
-    case ApplicationActionTypes.SET_ALERTS: {
-      const alertsMap = {};
-      action.payload.forEach((alert) => {
-        alertsMap[alert.id] = alert;
-      });
-      return {
-        ...state,
-        alerts: alertsMap
-      };
-    }
+
     case ApplicationActionTypes.ADD_ALERTS: {
       const newAlertsMap = { ...state.alerts };
-      action.payload.forEach((alert) => {
+
+      action.payload.alerts.forEach((alert) => {
         newAlertsMap[alert.id] = alert;
       });
       return {

client/src/redux/application/application.types.js

@@ -14,7 +14,6 @@ const ApplicationActionTypes = {
   SET_PROBLEM_JOBS: "SET_PROBLEM_JOBS",
   SET_UPDATE_AVAILABLE: "SET_UPDATE_AVAILABLE",
   SET_WSS_STATUS: "SET_WSS_STATUS",
-  SET_ALERTS: "SET_ALERTS",
   ADD_ALERTS: "ADD_ALERTS"
 };
 export default ApplicationActionTypes;