fix(App.tsx): remove extra comma in the useContext hook

feat(App.tsx): add support for displaying fetch error message when there is an error in the backend API call
fix(typesContext.tsx): add error handling for API call and set fetchError state accordingly
feat(typesContext.tsx): add fetchError state and setFetchError function to the typesContext

src/frontend/src/App.tsx

@@ -13,6 +13,7 @@ import LoadingComponent from "./components/loadingComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
+import { typesContext } from "./contexts/typesContext";
 import Router from "./routes";
 
 export default function App() {
@@ -38,6 +39,7 @@ export default function App() {
     setSuccessOpen,
     loading,
   } = useContext(alertContext);
+  const { fetchError } = useContext(typesContext);
 
   // Initialize state variable for the list of alerts
   const [alertsList, setAlertsList] = useState<
@@ -137,7 +139,11 @@ export default function App() {
       >
         {loading ? (
           <div className="loading-page-panel">
+            {fetchError ? (
+              <div>There was an error on the backend</div>
+            ) : (
               <LoadingComponent remSize={50} />
+            )}
           </div>
         ) : (
           <>

src/frontend/src/contexts/typesContext.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import { Node } from "reactflow";
-import { getAll } from "../controllers/API";
+import { getAll, getHealth } from "../controllers/API";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
 import { alertContext } from "./alertContext";
@@ -23,6 +23,8 @@ const initialValue: typesContextType = {
   setTemplates: () => {},
   data: {},
   setData: () => {},
+  setFetchError: () => {},
+  fetchError: false,
 };
 
 export const typesContext = createContext<typesContextType>(initialValue);
@@ -32,6 +34,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
   const [templates, setTemplates] = useState({});
   const [data, setData] = useState({});
+  const [fetchError, setFetchError] = useState(false);
   const { setLoading } = useContext(alertContext);
 
   useEffect(() => {
@@ -46,8 +49,13 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     async function getTypes(): Promise<void> {
       try {
         const result = await getAll();
+        if (result?.status !== 200) {
+          let health = await getHealth().catch((e) => {
+            setFetchError(true);
+          });
+        }
         // Make sure to only update the state if the component is still mounted.
-        if (isMounted) {
+        if (isMounted && result?.status === 200) {
           setLoading(false);
           setData(result.data);
           setTemplates(
@@ -117,6 +125,8 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         templates,
         data,
         setData,
+        fetchError,
+        setFetchError,
       }}
     >
       {children}

src/frontend/src/types/typesContext/index.ts

@@ -15,4 +15,6 @@ export type typesContextType = {
   setTemplates: (newState: {}) => void;
   data: typeof data;
   setData: (newState: {}) => void;
+  fetchError: boolean;
+  setFetchError: (newState: boolean) => void;
 };