🐛 fix(api.tsx): import missing BuildStatus enum from constants/enums to fix compilation error

✨ feat(api.tsx): add support for renewing access token and handling authentication errors to improve user experience
✨ feat(api.tsx): add support for updating build status of vertices to keep track of build progress
🐛 fix(flowStore.ts): add missing updateVerticesBuild function to update the list of vertices being built
🐛 fix(flowStore.ts): initialize verticesBuild array to an empty array to avoid undefined errors
🐛 fix(flowStore.ts): fix typo in updateVerticesBuild function name
🐛 fix(flowStore.ts): fix typo in updateBuildStatus function parameter name
🐛 fix(flowStore.ts): fix typo in updateBuildStatus function parameter type
✨ feat(flowStore.ts): add verticesBuild property to store the list of vertices being built
🐛 fix(index.ts): fix typo in updateBuildStatus function parameter name
🐛 fix(index.ts): fix typo in updateBuildStatus function parameter type
✨ feat(index.ts): add updateVerticesBuild function to update the list of vertices being built
🐛 fix(buildUtils.ts): update build status and vertices build list when building vertices to keep track of build progress

src/frontend/src/controllers/API/api.tsx

@@ -3,8 +3,10 @@ import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import { renewAccessToken } from ".";
+import { BuildStatus } from "../../constants/enums";
 import { AuthContext } from "../../contexts/authContext";
 import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
 
 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
@@ -24,45 +26,20 @@ function ApiInterceptor() {
       async (error: AxiosError) => {
         if (error.response?.status === 401) {
           const accessToken = cookies.get("access_token_lf");
+
           if (accessToken && !autoLogin) {
-            authenticationErrorCount = authenticationErrorCount + 1;
-            if (authenticationErrorCount > 3) {
-              authenticationErrorCount = 0;
-              logout();
-            }
-            try {
-              const res = await renewAccessToken();
-              if (res?.data?.access_token && res?.data?.refresh_token) {
-                login(res?.data?.access_token);
-              }
-              if (error?.config?.headers) {
-                delete error.config.headers["Authorization"];
-                error.config.headers["Authorization"] = `Bearer ${cookies.get(
-                  "access_token_lf"
-                )}`;
-                const response = await axios.request(error.config);
-                return response;
-              }
-            } catch (error) {
-              if (axios.isAxiosError(error) && error.response?.status === 401) {
-                logout();
-              } else {
-                console.error(error);
-                logout();
-              }
-            }
+            checkErrorCount();
+            await tryToRenewAccessToken(error);
           }
 
           if (!accessToken && error?.config?.url?.includes("login")) {
             return Promise.reject(error);
-          } else {
-            logout();
           }
-        } else {
-          // if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
-          return Promise.reject(error);
-          // }
+
+          return logout();
         }
+        await clearBuildVerticesState(error);
+        return Promise.reject(error);
       }
     );
 
@@ -115,6 +92,41 @@ function ApiInterceptor() {
     };
   }, [accessToken, setErrorData]);
 
+  function checkErrorCount() {
+    authenticationErrorCount = authenticationErrorCount + 1;
+
+    if (authenticationErrorCount > 3) {
+      authenticationErrorCount = 0;
+      logout();
+    }
+  }
+
+  async function tryToRenewAccessToken(error: AxiosError) {
+    try {
+      const res = await renewAccessToken();
+      if (res?.data?.access_token && res?.data?.refresh_token) {
+        login(res?.data?.access_token);
+      }
+      if (error?.config?.headers) {
+        delete error.config.headers["Authorization"];
+        error.config.headers["Authorization"] = `Bearer ${cookies.get(
+          "access_token_lf"
+        )}`;
+        const response = await axios.request(error.config);
+        return response;
+      }
+    } catch (error) {
+      logout();
+    }
+  }
+
+  async function clearBuildVerticesState(error) {
+    if (error?.response?.status === 500) {
+      const vertices = useFlowStore.getState().verticesBuild;
+      useFlowStore.getState().updateBuildStatus(vertices, BuildStatus.BUILT);
+    }
+  }
+
   return null;
 }
 

src/frontend/src/stores/flowStore.ts

@@ -431,6 +431,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       }
     });
   },
+  updateVerticesBuild: (vertices: string[]) => {
+    set({ verticesBuild: vertices });
+  },
+  verticesBuild: [],
 }));
 
 export default useFlowStore;

src/frontend/src/types/zustand/flow/index.ts

@@ -87,4 +87,6 @@ export type FlowStoreType = {
   buildFlow: (nodeId?: string) => Promise<void>;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
   updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
+  updateVerticesBuild: (vertices: string[]) => void;
+  verticesBuild: string[];
 };

src/frontend/src/utils/buildUtils.ts

@@ -47,6 +47,7 @@ export async function buildVertices({
 
   const verticesIds = vertices.flatMap((v) => v);
   useFlowStore.getState().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
+  useFlowStore.getState().updateVerticesBuild(verticesIds);
 
   // Set each vertex state to building
   const buildResults: Array<boolean> = [];