diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index d126f5fa9..857d1e901 100644 --- a/src/frontend/src/App.tsx +++ b/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 errorOpen = useAlertStore((state) => state.errorOpen); - const setErrorOpen = useAlertStore((state) => state.setErrorOpen); - const noticeData = useAlertStore((state) => state.noticeData); - const noticeOpen = useAlertStore((state) => state.noticeOpen); - 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 removeFromTempNotificationList = useAlertStore( + (state) => state.removeFromTempNotificationList + ); + const tempNotificationList = useAlertStore( + (state) => state.tempNotificationList + ); 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; 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) => - prevAlertsList.filter((alert) => alert.id !== id) - ); + removeFromTempNotificationList(id); }; const { isAuthenticated } = useContext(AuthContext); @@ -182,28 +98,28 @@ export default function App() {
- {alertsList.map((alert) => ( + {tempNotificationList.map((alert) => (
{alert.type === "error" ? ( ) : alert.type === "notice" ? ( ) : ( diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx index 477394c6b..e45c8a71e 100644 --- a/src/frontend/src/components/newChatView/index.tsx +++ b/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]); diff --git a/src/frontend/src/stores/alertStore.ts b/src/frontend/src/stores/alertStore.ts index 63c58e28c..e23a8d4e3 100644 --- a/src/frontend/src/stores/alertStore.ts +++ b/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((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 }) => { if (newState.title && newState.title !== "") { set({ errorData: newState, - errorOpen: true, notificationCenter: true, - notificationList: pushNotificationList(get().notificationList, { - type: "error", - title: newState.title, - list: newState.list, - id: uniqueId(), - }), + notificationList: [ + { + type: "error", + title: newState.title, + 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, { - type: "notice", - title: newState.title, - link: newState.link, - id: uniqueId(), - }), + notificationList: [ + { + type: "notice", + title: newState.title, + 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, { - type: "success", - title: newState.title, - id: uniqueId(), - }), + notificationList: [ + { + type: "success", + 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((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; diff --git a/src/frontend/src/types/zustand/alert/index.ts b/src/frontend/src/types/zustand/alert/index.ts index 1e273cc4e..7b2837517 100644 --- a/src/frontend/src/types/zustand/alert/index.ts +++ b/src/frontend/src/types/zustand/alert/index.ts @@ -3,19 +3,16 @@ import { AlertItemType } from "../../alerts"; export type AlertStoreType = { errorData: { title: string; list?: Array }; setErrorData: (newState: { title: string; list?: Array }) => 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; + tempNotificationList: Array; + clearTempNotificationList: () => void; + removeFromTempNotificationList: (index: string) => void; clearNotificationList: () => void; removeFromNotificationList: (index: string) => void; loading: boolean;