diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9b514d5..9eb4bae 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,10 +2,19 @@ import 'assets/styles/custom.scss'; import './App.css'; import Routes from 'Routes'; +import { useState } from 'react'; +import { AuthContext, AuthContextData } from 'AuthContext'; function App() { + + const [authContextData, setAuthContextData] = useState({ + authenticated: false + }); + return ( + + ); } diff --git a/frontend/src/AuthContext.ts b/frontend/src/AuthContext.ts new file mode 100644 index 0000000..ec1f711 --- /dev/null +++ b/frontend/src/AuthContext.ts @@ -0,0 +1,19 @@ +import { createContext } from "react"; +import { TokenData } from "util/requests"; + +export type AuthContextData = { + authenticated: boolean; + tokenData?: TokenData; + }; + +export type AuthContextType = { + authContextData: AuthContextData; + setAuthContextData: (authContextData: AuthContextData) => void; +}; + +export const AuthContext = createContext({ + authContextData: { + authenticated: false + }, + setAuthContextData: () => null +}); \ No newline at end of file diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx index d1d19c8..551ef30 100644 --- a/frontend/src/components/Navbar/index.tsx +++ b/frontend/src/components/Navbar/index.tsx @@ -1,41 +1,37 @@ +import { AuthContext } from 'AuthContext'; import './styles.css'; import 'bootstrap/js/src/collapse.js'; -import { useEffect, useState } from 'react'; +import { useContext, useEffect } from 'react'; import { Link, NavLink } from 'react-router-dom'; import history from 'util/history'; import { - TokenData, getTokenData, isAuthenticated, removeAuthData, } from 'util/requests'; -type AuthData = { - authenticated: boolean; - tokenData?: TokenData; -}; - const Navbar = () => { - const [authData, setAuthData] = useState({ authenticated: false }); + + const {authContextData, setAuthContextData} = useContext(AuthContext) useEffect(() => { if (isAuthenticated()) { - setAuthData({ + setAuthContextData({ authenticated: true, tokenData: getTokenData(), }); } else { - setAuthData({ + setAuthContextData({ authenticated: false, }); } - }, []); + }, [setAuthContextData]); const handleLogoutClick = (event: React.MouseEvent) => { event.preventDefault(); removeAuthData(); - setAuthData({ + setAuthContextData({ authenticated: false, }); history.replace('/'); @@ -79,9 +75,9 @@ const Navbar = () => {
- {authData.authenticated ? ( + {authContextData.authenticated ? ( <> - {authData.tokenData?.user_name} + {authContextData.tokenData?.user_name} LOGOUT diff --git a/frontend/src/pages/Admin/Auth/Login/index.tsx b/frontend/src/pages/Admin/Auth/Login/index.tsx index dc0a998..6aa1ea0 100644 --- a/frontend/src/pages/Admin/Auth/Login/index.tsx +++ b/frontend/src/pages/Admin/Auth/Login/index.tsx @@ -2,8 +2,9 @@ import { Link, useHistory } from 'react-router-dom'; import ButtonIcon from 'components/ButtonIcon'; import { useForm } from 'react-hook-form'; import './styles.css'; -import { getAuthData, requestBackendLogin, saveAuthData } from 'util/requests'; -import { useState } from 'react'; +import { getTokenData, requestBackendLogin, saveAuthData } from 'util/requests'; +import { useContext, useState } from 'react'; +import { AuthContext } from 'AuthContext'; type FormData = { username: string; @@ -11,6 +12,7 @@ type FormData = { }; const Login = () => { + const {setAuthContextData} = useContext(AuthContext) const [hasError, setHasError] = useState(false); const { register, handleSubmit, formState: {errors} } = useForm(); const history = useHistory(); @@ -18,10 +20,11 @@ const Login = () => { requestBackendLogin(formData) .then((response) => { saveAuthData(response.data) - const token = getAuthData().access_token - console.log('TOKEN gerado: ' + token) setHasError(false); - console.log('SUCESSO', response); + setAuthContextData({ + authenticated: true, + tokenData: getTokenData() + }) history.push('/admin'); }) .catch((error) => {