Global State Added, Logout Fixed

webapp/package.json

@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^3.5.1"
+    "web-vitals": "^3.5.1",
+    "zustand": "^4.5.2"
   },
   "scripts": {
     "start": "react-scripts start",

webapp/src/App.tsx

@@ -1,18 +1,24 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import Game from './components/Game/Game';
-import { isLogged } from './services/auth-service';
+import { loginWithToken } from './services/auth-service';
 import Authentication from './components/auth/Authentication';
-
-
-
+import { useUserStore } from './stores/user-store';
 
 function App() {
-  const [isLoggedState, setIsLoggedState] = useState(isLogged());
+
+  const user = useUserStore(state => state.user);
+
+  useEffect(() => {
+    loginWithToken();
+  }, []);
 
-  if (!isLoggedState) {
-    return <Authentication setIsLoggedState={setIsLoggedState}/>
+  if (user == null) {
+    return <Authentication/>
+  }
+  else {
+    return <Game />
   }
-  return <Game />
+
 }
 
 export default App;

webapp/src/components/Game/Game.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Question from "./Question";
 import NextQuestion from "./NextQuestion";
 import AnswerPanel from "./AnswerPanel";
-import { logout } from "../../services/auth-service";
+import { logout, getUsername } from "../../services/auth-service";
 
 export default function Game() {
     const [answered, setAnswered] = useState(false);
@@ -30,7 +30,10 @@ export default function Game() {
 
   return (
     <div id='mainContainer' className='flex flex-col  h-screen '>
-      <div> <button onClick={() => logout()}>logout</button></div>
+      <div className="flex justify-between"> 
+        <h1> {getUsername()}</h1>
+        <button onClick={() => logout()}>logout</button>
+      </div>
       <div id='pregunta' className='bg-purple-400 h-1/2 border-4 border-purple-700 flex-1'>
         <div className="flex justify-between">
         <text className='text-white text-2xl p-8'> Score: {score} </text>

webapp/src/components/auth/Authentication.tsx

@@ -2,11 +2,8 @@ import React, { useState } from "react";
 import AddUser from "./AddUser";
 import Login from "./Login";
 
-type props = {
-  setIsLoggedState: (isLogged: boolean) => void;
-}
 
-const Authentication = (props : props) => {
+const Authentication = () => {
   const [showLogin, setShowLogin] = useState(true);
 
 
@@ -18,7 +15,7 @@ const Authentication = (props : props) => {
 
     <div className="container mx-auto">
 
-      {showLogin ? <Login setIsLoggedState={props.setIsLoggedState} /> : <AddUser />}
+      {showLogin ? <Login /> : <AddUser />}
       <div className="text-center mt-8">
         {showLogin ? (
           <button

webapp/src/components/auth/Login.tsx

@@ -2,12 +2,9 @@
 import React, { useState } from 'react';
 import {login} from '../../services/auth-service';
 
-type props = {
-  setIsLoggedState: (isLogged: boolean) => void;
-}
 
 
-const Login = (props:props) => {
+const Login = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -17,8 +14,6 @@ const Login = (props:props) => {
     const response = await login(username, password);
     if (!response) {
       setError("No funca el login");
-    } else {
-      props.setIsLoggedState(true);
     }
 
   }

webapp/src/services/auth-service.ts

@@ -1,21 +1,30 @@
 import axios from 'axios';
 import { jwtDecode } from "jwt-decode"; 
+import { useUserStore } from '../stores/user-store';
 
 const API_URL = 'http://localhost:8002';
 
-type JwtPayload = {
+export type JwtPayload = {
   username: string;
   userEmail: string;
   questions_answered: number;
   correctly_answered_questions: number;
 };
 
+export const loginWithToken = () => {
+  const tokenInfo = getTokenInfo();
+  if(tokenInfo) {
+    useUserStore.getState().setUser(tokenInfo);
+  }
+}
+
 export const login = async (username: string, password: string)=> {
   try {
     const response = await axios.post(`${API_URL}/login`, { username, password });
     const token = response.data.token;
     console.log('token:', token);
     localStorage.setItem('token', token); // store the token in local storage
+    loginWithToken();
     return true;
   } catch (error) {
     console.error('Error during login:', error);
@@ -41,7 +50,8 @@ export const isLogged = () => {
 };
 
 export const logout = () => {
-  localStorage.removeItem('token'); 
+  localStorage.removeItem('token');
+  useUserStore.getState().logout();
 };
 
 export const getTokenInfo = (): JwtPayload | null => {

webapp/src/stores/user-store.ts

@@ -0,0 +1,16 @@
+
+import {create} from 'zustand';
+import { JwtPayload } from '../services/auth-service';
+
+interface UserState {
+    user: JwtPayload | null,
+    setUser: (user : JwtPayload) => void,
+    logout: () => void,
+  }
+
+
+export const useUserStore = create<UserState>((set) => ({
+    user: null,
+    setUser: (user) => set({user}),
+    logout: () => set({user:null})
+  }));