fix refresh on App
This commit is contained in:
parent
7cf74e733b
commit
eebaea3788
3 changed files with 61 additions and 47 deletions
|
|
@ -25,21 +25,13 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
|
||||||
import { useFolderStore } from "./stores/foldersStore";
|
import { useFolderStore } from "./stores/foldersStore";
|
||||||
import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
|
import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
|
||||||
import { useStoreStore } from "./stores/storeStore";
|
import { useStoreStore } from "./stores/storeStore";
|
||||||
|
import AlertDisplayArea from "./alerts/displayArea";
|
||||||
export default function App() {
|
export default function App() {
|
||||||
useTrackLastVisitedPath();
|
useTrackLastVisitedPath();
|
||||||
|
|
||||||
const removeFromTempNotificationList = useAlertStore(
|
|
||||||
(state) => state.removeFromTempNotificationList,
|
|
||||||
);
|
|
||||||
const tempNotificationList = useAlertStore(
|
|
||||||
(state) => state.tempNotificationList,
|
|
||||||
);
|
|
||||||
const [fetchError, setFetchError] = useState(false);
|
const [fetchError, setFetchError] = useState(false);
|
||||||
const isLoading = useFlowsManagerStore((state) => state.isLoading);
|
const isLoading = useFlowsManagerStore((state) => state.isLoading);
|
||||||
|
|
||||||
const removeAlert = (id: string) => {
|
|
||||||
removeFromTempNotificationList(id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const { isAuthenticated, login, setUserData, setAutoLogin, getUser } =
|
const { isAuthenticated, login, setUserData, setAutoLogin, getUser } =
|
||||||
useContext(AuthContext);
|
useContext(AuthContext);
|
||||||
|
|
@ -208,38 +200,7 @@ export default function App() {
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
<div></div>
|
<div></div>
|
||||||
<div className="app-div">
|
<div className="app-div">
|
||||||
<div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
|
<AlertDisplayArea/>
|
||||||
{tempNotificationList.map((alert) => (
|
|
||||||
<div key={alert.id}>
|
|
||||||
{alert.type === "error" ? (
|
|
||||||
<ErrorAlert
|
|
||||||
key={alert.id}
|
|
||||||
title={alert.title}
|
|
||||||
list={alert.list}
|
|
||||||
id={alert.id}
|
|
||||||
removeAlert={removeAlert}
|
|
||||||
/>
|
|
||||||
) : alert.type === "notice" ? (
|
|
||||||
<NoticeAlert
|
|
||||||
key={alert.id}
|
|
||||||
title={alert.title}
|
|
||||||
link={alert.link}
|
|
||||||
id={alert.id}
|
|
||||||
removeAlert={removeAlert}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
alert.type === "success" && (
|
|
||||||
<SuccessAlert
|
|
||||||
key={alert.id}
|
|
||||||
title={alert.title}
|
|
||||||
id={alert.id}
|
|
||||||
removeAlert={removeAlert}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
53
src/frontend/src/alerts/displayArea/index.tsx
Normal file
53
src/frontend/src/alerts/displayArea/index.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import useAlertStore from "../../stores/alertStore";
|
||||||
|
import ErrorAlert from "../error";
|
||||||
|
import NoticeAlert from "../notice";
|
||||||
|
import SuccessAlert from "../success";
|
||||||
|
|
||||||
|
export default function AlertDisplayArea(){
|
||||||
|
|
||||||
|
const removeFromTempNotificationList = useAlertStore(
|
||||||
|
(state) => state.removeFromTempNotificationList,
|
||||||
|
);
|
||||||
|
const tempNotificationList = useAlertStore(
|
||||||
|
(state) => state.tempNotificationList,
|
||||||
|
);
|
||||||
|
const removeAlert = (id: string) => {
|
||||||
|
removeFromTempNotificationList(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
|
||||||
|
{tempNotificationList.map((alert) => (
|
||||||
|
<div key={alert.id}>
|
||||||
|
{alert.type === "error" ? (
|
||||||
|
<ErrorAlert
|
||||||
|
key={alert.id}
|
||||||
|
title={alert.title}
|
||||||
|
list={alert.list}
|
||||||
|
id={alert.id}
|
||||||
|
removeAlert={removeAlert}
|
||||||
|
/>
|
||||||
|
) : alert.type === "notice" ? (
|
||||||
|
<NoticeAlert
|
||||||
|
key={alert.id}
|
||||||
|
title={alert.title}
|
||||||
|
link={alert.link}
|
||||||
|
id={alert.id}
|
||||||
|
removeAlert={removeAlert}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
alert.type === "success" && (
|
||||||
|
<SuccessAlert
|
||||||
|
key={alert.id}
|
||||||
|
title={alert.title}
|
||||||
|
id={alert.id}
|
||||||
|
removeAlert={removeAlert}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -12,14 +12,14 @@ const useUpdateMessage = (setSuccessData, setErrorData) => {
|
||||||
updateMessage(data);
|
updateMessage(data);
|
||||||
|
|
||||||
// Set success message
|
// Set success message
|
||||||
setSuccessData({
|
// setSuccessData({
|
||||||
title: "Messages updated successfully.",
|
// title: "Messages updated successfully.",
|
||||||
});
|
// });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// Set error message
|
// Set error message
|
||||||
setErrorData({
|
// setErrorData({
|
||||||
title: "Error updating messages.",
|
// title: "Error updating messages.",
|
||||||
});
|
// });
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue