diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 97d019d45..d9b634f71 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -18,7 +18,7 @@ import {
import { AuthContext } from "./contexts/authContext";
import { FlowsContext } from "./contexts/flowsContext";
import { locationContext } from "./contexts/locationContext";
-import { getVersion } from "./controllers/API";
+import { getHealth, getVersion } from "./controllers/API";
import Router from "./routes";
import useAlertStore from "./stores/alertStore";
import { useTypesStore } from "./stores/typesStore";
@@ -43,7 +43,7 @@ export default function App() {
const successOpen = useAlertStore((state) => state.successOpen);
const setSuccessOpen = useAlertStore((state) => state.setSuccessOpen);
const loading = useAlertStore((state) => state.loading);
- const fetchError = useAlertStore((state) => state.fetchError);
+ const [fetchError, setFetchError] = useState(false);
// Initialize state variable for the list of alerts
const [alertsList, setAlertsList] = useState<
@@ -147,6 +147,20 @@ export default function App() {
});
}, [isAuthenticated]);
+ useEffect(() => {
+ // Timer to call getHealth every 5 seconds
+ const timer = setInterval(() => {
+ getHealth().catch((e) => {
+ setFetchError(true);
+ });
+ }, 5000);
+
+ // Clean up the timer on component unmount
+ return () => {
+ clearInterval(timer);
+ };
+ }, []);
+
return (
//need parent component with width and height
diff --git a/src/frontend/src/stores/alertStore.ts b/src/frontend/src/stores/alertStore.ts
index a5c2ae41a..63c58e28c 100644
--- a/src/frontend/src/stores/alertStore.ts
+++ b/src/frontend/src/stores/alertStore.ts
@@ -21,10 +21,6 @@ const useAlertStore = create
((set, get) => ({
notificationCenter: false,
notificationList: [],
loading: true,
- fetchError: false,
- setFetchError: (newState: boolean) => {
- set({ fetchError: newState });
- },
setErrorData: (newState: { title: string; list?: Array }) => {
if (newState.title && newState.title !== "") {
set({
diff --git a/src/frontend/src/stores/typesStore.ts b/src/frontend/src/stores/typesStore.ts
index f28791ba0..e2ab3dfc4 100644
--- a/src/frontend/src/stores/typesStore.ts
+++ b/src/frontend/src/stores/typesStore.ts
@@ -1,9 +1,9 @@
import { create } from "zustand";
-import { getAll, getHealth } from "../controllers/API";
-import { APIDataType, APIKindType } from "../types/api";
+import { getAll } from "../controllers/API";
+import { APIDataType } from "../types/api";
import { TypesStoreType } from "../types/zustand/types";
-import useAlertStore from "./alertStore";
import { templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
+import useAlertStore from "./alertStore";
export const useTypesStore = create((set, get) => ({
types: {},
@@ -24,15 +24,13 @@ export const useTypesStore = create((set, get) => ({
resolve();
})
.catch((error) => {
+ useAlertStore.getState().setErrorData({
+ title: "An error has occurred while fetching types.",
+ list: ["Please refresh the page."],
+ });
console.error("An error has occurred while fetching types.");
console.log(error);
- getHealth().catch((e) => {
- useAlertStore.setState({
- fetchError: true,
- loading: false,
- });
- reject();
- });
+ reject();
});
});
},
diff --git a/src/frontend/src/types/zustand/alert/index.ts b/src/frontend/src/types/zustand/alert/index.ts
index cdecff157..1e273cc4e 100644
--- a/src/frontend/src/types/zustand/alert/index.ts
+++ b/src/frontend/src/types/zustand/alert/index.ts
@@ -20,6 +20,4 @@ export type AlertStoreType = {
removeFromNotificationList: (index: string) => void;
loading: boolean;
setLoading: (newState: boolean) => void;
- fetchError: boolean;
- setFetchError: (newState: boolean) => void;
};