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
This commit is contained in:
anovazzi1
parent
cd03b14743
commit
e195cb5eec
4 changed files with 122 additions and 136 deletions
|
|
@ -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<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) =>
|
||||
prevAlertsList.filter((alert) => alert.id !== id)
|
||||
);
|
||||
removeFromTempNotificationList(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}
|
||||
list={alert.data.list}
|
||||
title={alert.title}
|
||||
list={alert.list}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : alert.type === "notice" ? (
|
||||
<NoticeAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
link={alert.data.link}
|
||||
title={alert.title}
|
||||
link={alert.link}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : (
|
||||
<SuccessAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
title={alert.title}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
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<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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue