Removed getHealth from getTypes and made it refresh every 5 seconds

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
     <div className="flex h-full flex-col">

src/frontend/src/stores/alertStore.ts

@@ -21,10 +21,6 @@ const useAlertStore = create<AlertStoreType>((set, get) => ({
   notificationCenter: false,
   notificationList: [],
   loading: true,
-  fetchError: false,
-  setFetchError: (newState: boolean) => {
-    set({ fetchError: newState });
-  },
   setErrorData: (newState: { title: string; list?: Array<string> }) => {
     if (newState.title && newState.title !== "") {
       set({

src/frontend/src/stores/typesStore.ts

@@ -1,9 +1,9 @@
 import { create } from "zustand";
-import { getAll, getHealth } from "../controllers/API";
+import { getAll } from "../controllers/API";
-import { APIDataType, APIKindType } from "../types/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<TypesStoreType>((set, get) => ({
   types: {},
@@ -24,15 +24,13 @@ export const useTypesStore = create<TypesStoreType>((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) => {
+          reject();
-            useAlertStore.setState({
-              fetchError: true,
-              loading: false,
-            });
-            reject();
-          });
         });
     });
   },

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;
 };