Photo de profile des users

cryptide_project/src/Components/NavBar.tsx

@@ -23,16 +23,31 @@ import './NavBar.css';
 /* Style */
 import { useTheme } from '../Style/ThemeContext';
 import { useAuth } from '../Contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
 
 // @ts-ignore
 function AppNavbar({changeLocale}) {
     const theme = useTheme();
-    const {isLoggedIn, logout} = useAuth();
+    const {user, isLoggedIn, logout} = useAuth();
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        console.log(user)
+    }, [user])
+
+    function navigateToProfile(){
+        navigate("/profile")
+    }
+
+    function navigateToHome(){
+        navigate("/")
+    }
 
     return (
         <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
             <Container>
-                <Navbar.Brand href="/">
+                <Navbar.Brand onClick={navigateToHome}>
                     <img src={logo} alt="logo" className="logo" />
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
@@ -54,7 +69,7 @@ function AppNavbar({changeLocale}) {
                                 align="end"
                                 drop='down-centered'
                             >
-                            <NavDropdown.Item href="/profile">Profil</NavDropdown.Item>
+                            <NavDropdown.Item onClick={navigateToProfile}>Profil</NavDropdown.Item>
                             <LanguageNavItem
                                 countryCode="FR"
                                 languageKey="languageSelector.french"

cryptide_project/src/Components/PlayerItemList.tsx

@@ -31,7 +31,7 @@ const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player, room }) => {
     // const isBot = pdp === Bot;
     let pdp;
     const isBot = player instanceof Bot;
-    isBot ? pdp = BotPDP :  pdp = PersonPDP;
+    isBot ? pdp = BotPDP :  pdp = player.profilePicture;
     
 
     const delBot = () => {

cryptide_project/src/Components/ProfilePDP.tsx

@@ -5,12 +5,11 @@ import defaultImg from '../res/img/Person.png'
 import { useAuth } from '../Contexts/AuthContext';
 
 //@ts-ignore
-const ProfilePDP = ({ player}) => {
+const ProfilePDP = () => {
     const [selectedFile, setSelectedFile] = useState(null);
 
 
     const {user} = useAuth()
-    console.log(user)
     // @ts-ignores
     const handleFileChange = (event) => {
         let file = event.target.files[0];
@@ -24,12 +23,6 @@ const ProfilePDP = ({ player}) => {
         }
     };
 
-    //! gitans ?
-    if (user == null){
-        console.log("duuude");
-    }
-
-    console.log(user)
     return (
         <div className='mainPDPContainer'>
                 {selectedFile ? (

cryptide_project/src/Contexts/AuthContext.tsx

@@ -1,5 +1,7 @@
 // AuthContext.js
 import React, { createContext, useContext, useState, ReactNode } from 'react';
+import DbUserService from '../model/DataManagers/DbUserService';
+import Manager from '../model/DataManagers/Manager';
 import Player from '../model/Player';
 import User from '../model/User';
 import AuthService from '../services/AuthService';
@@ -10,6 +12,7 @@ interface AuthContextProps {
   logout: () => void;
   user: User | null
   setUserData: (newPlayer: User) => void
+  manager: Manager
 }
 
 const AuthContext = createContext<AuthContextProps | undefined>(undefined);
@@ -17,9 +20,12 @@ const AuthContext = createContext<AuthContextProps | undefined>(undefined);
 const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [user, setUser] = useState<User| null>(null)
+  const [manager] = useState<Manager>(new Manager(new DbUserService()))
 
-  const login = () => {
+  const login = async () => {
     setIsLoggedIn(true);
+    const [u, bool] = await manager.userService.fetchUserInformation()
+    setUser(u)
   };
 
   const setUserData = (newPlayer: User) => {
@@ -30,6 +36,8 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
     try {
         await AuthService.logout();
         setIsLoggedIn(false);
+        const [u, bool] = await manager.userService.fetchUserInformation()
+        setUser(u)
     }
     catch (error) {
         console.log(error);
@@ -37,7 +45,7 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   };
 
   return (
-    <AuthContext.Provider value={{ isLoggedIn, login, logout, user, setUserData }}>
+    <AuthContext.Provider value={{ isLoggedIn, login, logout, user, setUserData, manager }}>
       {children}
     </AuthContext.Provider>
   );

cryptide_project/src/Pages/Home.tsx

@@ -11,24 +11,22 @@ import ButtonImgNav from '../Components/ButtonImgNav';
 // @ts-ignore
 function Home() {
     const theme=useTheme();
-    const {isLoggedIn, login} = useAuth();
+    const {isLoggedIn, login, user, setUserData, manager } = useAuth();
 
     useEffect(() => {
-        // Verifie la connexion
-        const verifSession = async () => {
-            try {
-                const sessionData = await SessionService.getSession();
-                if (sessionData.user) {
-                    login();
+
+        if (user == null){
+            manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
+                if (user!=null){
+                    setUserData(user)
+                    if (loggedIn){
+                        login()
+                    }
+                    console.log('isLoggedIn : ', isLoggedIn);
                 }
-            }
-            catch (error) {
-                console.log(error);
-            };
+            })
         }
-
-        verifSession();
-    }, []);
+    }, [isLoggedIn]);
 
     return (
         

cryptide_project/src/Pages/Lobby.tsx

@@ -38,7 +38,7 @@ function Lobby() {
 
     const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
     
-    const {user, setUserData} = useAuth()
+    const {user, setUserData, manager, login} = useAuth()
     let first = true
 
     const params = new URLSearchParams(window.location.search);
@@ -53,45 +53,15 @@ function Lobby() {
             first=false
 
             if (user == null){
-                try {
-                    const sessionData = SessionService.getSession();
-                    sessionData.then((s) => {
-                        if (s.user) {
-                            // Il y a une session on récupère les infos du joueur
-                            const updatedPlayer: User = new User(socket.id, s.user.pseudo, s.user.profilePicture, {
-                                nbGames: s.user.soloStats.nbGames,
-                                bestScore: s.user.soloStats.bestScore,
-                                avgNbTry: s.user.soloStats.avgNbTry,
-                            },
-                            {
-                                nbGames: s.user.onlineStats.nbGames,
-                                nbWins: s.user.onlineStats.nbWins,
-                                ratio: s.user.onlineStats.ratio,
-                            })
-                            setUserData(updatedPlayer);
-                            socket.emit("lobby joined", room, updatedPlayer.toJson())
-                        } else {
-                            // Pas de session on génère un guest random
-                            const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
-                            {
-                                nbGames: 0,
-                                bestScore: 0,
-                                avgNbTry: 0,
-                            },
-                            {
-                                nbGames: 0,
-                                nbWins: 0,
-                                ratio: 0,
-                            })
-                            setUserData(guestPlayer);
-                            socket.emit("lobby joined", room, guestPlayer.toJson())
-
+                manager.userService.fetchUserInformation().then(([u, loggedIn]) => {
+                    if (u!=null){
+                        setUserData(u)
+                        if (loggedIn){
+                            login()
                         }
-                    })
-                }
-                catch (error) {
-                    console.error(error);
-                }
+                        socket.emit("lobby joined", room, u.toJson())
+                    }
+                })
             }
             else{
                 socket.emit("lobby joined", room, user.toJson())

cryptide_project/src/Pages/LoginForm.tsx

@@ -30,11 +30,12 @@ const SignIn = () => {
                 setError(null);
 
                 const result = await AuthService.signIn(data);
+                
                 // console.log(result);
 
                 setShowConfirmation(true);
-                setTimeout(() => {
-                    login();
+                setTimeout(async () => {
+                    await login();
                     navigate('/play');         // 3 secondes avant de rediriger vers la page de connexion
                 }, 3000);
             }

cryptide_project/src/Pages/Play.tsx

@@ -26,56 +26,8 @@ import User from '../model/User';
 
 function Play() {
     const theme=useTheme()
-    const {isLoggedIn, login, user, setUserData } = useAuth();
-
-    useEffect(() => {
-        const fetchUserInformation = async () => {
-            try {
-                const sessionData = await SessionService.getSession();
-                
-                // Vérifie si il y a une session
-                if (sessionData.user) {
-                    // Il y a une session on récupère les infos du joueur
-                    const updatedPlayer: User = new User(socket.id, sessionData.user.pseudo, sessionData.user.profilePicture, {
-                        nbGames: sessionData.user.soloStats.nbGames,
-                        bestScore: sessionData.user.soloStats.bestScore,
-                        avgNbTry: sessionData.user.soloStats.avgNbTry,
-                    },
-                    {
-                        nbGames: sessionData.user.onlineStats.nbGames,
-                        nbWins: sessionData.user.onlineStats.nbWins,
-                        ratio: sessionData.user.onlineStats.ratio,
-                    })
-                    login();
-                    setUserData(updatedPlayer);
-                } else {
-                    // Pas de session on génère un guest random
-                    const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
-                    {
-                        nbGames: 0,
-                        bestScore: 0,
-                        avgNbTry: 0,
-                    },
-                    {
-                        nbGames: 0,
-                        nbWins: 0,
-                        ratio: 0,
-                    })
-                    setUserData(guestPlayer);
-                }
-            } catch (error) {
-                console.error(error);
-            }
-        };
+    const {user} = useAuth();
       
-        console.log('isLoggedIn : ', isLoggedIn);
-        fetchUserInformation();
-    }, [isLoggedIn]);
-      
-
-    useEffect(() => {
-    }, [user])
-
     const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();
 
 
@@ -86,6 +38,10 @@ function Play() {
         socket.emit("lobby created")
     }
 
+    useEffect(() => {
+        console.log(user)
+    }, [user])
+
     function launchMastermind(){
         const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
         setPersonData(choosenPerson)
@@ -99,7 +55,7 @@ function Play() {
 
     useEffect(() => {
         const handleLobbyCreated = (newRoom: any) => {
-        setRoom(newRoom);
+            setRoom(newRoom);
         };
     
         // Ajouter l'event listener
@@ -133,7 +89,7 @@ function Play() {
                     <h2>
                         {user && user.pseudo}
                     </h2>
-                    <img src={Person}
+                    <img src={user?.profilePicture}
                             height='300'
                             width='300'
                             alt="Person"

cryptide_project/src/Pages/Profile.tsx

@@ -19,14 +19,10 @@ const Profile = () => {
   const {user} = useAuth()
 
   //! useeffect pour l'instant, il faudra voir pour changer la facons de prendre une session
-    
-  useEffect(() => {
-    console.log(user)
-  }, [user])
 
   return (
     <div className='mainContainer'>
-      <ProfilePDP player={user}/>
+      <ProfilePDP/>
       <h1> {user?.pseudo} </h1>
     </div>
   );

cryptide_project/src/model/DataManagers/DbUserService.ts

@@ -0,0 +1,49 @@
+import SessionService from "../../services/SessionService";
+import { socket } from "../../SocketConfig";
+import User from "../User";
+import IUserService from "./IUserService";
+
+class DbUserService implements IUserService{
+    async fetchUserInformation(): Promise<[User | null, boolean]> {
+        try {
+            const sessionData = await SessionService.getSession();
+            
+            // Vérifie si il y a une session
+            if (sessionData.user) {
+                // Il y a une session on récupère les infos du joueur
+                const updatedPlayer: User = new User(socket.id, sessionData.user.pseudo, sessionData.user.profilePicture, {
+                    nbGames: sessionData.user.soloStats.nbGames,
+                    bestScore: sessionData.user.soloStats.bestScore,
+                    avgNbTry: sessionData.user.soloStats.avgNbTry,
+                },
+                {
+                    nbGames: sessionData.user.onlineStats.nbGames,
+                    nbWins: sessionData.user.onlineStats.nbWins,
+                    ratio: sessionData.user.onlineStats.ratio,
+                })
+                return [updatedPlayer, true]
+            } else {
+                // Pas de session on génère un guest random
+                const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
+                {
+                    nbGames: 0,
+                    bestScore: 0,
+                    avgNbTry: 0,
+                },
+                {
+                    nbGames: 0,
+                    nbWins: 0,
+                    ratio: 0,
+                })
+                return [guestPlayer, false]
+                
+            }
+        } catch (error) {
+            console.error(error);
+            return [null, false]
+        }
+    }
+
+}
+
+export default DbUserService

cryptide_project/src/model/DataManagers/IUserService.ts

@@ -0,0 +1,9 @@
+import User from "../User";
+
+interface IUserService{
+
+    fetchUserInformation(): Promise<[User | null, boolean]>
+}
+
+
+export default IUserService

cryptide_project/src/model/DataManagers/Manager.ts

@@ -0,0 +1,12 @@
+import IUserService from "./IUserService";
+
+class Manager{
+
+    public userService: IUserService
+
+    constructor(userService: IUserService){
+        this.userService = userService
+    }
+}
+
+export default Manager

cryptide_project/src/model/User.tsx

@@ -6,7 +6,10 @@ class User extends Player{
     public soloStats: any
     public onlineStats: any
 
-    constructor(id: string, pseudo: string, profilePicture: string = defaultpdp, soloStats: any, onlineStats: any){
+    constructor(id: string, pseudo: string, profilePicture: string, soloStats: any, onlineStats: any){
+        if (profilePicture == ""){
+            profilePicture = defaultpdp
+        }
         super(id, pseudo, profilePicture)
         this.soloStats=soloStats
         this.onlineStats=onlineStats