From fcf2152cd6fa448c75bf708c4ff97a6ad341d482 Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Mon, 27 Nov 2023 08:09:11 +0100 Subject: [PATCH] Photo de profile des users --- cryptide_project/src/Components/NavBar.tsx | 21 ++++++- .../src/Components/PlayerItemList.tsx | 2 +- .../src/Components/ProfilePDP.tsx | 9 +-- cryptide_project/src/Contexts/AuthContext.tsx | 12 +++- cryptide_project/src/Pages/Home.tsx | 26 ++++----- cryptide_project/src/Pages/Lobby.tsx | 48 +++------------ cryptide_project/src/Pages/LoginForm.tsx | 5 +- cryptide_project/src/Pages/Play.tsx | 58 +++---------------- cryptide_project/src/Pages/Profile.tsx | 6 +- .../src/model/DataManagers/DbUserService.ts | 49 ++++++++++++++++ .../src/model/DataManagers/IUserService.ts | 9 +++ .../src/model/DataManagers/Manager.ts | 12 ++++ cryptide_project/src/model/User.tsx | 5 +- 13 files changed, 136 insertions(+), 126 deletions(-) create mode 100644 cryptide_project/src/model/DataManagers/DbUserService.ts create mode 100644 cryptide_project/src/model/DataManagers/IUserService.ts create mode 100644 cryptide_project/src/model/DataManagers/Manager.ts diff --git a/cryptide_project/src/Components/NavBar.tsx b/cryptide_project/src/Components/NavBar.tsx index 4500c85..3118e17 100644 --- a/cryptide_project/src/Components/NavBar.tsx +++ b/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 ( - + logo @@ -54,7 +69,7 @@ function AppNavbar({changeLocale}) { align="end" drop='down-centered' > - Profil + Profil =({ 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 = () => { diff --git a/cryptide_project/src/Components/ProfilePDP.tsx b/cryptide_project/src/Components/ProfilePDP.tsx index 1b50d55..7395740 100644 --- a/cryptide_project/src/Components/ProfilePDP.tsx +++ b/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 (
{selectedFile ? ( diff --git a/cryptide_project/src/Contexts/AuthContext.tsx b/cryptide_project/src/Contexts/AuthContext.tsx index 7e27f05..e0f6f1a 100644 --- a/cryptide_project/src/Contexts/AuthContext.tsx +++ b/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(undefined); @@ -17,9 +20,12 @@ const AuthContext = createContext(undefined); const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [user, setUser] = useState(null) + const [manager] = useState(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 ( - + {children} ); diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx index 249099c..1c16b9e 100644 --- a/cryptide_project/src/Pages/Home.tsx +++ b/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 ( diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 5f86ed5..5c4b5df 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/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()) diff --git a/cryptide_project/src/Pages/LoginForm.tsx b/cryptide_project/src/Pages/LoginForm.tsx index 0c56b55..9800f65 100644 --- a/cryptide_project/src/Pages/LoginForm.tsx +++ b/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); } diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index 38648f3..dcc9361 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/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() {

{user && user.pseudo}

- Person { const {user} = useAuth() //! useeffect pour l'instant, il faudra voir pour changer la facons de prendre une session - - useEffect(() => { - console.log(user) - }, [user]) return (
- +

{user?.pseudo}

); diff --git a/cryptide_project/src/model/DataManagers/DbUserService.ts b/cryptide_project/src/model/DataManagers/DbUserService.ts new file mode 100644 index 0000000..49dded6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/cryptide_project/src/model/DataManagers/IUserService.ts b/cryptide_project/src/model/DataManagers/IUserService.ts new file mode 100644 index 0000000..5eb0f43 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/cryptide_project/src/model/DataManagers/Manager.ts b/cryptide_project/src/model/DataManagers/Manager.ts new file mode 100644 index 0000000..a6caeb6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/cryptide_project/src/model/User.tsx b/cryptide_project/src/model/User.tsx index 6f61a1d..66573d8 100644 --- a/cryptide_project/src/model/User.tsx +++ b/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