🔧 fix(App.tsx): remove unused imports and variables for better code cleanliness

✨ feat(authContext.tsx): move autoLogin logic from App component to AuthProvider to improve separation of concerns
🔧 fix(index.tsx): reorder context providers to ensure correct execution order
🔧 fix(tabsContext.tsx): add comment to clarify the purpose of the useEffect hook
🔧 fix(typesContext.tsx): add comment to clarify the purpose of the useEffect hook
🔧 fix(routes.tsx): rename ProtectedAdminRoute to ProtectedRoute for consistency

src/frontend/src/App.tsx

@@ -16,10 +16,8 @@ import {
   FETCH_ERROR_MESSAGE,
 } from "./constants/constants";
 import { alertContext } from "./contexts/alertContext";
-import { AuthContext } from "./contexts/authContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
-import { autoLogin, getLoggedUser } from "./controllers/API";
 import { typesContext } from "./contexts/typesContext";
 import Router from "./routes";
 
@@ -46,7 +44,7 @@ export default function App() {
     setSuccessOpen,
     setErrorData,
     loading,
-    setLoading
+    setLoading,
   } = useContext(alertContext);
   const navigate = useNavigate();
   const { fetchError } = useContext(typesContext);
@@ -60,11 +58,6 @@ export default function App() {
     }>
   >([]);
 
-  const isLoginPage = location.pathname.includes("login");
-  const isAdminPage = location.pathname.includes("admin");
-  const isSignUpPage = location.pathname.includes("signup");
-  const isLocalHost = window.location.href.includes("localhost");
-
   // Use effect hook to update alertsList when a new alert is added
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
@@ -140,39 +133,6 @@ export default function App() {
     );
   };
 
