fix(App.tsx): refactor the usage of useAlertStore to use the new removeFromTempNotificationList and tempNotificationList variables

fix(newChatView/index.tsx): remove console.log statement
fix(alertStore.ts): remove unused imports and refactor the usage of setErrorData, setNoticeData, and setSuccessData to update both notificationList and tempNotificationList
fix(types/zustand/alert/index.ts): add tempNotificationList variable and corresponding functions to clear and remove items from it

src/frontend/src/App.tsx

@@ -1,4 +1,3 @@
-import _ from "lodash";
 import { useContext, useEffect, useState } from "react";
 import "reactflow/dist/style.css";
 import "./App.css";
@@ -23,100 +22,17 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
-  const errorData = useAlertStore((state) => state.errorData);
+  const removeFromTempNotificationList = useAlertStore(
-  const errorOpen = useAlertStore((state) => state.errorOpen);
+    (state) => state.removeFromTempNotificationList
-  const setErrorOpen = useAlertStore((state) => state.setErrorOpen);
+  );
-  const noticeData = useAlertStore((state) => state.noticeData);
+  const tempNotificationList = useAlertStore(
-  const noticeOpen = useAlertStore((state) => state.noticeOpen);
+    (state) => state.tempNotificationList
-  const setNoticeOpen = useAlertStore((state) => state.setNoticeOpen);
+  );
-  const successData = useAlertStore((state) => state.successData);
-  const successOpen = useAlertStore((state) => state.successOpen);
-  const setSuccessOpen = useAlertStore((state) => state.setSuccessOpen);
   const loading = useAlertStore((state) => state.loading);
   const [fetchError, setFetchError] = useState(false);
 
