From 89d69af7f8d0e711f6fd84b46ecea9e9e56bcb95 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 25 Aug 2023 19:08:38 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20initiali?= =?UTF-8?q?ze=20accessToken=20and=20refreshToken=20with=20values=20from=20?= =?UTF-8?q?cookies=20to=20maintain=20user=20session=20=E2=9C=A8=20feat(aut?= =?UTF-8?q?hContext.tsx):=20add=20support=20for=20process.env.PORT=20envir?= =?UTF-8?q?onment=20variable=20to=20be=20able=20to=20run=20app=20on=20a=20?= =?UTF-8?q?configurable=20port=20=F0=9F=90=9B=20fix(tabsContext.tsx):=20im?= =?UTF-8?q?port=20missing=20AuthContext=20and=20use=20getAuthentication=20?= =?UTF-8?q?function=20to=20conditionally=20fetch=20data=20=F0=9F=90=9B=20f?= =?UTF-8?q?ix(typesContext.tsx):=20import=20missing=20AuthContext=20and=20?= =?UTF-8?q?use=20getAuthentication=20function=20to=20conditionally=20fetch?= =?UTF-8?q?=20data=20=F0=9F=90=9B=20fix(api.tsx):=20add=20check=20to=20not?= =?UTF-8?q?=20refresh=20token=20if=20refreshToken=20is=20"auto"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/contexts/authContext.tsx | 6 +- src/frontend/src/contexts/tabsContext.tsx | 29 +++++--- src/frontend/src/contexts/typesContext.tsx | 82 ++++++++++------------ src/frontend/src/controllers/API/api.tsx | 2 +- 4 files changed, 61 insertions(+), 58 deletions(-) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 5d849302a..c8abb3aad 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -24,13 +24,13 @@ const initialValue: AuthContextType = { export const AuthContext = createContext(initialValue); export function AuthProvider({ children }): React.ReactElement { - const [accessToken, setAccessToken] = useState(null); - const [refreshToken, setRefreshToken] = useState(null); + const cookies = new Cookies(); + const [accessToken, setAccessToken] = useState(cookies.get("access_token")); + const [refreshToken, setRefreshToken] = useState(cookies.get("refresh_token")); const [isAuthenticated, setIsAuthenticated] = useState(false); const [isAdmin, setIsAdmin] = useState(false); const [userData, setUserData] = useState(null); const [autoLogin, setAutoLogin] = useState(false); - const cookies = new Cookies(); useEffect(() => { const storedAccessToken = cookies.get("access_token"); diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 15b0edcb2..e6fdf13dc 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -1,3 +1,4 @@ +import { AxiosError } from "axios"; import _ from "lodash"; import { ReactNode, @@ -21,7 +22,7 @@ import { import { APIClassType, APITemplateType } from "../types/api"; import { tweakType } from "../types/components"; import { FlowType, NodeDataType, NodeType } from "../types/flow"; -import { TabsContextType, TabsState, errorsVarType } from "../types/tabs"; +import { TabsContextType, TabsState } from "../types/tabs"; import { addVersionToDuplicates, updateIds, @@ -29,8 +30,8 @@ import { } from "../utils/reactflowUtils"; import { getRandomDescription, getRandomName } from "../utils/utils"; import { alertContext } from "./alertContext"; +import { AuthContext } from "./authContext"; import { typesContext } from "./typesContext"; -import { AxiosError } from "axios"; const uid = new ShortUniqueId({ length: 5 }); @@ -69,7 +70,9 @@ export const TabsContext = createContext( ); export function TabsProvider({ children }: { children: ReactNode }) { - const { setErrorData, setNoticeData, setSuccessData } = useContext(alertContext); + const { setErrorData, setNoticeData, setSuccessData } = + useContext(alertContext); + const { getAuthentication } = useContext(AuthContext); const [tabId, setTabId] = useState(""); @@ -113,7 +116,6 @@ export function TabsProvider({ children }: { children: ReactNode }) { } function refreshFlows() { - setTimeout(() => { getTabsDataFromDB().then((DbData) => { if (DbData && Object.keys(templates).length > 0) { try { @@ -124,20 +126,22 @@ export function TabsProvider({ children }: { children: ReactNode }) { } } }); - }, 2000); } useEffect(() => { - // get data from db - //get tabs locally saved - // let tabsData = getLocalStorageTabsData(); - refreshFlows(); - }, [templates]); + if (getAuthentication() === true) { + // get data from db + //get tabs locally saved + // let tabsData = getLocalStorageTabsData(); + refreshFlows(); + } + }, [templates, getAuthentication()]); function getTabsDataFromDB() { //get tabs from db return readFlowsFromDatabase(); } + function processDBData(DbData: FlowType[]) { DbData.forEach((flow: FlowType) => { try { @@ -605,7 +609,10 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); } } catch (err) { - setErrorData({title: "Error while saving changes",list:[(err as AxiosError).message]}); + setErrorData({ + title: "Error while saving changes", + list: [(err as AxiosError).message], + }); } } diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index d8d3ca3ca..2e02c2b7a 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/src/frontend/src/contexts/typesContext.tsx @@ -10,6 +10,7 @@ import { getAll, getHealth } from "../controllers/API"; import { APIKindType } from "../types/api"; import { typesContextType } from "../types/typesContext"; import { alertContext } from "./alertContext"; +import { AuthContext } from "./authContext"; //context to share types adn functions from nodes to flow @@ -37,60 +38,55 @@ export function TypesProvider({ children }: { children: ReactNode }) { const [data, setData] = useState({}); const [fetchError, setFetchError] = useState(false); const { setLoading } = useContext(alertContext); + const { getAuthentication } = useContext(AuthContext); useEffect(() => { + if (getAuthentication() === true) { + getTypes(); + } + }, [getAuthentication()]); - setTimeout(() => { - + async function getTypes(): Promise { // We will keep a flag to handle the case where the component is unmounted before the API call resolves. let isMounted = true; - - async function getTypes(): Promise { - try { - const result = await getAll(); - // Make sure to only update the state if the component is still mounted. - if (isMounted && result?.status === 200) { - setLoading(false); - setData(result.data); - setTemplates( - Object.keys(result.data).reduce((acc, curr) => { + try { + const result = await getAll(); + // Make sure to only update the state if the component is still mounted. + if (isMounted && result?.status === 200) { + setLoading(false); + setData(result.data); + setTemplates( + Object.keys(result.data).reduce((acc, curr) => { + Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => { + acc[c] = result.data[curr][c]; + }); + return acc; + }, {}) + ); + // Set the types by reducing over the keys of the result data and updating the accumulator. + setTypes( + // Reverse the keys so the tool world does not overlap + Object.keys(result.data) + .reverse() + .reduce((acc, curr) => { Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => { - acc[c] = result.data[curr][c]; + acc[c] = curr; + // Add the base classes to the accumulator as well. + result.data[curr][c].base_classes?.forEach((b) => { + acc[b] = curr; + }); }); return acc; }, {}) - ); - // Set the types by reducing over the keys of the result data and updating the accumulator. - setTypes( - // Reverse the keys so the tool world does not overlap - Object.keys(result.data) - .reverse() - .reduce((acc, curr) => { - Object.keys(result.data[curr]).forEach( - (c: keyof APIKindType) => { - acc[c] = curr; - // Add the base classes to the accumulator as well. - result.data[curr][c].base_classes?.forEach((b) => { - acc[b] = curr; - }); - } - ); - return acc; - }, {}) - ); - } - } catch (error) { - console.error("An error has occurred while fetching types."); - await getHealth().catch((e) => { - setFetchError(true); - }); + ); } + } catch (error) { + console.error("An error has occurred while fetching types."); + await getHealth().catch((e) => { + setFetchError(true); + }); } - - getTypes(); - }, 2000); - - }, []); + } function deleteNode(idx: string) { reactFlowInstance!.setNodes( diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 0e74670b0..6b11d24ee 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -24,7 +24,7 @@ function ApiInterceptor() { async (error: AxiosError) => { if (error.response?.status === 401) { const refreshToken = cookies.get("refresh_token"); - if (refreshToken) { + if (refreshToken && refreshToken !== "auto") { authenticationErrorCount = authenticationErrorCount + 1; if (authenticationErrorCount > 3) { authenticationErrorCount = 0;