-  //this function is to get the user logged in when the page is refreshed
-  const { setUserData, getAuthentication, login, setAutoLogin, logout, setIsAdmin } =
-    useContext(AuthContext);
-
-  useEffect(() => {
-    setTimeout(() => {
-      autoLogin().then((user) => {
-        if(user && user['access_token']){
-          user['refresh_token'] = "auto";
-          login(user['access_token'], user['refresh_token']);
-          setUserData(user);
-          setAutoLogin(true);
-          setLoading(false);
-        }
-      }).catch((error) => {
-        setAutoLogin(false);
-        if (getAuthentication() && !isLoginPage) {
-          getLoggedUser()
-            .then((user) => {
-              setUserData(user);
-              setLoading(false);
-              const isSuperUser = user.is_superuser;
-              setIsAdmin(isSuperUser);
-            })
-            .catch((error) => {});
-        }
-        else{
-          setLoading(false);
-        }
-      });
-    }, 500);
-  }, []);
-
   return (
     //need parent component with width and height
     <div className="flex h-full flex-col">

src/frontend/src/contexts/authContext.tsx

@@ -1,8 +1,9 @@
-import { createContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import Cookies from "universal-cookie";
-import { getLoggedUser, getRepoStars } from "../controllers/API";
+import { autoLogin as autoLoginApi, getLoggedUser } from "../controllers/API";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
+import { alertContext } from "./alertContext";
 
 const initialValue: AuthContextType = {
   isAdmin: false,
@@ -25,13 +26,17 @@ export const AuthContext = createContext<AuthContextType>(initialValue);
 
 export function AuthProvider({ children }): React.ReactElement {
   const cookies = new Cookies();
-  const [accessToken, setAccessToken] = useState<string | null>(cookies.get("access_token"));
+  const [accessToken, setAccessToken] = useState<string | null>(
-  const [refreshToken, setRefreshToken] = useState<string | null>(cookies.get("refresh_token"));
+    cookies.get("access_token")
+  );
+  const [refreshToken, setRefreshToken] = useState<string | null>(
+    cookies.get("refresh_token")
+  );
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(null);
   const [autoLogin, setAutoLogin] = useState<boolean>(false);
-
+  const { setLoading } = useContext(alertContext);
   useEffect(() => {
     const storedAccessToken = cookies.get("access_token");
     if (storedAccessToken) {
@@ -39,6 +44,35 @@ export function AuthProvider({ children }): React.ReactElement {
     }
   }, []);
 
+  useEffect(() => {
+    const isLoginPage = location.pathname.includes("login");
+
+    autoLoginApi()
+      .then((user) => {
+        if (user && user["access_token"]) {
+          user["refresh_token"] = "auto";
+          login(user["access_token"], user["refresh_token"]);
+          setUserData(user);
+          setAutoLogin(true);
+          setLoading(false);
+        }
+      })
+      .catch((error) => {
+        setAutoLogin(false);
+        if (getAuthentication() && !isLoginPage) {
+          getLoggedUser()
+            .then((user) => {
+              setUserData(user);
+              setLoading(false);
+              const isSuperUser = user.is_superuser;
+              setIsAdmin(isSuperUser);
+            })
+            .catch((error) => {});
+        } else {
+          setLoading(false);
+        }
+      });
+  }, []);
 
   function getAuthentication() {
     const storedRefreshToken = cookies.get("refresh_token");

src/frontend/src/contexts/index.tsx

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
+import { BrowserRouter } from "react-router-dom";
 import { ReactFlowProvider } from "reactflow";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { ApiInterceptor } from "../controllers/API/api";
 import { SSEProvider } from "./SSEContext";
 import { AlertProvider } from "./alertContext";
 import { AuthProvider } from "./authContext";
@@ -9,34 +11,32 @@ import { LocationProvider } from "./locationContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 import { UndoRedoProvider } from "./undoRedoContext";
-import { BrowserRouter } from "react-router-dom";
-import { ApiInterceptor } from "../controllers/API/api";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context
   return (
     <>
-    <BrowserRouter>
+      <BrowserRouter>
-      <AuthProvider>
+        <AlertProvider>
-        <TooltipProvider>
+          <AuthProvider>
-          <ReactFlowProvider>
+            <TooltipProvider>
-            <DarkProvider>
+              <ReactFlowProvider>
-              <TypesProvider>
+                <DarkProvider>
-                <LocationProvider>
+                  <TypesProvider>
-                  <AlertProvider>
+                    <LocationProvider>
-                  <ApiInterceptor />
+                      <ApiInterceptor />
-                    <SSEProvider>
+                      <SSEProvider>
-                      <TabsProvider>
+                        <TabsProvider>
-                        <UndoRedoProvider>{children}</UndoRedoProvider>
+                          <UndoRedoProvider>{children}</UndoRedoProvider>
-                      </TabsProvider>
+                        </TabsProvider>
-                    </SSEProvider>
+                      </SSEProvider>
-                  </AlertProvider>
+                    </LocationProvider>
-                </LocationProvider>
+                  </TypesProvider>
-              </TypesProvider>
+                </DarkProvider>
-            </DarkProvider>
+              </ReactFlowProvider>
-          </ReactFlowProvider>
+            </TooltipProvider>
-        </TooltipProvider>
+          </AuthProvider>
-      </AuthProvider>
+        </AlertProvider>
       </BrowserRouter>
     </>
   );

src/frontend/src/contexts/tabsContext.tsx

@@ -129,6 +129,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   useEffect(() => {
+    // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
     if (getAuthentication() === true) {
       // get data from db
       //get tabs locally saved

src/frontend/src/contexts/typesContext.tsx

@@ -41,6 +41,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   const { getAuthentication } = useContext(AuthContext);
 
   useEffect(() => {
+    // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
     if (getAuthentication() === true) {
       getTypes();
     }

src/frontend/src/routes.tsx

@@ -106,9 +106,9 @@ const Router = () => {
         <Route
           path="api-keys"
           element={
-            <ProtectedAdminRoute>
+            <ProtectedRoute>
               <ApiKeysPage />
-            </ProtectedAdminRoute>
+            </ProtectedRoute>
           }
         ></Route>
       </Route>