Merge branch 'dev' into bugfix-tweakPage

src/frontend/src/App.tsx

@@ -9,10 +9,16 @@ import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
 import CrashErrorComponent from "./components/CrashErrorComponent";
+import FetchErrorComponent from "./components/fetchErrorComponent";
 import LoadingComponent from "./components/loadingComponent";
+import {
+  FETCH_ERROR_DESCRIPION,
+  FETCH_ERROR_MESSAGE,
+} from "./constants/constants";
 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 +44,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 +144,14 @@ export default function App() {
       >
         {loading ? (
           <div className="loading-page-panel">
-            <LoadingComponent remSize={50} />
+            {fetchError ? (
+              <FetchErrorComponent
+                description={FETCH_ERROR_DESCRIPION}
+                message={FETCH_ERROR_MESSAGE}
+              ></FetchErrorComponent>
+            ) : (
+              <LoadingComponent remSize={50} />
+            )}
           </div>
         ) : (
           <>

src/frontend/src/components/fetchErrorComponent/index.tsx

@@ -0,0 +1,16 @@
+import { fetchErrorComponentType } from "../../types/components";
+import IconComponent from "../genericIconComponent";
+
+export default function FetchErrorComponent({
+  message,
+  description,
+}: fetchErrorComponentType) {
+  return (
+    <div role="status" className="m-auto flex flex-col items-center">
+      <IconComponent className={`h-16 w-16`} name="Unplug"></IconComponent>
+      <br></br>
+      <span className="text-lg text-almost-medium-blue">{message}</span>
+      <span className="text-lg text-almost-medium-blue">{description}</span>
+    </div>
+  );
+}

src/frontend/src/components/genericIconComponent/index.tsx

@@ -9,9 +9,9 @@ export default function IconComponent({
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
   return (
     <TargetIcon
-      strokeWidth={1.5}
       className={className}
       style={{ color: iconColor }}
+      stroke-width={1.5}
     />
   );
 }

src/frontend/src/constants/constants.ts

@@ -602,3 +602,6 @@ export function tabsArray(codes: string[], method: number) {
     },
   ];
 }
+export const FETCH_ERROR_MESSAGE = "Couldn't establish a connection.";
+export const FETCH_ERROR_DESCRIPION =
+  "Check if everything is working properly and try again.";

src/frontend/src/contexts/typesContext.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import { Node, ReactFlowInstance } 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);
@@ -33,14 +35,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     useState<ReactFlowInstance | null>(null);
   const [templates, setTemplates] = useState({});
   const [data, setData] = useState({});
+  const [fetchError, setFetchError] = useState(false);
   const { setLoading } = useContext(alertContext);
 
   useEffect(() => {
-    let delay = 1000; // Start delay of 1 second
-    let intervalId: NodeJS.Timer;
-    let retryCount = 0; // Count of retry attempts
-    const maxRetryCount = 5; // Max retry attempts
-
     // We will keep a flag to handle the case where the component is unmounted before the API call resolves.
     let isMounted = true;
 
@@ -48,7 +46,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       try {
         const result = await getAll();
         // 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(
@@ -78,21 +76,15 @@ export function TypesProvider({ children }: { children: ReactNode }) {
               }, {})
           );
         }
-        // Clear the interval if successful.
-        clearInterval(intervalId!);
       } catch (error) {
         console.error("An error has occurred while fetching types.");
+        await getHealth().catch((e) => {
+          setFetchError(true);
+        });
       }
     }
 
-    // Start the initial interval.
-    intervalId = setInterval(getTypes, delay);
-    return () => {
-      // This will clear the interval when the component unmounts, or when the dependencies of the useEffect hook change.
-      clearInterval(intervalId!);
-      // Indicate that the component has been unmounted.
-      isMounted = false;
-    };
+    getTypes();
   }, []);
 
   function deleteNode(idx: string) {
@@ -117,6 +109,8 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         templates,
         data,
         setData,
+        fetchError,
+        setFetchError,
       }}
     >
       {children}

src/frontend/src/types/components/index.ts

@@ -508,3 +508,7 @@ export type validationStatusType = {
   progress: number;
   valid: boolean;
 };
+export type fetchErrorComponentType = {
+  message: string;
+  description: string;
+};

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

@@ -16,6 +16,8 @@ export type typesContextType = {
   setTemplates: (newState: {}) => void;
   data: APIDataType;
   setData: (newState: {}) => void;
+  fetchError: boolean;
+  setFetchError: (newState: boolean) => void;
 };
 
 export type alertContextType = {

src/frontend/src/utils/styleUtils.ts

@@ -59,6 +59,7 @@ import {
   TerminalSquare,
   Trash2,
   Undo,
+  Unplug,
   Upload,
   UserMinus2,
   UserPlus2,
@@ -290,4 +291,5 @@ export const nodeIconsLucide: iconsType = {
   ChevronsLeft,
   FaGithub,
   FaApple,
+  Unplug,
 };