🐛 fix(App.tsx): add setIsAdmin function to AuthContext to update isAdmin state when user data is fetched

✨ feat(App.tsx): set isAdmin state based on user's is_superuser value to conditionally render admin-related components
🐛 fix(headerComponent/index.tsx): fix conditional rendering of Sign out, Home, and Admin page buttons based on autoLogin and isAdmin values
🐛 fix(authContext.tsx): remove unnecessary useEffect to update isAdmin state when accessToken or isAdmin changes
🔥 chore(api.tsx): remove unused sleep function
✨ feat(AdminPage/index.tsx): update text in AdminPage to provide a better description of the page's purpose
🐛 fix(routes.tsx): wrap AdminPage and ApiKeysPage components with ProtectedAdminRoute component to restrict access to admin-only routes

src/frontend/src/App.tsx

@@ -134,7 +134,7 @@ export default function App() {
   };
 
   //this function is to get the user logged in when the page is refreshed
-  const { setUserData, getAuthentication, login, setAutoLogin, logout } =
+  const { setUserData, getAuthentication, login, setAutoLogin, logout, setIsAdmin } =
     useContext(AuthContext);
 
   useEffect(() => {
@@ -154,6 +154,8 @@ export default function App() {
             .then((user) => {
               setUserData(user);
               setLoading(false);
+              const isSuperUser = user.is_superuser;
+              setIsAdmin(isSuperUser);
             })
             .catch((error) => {});
         }

src/frontend/src/components/headerComponent/index.tsx

@@ -26,34 +26,37 @@ export default function Header(): JSX.Element {
         <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
-        {location.pathname === "/admin" && (
-          <Button
-            onClick={() => {
-              navigate("/");
-            }}
-            variant="outline"
-            className=""
-          >
-            Main page
-          </Button>
-        )}
+
         {autoLogin === false && (
-          <Button
+          <a
             onClick={() => {
               logout();
               navigate("/login");
             }}
-            variant="outline"
-            className=""
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
           >
             Sign out
-          </Button>
+          </a>
+        )}
+
+        {location.pathname === "/admin" && (
+          <a
+            onClick={() => {
+              navigate("/");
+            }}
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
+          >
+            Home
+          </a>
         )}
 
         {isAdmin && !autoLogin && location.pathname !== "/admin" && (
-          <Button variant="outline" onClick={() => navigate("/admin")}>
+          <a
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
+            onClick={() => navigate("/admin")}
+          >
             Admin page
-          </Button>
+          </a>
         )}
 
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
@@ -138,17 +141,18 @@ export default function Header(): JSX.Element {
               />
             </div>
           </AlertDropdown>
-
-          <button
-            onClick={() => {
-              navigate("/account/api-keys");
-            }}
-          >
-            <IconComponent
-              name="Key"
-              className="side-bar-button-size text-muted-foreground hover:text-accent-foreground"
-            />
-          </button>
+          {!autoLogin && (
+            <button
+              onClick={() => {
+                navigate("/account/api-keys");
+              }}
+            >
+              <IconComponent
+                name="Key"
+                className="side-bar-button-size text-muted-foreground hover:text-accent-foreground"
+              />
+            </button>
+          )}
         </div>
       </div>
     </div>

src/frontend/src/contexts/authContext.tsx

@@ -47,14 +47,6 @@ export function AuthProvider({ children }): React.ReactElement {
     fetchStars();
   }, []);
 
-  useEffect(() => {
-    if (accessToken) {
-      getLoggedUser().then((user) => {
-        const isSuperUser = user.is_superuser;
-        setIsAdmin(isSuperUser);
-      });
-    }
-  }, [accessToken, isAdmin]);
 
   function getAuthentication() {
     const storedRefreshToken = cookies.get("refresh_token");

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

@@ -103,9 +103,5 @@ function ApiInterceptor() {
   return null;
 }
 
-// Function to sleep for a given duration in milliseconds
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
 
 export { ApiInterceptor, api };

src/frontend/src/pages/AdminPage/index.tsx

@@ -196,7 +196,7 @@ export default function AdminPage() {
                       Welcome back!
                     </h2>
                     <p className="text-muted-foreground">
-                      Here&apos;s a list of all users!
+                    Navigate through this section to efficiently oversee all application users. From here, you can seamlessly manage user accounts.
                     </p>
                   </div>
                   <div className="flex items-center space-x-2"></div>

src/frontend/src/routes.tsx

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