jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
✨ 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
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-25 19:50:38 -03:00
commit 9509edb66d
6 changed files with 67 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/frontend/src/App.tsx
View file

@ -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">

44
src/frontend/src/contexts/authContext.tsx
View file

@ -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 [refreshToken, setRefreshToken] = useState<string | null>(cookies.get("refresh_token"));
const [accessToken, setAccessToken] = useState<string | null>(
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");

46
src/frontend/src/contexts/index.tsx
View file

@ -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>
<AuthProvider>
<TooltipProvider>
<ReactFlowProvider>
<DarkProvider>
<TypesProvider>
<LocationProvider>
<AlertProvider>
<ApiInterceptor />
<SSEProvider>
<TabsProvider>
<UndoRedoProvider>{children}</UndoRedoProvider>
</TabsProvider>
</SSEProvider>
</AlertProvider>
</LocationProvider>
</TypesProvider>
</DarkProvider>
</ReactFlowProvider>
</TooltipProvider>
</AuthProvider>
<BrowserRouter>
<AlertProvider>
<AuthProvider>
<TooltipProvider>
<ReactFlowProvider>
<DarkProvider>
<TypesProvider>
<LocationProvider>
<ApiInterceptor />
<SSEProvider>
<TabsProvider>
<UndoRedoProvider>{children}</UndoRedoProvider>
</TabsProvider>
</SSEProvider>
</LocationProvider>
</TypesProvider>
</DarkProvider>
</ReactFlowProvider>
</TooltipProvider>
</AuthProvider>
</AlertProvider>
</BrowserRouter>
</>
);

1
src/frontend/src/contexts/tabsContext.tsx
View file

@ -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

1
src/frontend/src/contexts/typesContext.tsx
View file

@ -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();
}

4
src/frontend/src/routes.tsx
View file

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