-  // Initialize state variable for the list of alerts
-  const [alertsList, setAlertsList] = useState<
-    Array<{
-      type: string;
-      data: { title: string; list?: Array<string>; link?: string };
-      id: string;
-    }>
-  >([]);
-
-  // Use effect hook to update alertsList when a new alert is added
-  useEffect(() => {
-    // If there is an error alert open with data, add it to the alertsList
-    if (errorOpen && errorData) {
-      if (
-        alertsList.length > 0 &&
-        JSON.stringify(alertsList[alertsList.length - 1].data) ===
-          JSON.stringify(errorData)
-      ) {
-        return;
-      }
-      setErrorOpen(false);
-      setAlertsList((old) => {
-        let newAlertsList = [
-          ...old,
-          { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
-        ];
-        return newAlertsList;
-      });
-    }
-    // If there is a notice alert open with data, add it to the alertsList
-    else if (noticeOpen && noticeData) {
-      if (
-        alertsList.length > 0 &&
-        JSON.stringify(alertsList[alertsList.length - 1].data) ===
-          JSON.stringify(noticeData)
-      ) {
-        return;
-      }
-      setNoticeOpen(false);
-      setAlertsList((old) => {
-        let newAlertsList = [
-          ...old,
-          { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
-        ];
-        return newAlertsList;
-      });
-    }
-    // If there is a success alert open with data, add it to the alertsList
-    else if (successOpen && successData) {
-      if (
-        alertsList.length > 0 &&
-        JSON.stringify(alertsList[alertsList.length - 1].data) ===
-          JSON.stringify(successData)
-      ) {
-        return;
-      }
-      setSuccessOpen(false);
-      setAlertsList((old) => {
-        let newAlertsList = [
-          ...old,
-          { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
-        ];
-        return newAlertsList;
-      });
-    }
-  }, [
-    _,
-    errorData,
-    errorOpen,
-    noticeData,
-    noticeOpen,
-    setErrorOpen,
-    setNoticeOpen,
-    setSuccessOpen,
-    successData,
-    successOpen,
-  ]);
-
   const removeAlert = (id: string) => {
-    setAlertsList((prevAlertsList) =>
+    removeFromTempNotificationList(id);
-      prevAlertsList.filter((alert) => alert.id !== id)
-    );
   };
 
   const { isAuthenticated } = useContext(AuthContext);
@@ -182,28 +98,28 @@ export default function App() {
       </ErrorBoundary>
       <div></div>
       <div className="app-div" style={{ zIndex: 999 }}>
-        {alertsList.map((alert) => (
+        {tempNotificationList.map((alert) => (
           <div key={alert.id}>
             {alert.type === "error" ? (
               <ErrorAlert
                 key={alert.id}
-                title={alert.data.title}
+                title={alert.title}
-                list={alert.data.list}
+                list={alert.list}
                 id={alert.id}
                 removeAlert={removeAlert}
               />
             ) : alert.type === "notice" ? (
               <NoticeAlert
                 key={alert.id}
-                title={alert.data.title}
+                title={alert.title}
-                link={alert.data.link}
+                link={alert.link}
                 id={alert.id}
                 removeAlert={removeAlert}
               />
             ) : (
               <SuccessAlert
                 key={alert.id}
-                title={alert.data.title}
+                title={alert.title}
                 id={alert.id}
                 removeAlert={removeAlert}
               />

src/frontend/src/components/newChatView/index.tsx

@@ -43,7 +43,6 @@ export default function newChatView(): JSX.Element {
   useEffect(() => {
     const chatOutputResponses: FlowPoolObjectType[] = [];
     outputIds.forEach((outputId) => {
-      console.log("rodou", flowPool[outputId]);
       if (outputId.includes("ChatOutput")) {
         if (flowPool[outputId] && flowPool[outputId].length > 0) {
           chatOutputResponses.push(...flowPool[outputId]);

src/frontend/src/stores/alertStore.ts

@@ -2,6 +2,7 @@ import { uniqueId } from "lodash";
 import { create } from "zustand";
 import { AlertItemType } from "../types/alerts";
 import { AlertStoreType } from "../types/zustand/alert";
+import { customStringify } from "../utils/reactflowUtils";
 
 const pushNotificationList = (
   list: AlertItemType[],
@@ -13,67 +14,130 @@ const pushNotificationList = (
 
 const useAlertStore = create<AlertStoreType>((set, get) => ({
   errorData: { title: "", list: [] },
-  errorOpen: false,
   noticeData: { title: "", link: "" },
-  noticeOpen: false,
   successData: { title: "" },
-  successOpen: false,
   notificationCenter: false,
   notificationList: [],
+  tempNotificationList: [],
   loading: true,
   setErrorData: (newState: { title: string; list?: Array<string> }) => {
     if (newState.title && newState.title !== "") {
       set({
         errorData: newState,
-        errorOpen: true,
         notificationCenter: true,
-        notificationList: pushNotificationList(get().notificationList, {
+        notificationList: [
-          type: "error",
+          {
-          title: newState.title,
+            type: "error",
-          list: newState.list,
+            title: newState.title,
-          id: uniqueId(),
+            list: newState.list,
-        }),
+            id: uniqueId(),
+          },
+          ...get().notificationList,
+        ],
       });
+      const tempList = get().tempNotificationList;
+      if (
+        !tempList.some((item) => {
+          return (
+            customStringify({
+              title: item.title,
+              type: item.type,
+              list: item.list,
+            }) === customStringify({ ...newState, type: "error" })
+          );
+        })
+      ) {
+        set({
+          tempNotificationList: [
+            {
+              type: "error",
+              title: newState.title,
+              list: newState.list,
+              id: uniqueId(),
+            },
+            ...get().tempNotificationList,
+          ],
+        });
+      }
     }
   },
-  setErrorOpen: (newState: boolean) => {
-    set({ errorOpen: newState });
-  },
   setNoticeData: (newState: { title: string; link?: string }) => {
     if (newState.title && newState.title !== "") {
       set({
         noticeData: newState,
-        noticeOpen: true,
         notificationCenter: true,
-        notificationList: pushNotificationList(get().notificationList, {
+        notificationList: [
-          type: "notice",
+          {
-          title: newState.title,
+            type: "notice",
-          link: newState.link,
+            title: newState.title,
-          id: uniqueId(),
+            link: newState.link,
-        }),
+            id: uniqueId(),
+          },
+          ...get().notificationList,
+        ],
       });
+      const tempList = get().tempNotificationList;
+      if (
+        !tempList.some((item) => {
+          return (
+            customStringify({
+              title: item.title,
+              type: item.type,
+              link: item.link,
+            }) === customStringify({ ...newState, type: "notice" })
+          );
+        })
+      ) {
+        set({
+          tempNotificationList: [
+            {
+              type: "notice",
+              title: newState.title,
+              link: newState.link,
+              id: uniqueId(),
+            },
+            ...get().tempNotificationList,
+          ],
+        });
+      }
     }
   },
-  setNoticeOpen: (newState: boolean) => {
-    set({ noticeOpen: newState });
-  },
   setSuccessData: (newState: { title: string }) => {
     if (newState.title && newState.title !== "") {
       set({
         successData: newState,
-        successOpen: true,
         notificationCenter: true,
-        notificationList: pushNotificationList(get().notificationList, {
+        notificationList: [
-          type: "success",
+          {
-          title: newState.title,
+            type: "success",
-          id: uniqueId(),
+            title: newState.title,
-        }),
+            id: uniqueId(),
+          },
+          ...get().notificationList,
+        ],
       });
+      const tempList = get().tempNotificationList;
+      if (
+        !tempList.some((item) => {
+          return (
+            customStringify({ title: item.title, type: item.type }) ===
+            customStringify({ ...newState, type: "success" })
+          );
+        })
+      ) {
+        set({
+          tempNotificationList: [
+            {
+              type: "success",
+              title: newState.title,
+              id: uniqueId(),
+            },
+            ...get().tempNotificationList,
+          ],
+        });
+      }
     }
   },
-  setSuccessOpen: (newState: boolean) => {
-    set({ successOpen: newState });
-  },
   setNotificationCenter: (newState: boolean) => {
     set({ notificationCenter: newState });
   },
@@ -90,6 +154,16 @@ const useAlertStore = create<AlertStoreType>((set, get) => ({
   setLoading: (newState: boolean) => {
     set({ loading: newState });
   },
+  clearTempNotificationList: () => {
+    set({ tempNotificationList: [] });
+  },
+  removeFromTempNotificationList: (index: string) => {
+    set({
+      tempNotificationList: get().tempNotificationList.filter(
+        (item) => item.id !== index
+      ),
+    });
+  },
 }));
 
 export default useAlertStore;

src/frontend/src/types/zustand/alert/index.ts

@@ -3,19 +3,16 @@ import { AlertItemType } from "../../alerts";
 export type AlertStoreType = {
   errorData: { title: string; list?: Array<string> };
   setErrorData: (newState: { title: string; list?: Array<string> }) => void;
-  errorOpen: boolean;
-  setErrorOpen: (newState: boolean) => void;
   noticeData: { title: string; link?: string };
   setNoticeData: (newState: { title: string; link?: string }) => void;
-  noticeOpen: boolean;
-  setNoticeOpen: (newState: boolean) => void;
   successData: { title: string };
   setSuccessData: (newState: { title: string }) => void;
-  successOpen: boolean;
-  setSuccessOpen: (newState: boolean) => void;
   notificationCenter: boolean;
   setNotificationCenter: (newState: boolean) => void;
   notificationList: Array<AlertItemType>;
+  tempNotificationList: Array<AlertItemType>;
+  clearTempNotificationList: () => void;
+  removeFromTempNotificationList: (index: string) => void;
   clearNotificationList: () => void;
   removeFromNotificationList: (index: string) => void;
   loading: boolean;