From 82b80842ddfc1feed40384293ff70dda1f740f15 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Tue, 9 Apr 2024 15:45:28 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(App.tsx):=20add=20support=20for=20?= =?UTF-8?q?auto=20login=20feature=20to=20improve=20user=20experience=20and?= =?UTF-8?q?=20reduce=20login=20friction=20=F0=9F=93=9D=20(authContext.tsx)?= =?UTF-8?q?:=20remove=20unused=20autoLogin=20function=20and=20refactor=20g?= =?UTF-8?q?etUser=20function=20to=20improve=20code=20readability=20and=20m?= =?UTF-8?q?aintainability=20=F0=9F=93=9D=20(authContext.tsx):=20add=20getU?= =?UTF-8?q?ser=20function=20to=20retrieve=20user=20data=20and=20improve=20?= =?UTF-8?q?user=20authentication=20flow=20=F0=9F=93=9D=20(auth.ts):=20add?= =?UTF-8?q?=20getUser=20function=20to=20AuthContextType=20to=20improve=20t?= =?UTF-8?q?ype=20safety=20and=20provide=20a=20clear=20API=20for=20accessin?= =?UTF-8?q?g=20user=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/App.tsx | 63 +++++++++++++++-------- src/frontend/src/contexts/authContext.tsx | 33 ++---------- src/frontend/src/types/contexts/auth.ts | 1 + 3 files changed, 46 insertions(+), 51 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 5e65ee890..75070b3bd 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -1,9 +1,8 @@ import { useContext, useEffect, useState } from "react"; -import "reactflow/dist/style.css"; -import "./App.css"; - import { ErrorBoundary } from "react-error-boundary"; import { useNavigate } from "react-router-dom"; +import "reactflow/dist/style.css"; +import "./App.css"; import ErrorAlert from "./alerts/error"; import NoticeAlert from "./alerts/notice"; import SuccessAlert from "./alerts/success"; @@ -15,7 +14,7 @@ import { FETCH_ERROR_MESSAGE, } from "./constants/constants"; import { AuthContext } from "./contexts/authContext"; -import { getGlobalVariables, getHealth } from "./controllers/API"; +import { autoLogin, getGlobalVariables, getHealth } from "./controllers/API"; import Router from "./routes"; import useAlertStore from "./stores/alertStore"; import { useDarkStore } from "./stores/darkStore"; @@ -38,8 +37,10 @@ export default function App() { removeFromTempNotificationList(id); }; - const { isAuthenticated } = useContext(AuthContext); + const { isAuthenticated, login, setUserData, setAutoLogin, getUser } = + useContext(AuthContext); const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows); + const setLoading = useAlertStore((state) => state.setLoading); const fetchApiData = useStoreStore((state) => state.fetchApiData); const getTypes = useTypesStore((state) => state.getTypes); const refreshVersion = useDarkStore((state) => state.refreshVersion); @@ -53,26 +54,46 @@ export default function App() { const [isLoadingHealth, setIsLoadingHealth] = useState(false); useEffect(() => { - refreshStars(); - refreshVersion(); + const isLoginPage = location.pathname.includes("login"); - const fetchData = async () => { - if (isAuthenticated) { - try { - await getTypes(); - refreshFlows(); - const res = await getGlobalVariables(); - setGlobalVariables(res); - checkHasStore(); - fetchApiData(); - } catch (error) { - console.error("Failed to fetch data:", error); + autoLogin() + .then(async (user) => { + if (user && user["access_token"]) { + user["refresh_token"] = "auto"; + login(user["access_token"]); + setUserData(user); + setAutoLogin(true); + setLoading(false); + await Promise.all([refreshStars(), refreshVersion(), fetchData()]); } - } - }; - fetchData(); + }) + .catch(async () => { + setAutoLogin(false); + if (isAuthenticated && !isLoginPage) { + getUser(); + await Promise.all([refreshStars(), refreshVersion(), fetchData()]); + } else { + setLoading(false); + useFlowsManagerStore.setState({ isLoading: false }); + } + }); }, [isAuthenticated]); + const fetchData = async () => { + if (isAuthenticated) { + try { + await getTypes(); + refreshFlows(); + const res = await getGlobalVariables(); + setGlobalVariables(res); + checkHasStore(); + fetchApiData(); + } catch (error) { + console.error("Failed to fetch data:", error); + } + } + }; + useEffect(() => { checkApplicationHealth(); // Timer to call getHealth every 5 seconds diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index c9c7b2699..43416f373 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -1,13 +1,8 @@ import { createContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Cookies from "universal-cookie"; -import { - autoLogin as autoLoginApi, - getLoggedUser, - requestLogout, -} from "../controllers/API"; +import { getLoggedUser, requestLogout } from "../controllers/API"; import useAlertStore from "../stores/alertStore"; -import useFlowsManagerStore from "../stores/flowsManagerStore"; import { Users } from "../types/api"; import { AuthContextType } from "../types/contexts/auth"; @@ -26,6 +21,7 @@ const initialValue: AuthContextType = { setApiKey: () => {}, apiKey: null, storeApiKey: () => {}, + getUser: () => {}, }; export const AuthContext = createContext(initialValue); @@ -61,30 +57,6 @@ 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"]); - setUserData(user); - setAutoLogin(true); - setLoading(false); - } - }) - .catch((error) => { - setAutoLogin(false); - if (isAuthenticated && !isLoginPage) { - getUser(); - } else { - setLoading(false); - useFlowsManagerStore.setState({ isLoading: false }); - } - }); - }, [autoLogin]); - function getUser() { getLoggedUser() .then((user) => { @@ -145,6 +117,7 @@ export function AuthProvider({ children }): React.ReactElement { setApiKey, apiKey, storeApiKey, + getUser, }} > {children} diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index ff22aa874..ba0998064 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -15,4 +15,5 @@ export type AuthContextType = { apiKey: string | null; setApiKey: (apiKey: string | null) => void; storeApiKey: (apiKey: string) => void; + getUser: () => void; };