global state with context api

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<AuthContextData>({
+    authenticated: false
+  });
+
   return (
+    <AuthContext.Provider value={{authContextData, setAuthContextData}}>
     <Routes />
+    </AuthContext.Provider>
   );
 }
 

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<AuthContextType>({
+    authContextData: {
+        authenticated: false
+    },
+    setAuthContextData: () => null
+});

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<AuthData>({ 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<HTMLAnchorElement>) => {
     event.preventDefault();
     removeAuthData();
-    setAuthData({
+    setAuthContextData({
       authenticated: false,
     });
     history.replace('/');
@@ -79,9 +75,9 @@ const Navbar = () => {
         </div>
 
         <div className='nav-login-logout'>
-          {authData.authenticated ? (
+          {authContextData.authenticated ? (
             <>
-              <span className='nav-username'>{authData.tokenData?.user_name}</span>
+              <span className='nav-username'>{authContextData.tokenData?.user_name}</span>
               <Link to="#logout" onClick={handleLogoutClick}>
                 LOGOUT
               </Link>

frontend/src/pages/Admin/Auth/Login/index.tsx

@@ -2,26 +2,29 @@ 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;
   password: string;
 };
 
 const Login = () => {
+  const {setAuthContextData} = useContext(AuthContext)
   const [hasError, setHasError] = useState(false);
   const { register, handleSubmit, formState: {errors} } = useForm<FormData>();
   const history = useHistory();
   const onSubmit = (formData: FormData) => {
     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) => {