diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 5a80266294d..cb8108001d1 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -5,9 +5,10 @@ import { LANGFLOW_REFRESH_TOKEN, } from "@/constants/constants"; import { useGetUserData } from "@/controllers/API/queries/auth"; +import { useGetGlobalVariablesMutation } from "@/controllers/API/queries/variables/use-get-mutation-global-variables"; import useAuthStore from "@/stores/authStore"; import { createContext, useEffect, useState } from "react"; -import Cookies from "universal-cookie"; +import { Cookies } from "react-cookie"; import { useStoreStore } from "../stores/storeStore"; import { Users } from "../types/api"; import { AuthContextType } from "../types/contexts/auth"; @@ -41,6 +42,7 @@ export function AuthProvider({ children }): React.ReactElement { const setIsAuthenticated = useAuthStore((state) => state.setIsAuthenticated); const { mutate: mutateLoggedUser } = useGetUserData(); + const { mutate: mutateGetGlobalVariables } = useGetGlobalVariablesMutation(); useEffect(() => { const storedAccessToken = cookies.get(LANGFLOW_ACCESS_TOKEN); @@ -86,12 +88,17 @@ export function AuthProvider({ children }): React.ReactElement { setAccessToken(newAccessToken); setIsAuthenticated(true); getUser(); + getGlobalVariables(); } function storeApiKey(apikey: string) { setApiKey(apikey); } + function getGlobalVariables() { + mutateGetGlobalVariables({}); + } + return ( // !! to convert string to boolean state.autoLogin); const setErrorData = useAlertStore((state) => state.setErrorData); - let { accessToken, authenticationErrorCount } = useContext(AuthContext); + const accessToken = useAuthStore((state) => state.accessToken); + const authenticationErrorCount = useAuthStore( + (state) => state.authenticationErrorCount, + ); + const setAuthenticationErrorCount = useAuthStore( + (state) => state.setAuthenticationErrorCount, + ); + const { mutate: mutationLogout } = useLogout(); const { mutate: mutationRenewAccessToken } = useRefreshAccessToken(); const isLoginPage = location.pathname.includes("login"); @@ -149,10 +155,10 @@ function ApiInterceptor() { function checkErrorCount() { if (isLoginPage) return; - authenticationErrorCount = authenticationErrorCount + 1; + setAuthenticationErrorCount(authenticationErrorCount + 1); if (authenticationErrorCount > 3) { - authenticationErrorCount = 0; + setAuthenticationErrorCount(0); mutationLogout(); return false; } @@ -169,9 +175,9 @@ function ApiInterceptor() { } mutationRenewAccessToken(undefined, { onSuccess: async () => { - authenticationErrorCount = 0; + setAuthenticationErrorCount(0); await remakeRequest(error); - authenticationErrorCount = 0; + setAuthenticationErrorCount(0); }, onError: (error) => { console.error(error); diff --git a/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts index 58df288b0a1..00f00b18459 100644 --- a/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts +++ b/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts @@ -1,5 +1,6 @@ import { DEFAULT_FOLDER, STARTER_FOLDER_NAME } from "@/constants/constants"; import { FolderType } from "@/pages/MainPage/entities"; +import useAuthStore from "@/stores/authStore"; import { useFolderStore } from "@/stores/foldersStore"; import { useTypesStore } from "@/stores/typesStore"; import { useQueryFunctionType } from "@/types/api"; @@ -18,7 +19,10 @@ export const useGetFoldersQuery: useQueryFunctionType< const setMyCollectionId = useFolderStore((state) => state.setMyCollectionId); const setFolders = useFolderStore((state) => state.setFolders); + const isAuthenticated = useAuthStore((state) => state.isAuthenticated); + const getFoldersFn = async (): Promise => { + if (!isAuthenticated) return []; const res = await api.get(`${getURL("FOLDERS")}/`); const data = res.data; diff --git a/src/frontend/src/controllers/API/queries/variables/use-get-global-variables.ts b/src/frontend/src/controllers/API/queries/variables/use-get-global-variables.ts index dbb400a3963..431cdec85b2 100644 --- a/src/frontend/src/controllers/API/queries/variables/use-get-global-variables.ts +++ b/src/frontend/src/controllers/API/queries/variables/use-get-global-variables.ts @@ -1,3 +1,4 @@ +import useAuthStore from "@/stores/authStore"; import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables"; import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields"; import { useQueryFunctionType } from "@/types/api"; @@ -20,7 +21,10 @@ export const useGetGlobalVariables: useQueryFunctionType< (state) => state.setUnavailableFields, ); + const isAuthenticated = useAuthStore((state) => state.isAuthenticated); + const getGlobalVariablesFn = async (): Promise => { + if (!isAuthenticated) return []; const res = await api.get(`${getURL("VARIABLES")}/`); setGlobalVariablesEntries(res.data.map((entry) => entry.name)); setUnavailableFields(getUnavailableFields(res.data)); diff --git a/src/frontend/src/controllers/API/queries/variables/use-get-mutation-global-variables.ts b/src/frontend/src/controllers/API/queries/variables/use-get-mutation-global-variables.ts new file mode 100644 index 00000000000..c3cac686c65 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/variables/use-get-mutation-global-variables.ts @@ -0,0 +1,33 @@ +import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables"; +import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields"; +import { useMutationFunctionType } from "@/types/api"; +import { GlobalVariable } from "@/types/global_variables"; +import { UseMutationOptions, UseMutationResult } from "@tanstack/react-query"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +export const useGetGlobalVariablesMutation: useMutationFunctionType< + undefined +> = (options?) => { + const { mutate } = UseRequestProcessor(); + + const setGlobalVariablesEntries = useGlobalVariablesStore( + (state) => state.setGlobalVariablesEntries, + ); + const setUnavailableFields = useGlobalVariablesStore( + (state) => state.setUnavailableFields, + ); + + const getGlobalVariablesFn = async (): Promise => { + const res = await api.get(`${getURL("VARIABLES")}/`); + setGlobalVariablesEntries(res.data.map((entry) => entry.name)); + setUnavailableFields(getUnavailableFields(res.data)); + return res.data; + }; + + const mutation: UseMutationResult = + mutate(["useGetGlobalVariables"], getGlobalVariablesFn, options); + + return mutation; +}; diff --git a/src/frontend/src/stores/authStore.ts b/src/frontend/src/stores/authStore.ts index a588ed4c0a2..40282c6742e 100644 --- a/src/frontend/src/stores/authStore.ts +++ b/src/frontend/src/stores/authStore.ts @@ -1,7 +1,7 @@ // authStore.js import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants"; import { AuthStoreType } from "@/types/zustand/auth"; -import Cookies from "universal-cookie"; +import { Cookies } from "react-cookie"; import { create } from "zustand"; const cookies = new Cookies();