From ad10c2352875d02a8a6b555b2df9fa42e7c763ef Mon Sep 17 00:00:00 2001
From: Alexandre POMMIER <apommier@paul-f4Ar4s3.clusters.42paris.fr>
Date: Mon, 26 Jun 2023 11:38:22 +0200
Subject: [PATCH 1/3] clean all

---
 containers/react/.env                         |  10 +-
 containers/react/src/components/Footer.tsx    |   1 -
 containers/react/src/components/Header.tsx    |  17 +-
 .../react/src/components/Profile/EditName.tsx |  39 -----
 .../react/src/components/Profile/Logout.tsx   |   4 -
 .../react/src/components/Profile/Win_Loss.tsx |  85 +---------
 .../react/src/components/Sidebar/Backdrop.tsx |   2 +-
 containers/react/src/pages/2fa.tsx            |   1 -
 containers/react/src/pages/Field.tsx          |  14 +-
 containers/react/src/pages/Home.tsx           |   5 +-
 containers/react/src/pages/LoginButton.tsx    |   1 -
 containers/react/src/pages/canvas.tsx         |  57 -------
 containers/react/src/script/axiosApi.tsx      |  11 --
 containers/react/src/script/login.tsx         |  13 --
 containers/react/src/script/login42.tsx       |   7 -
 containers/react/src/script/tokenSuccess.tsx  | 153 +-----------------
 16 files changed, 15 insertions(+), 405 deletions(-)
 delete mode 100644 containers/react/src/script/login.tsx
 delete mode 100644 containers/react/src/script/login42.tsx

diff --git a/containers/react/.env b/containers/react/.env
index 4cac2361..7c5716f6 100644
--- a/containers/react/.env
+++ b/containers/react/.env
@@ -1,14 +1,14 @@
 
-REACT_APP_BASE_URL=localhost:8080
-REACT_APP_SOCKET_URL=localhost
+REACT_APP_BASE_URL=paul-f4Ar4s3:8080
+REACT_APP_SOCKET_URL=paul-f4Ar4s3
 
-REACT_APP_API_SECRET=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
-REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
+REACT_APP_API_SECRET=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
+REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
 
 
 # REACT_APP_BASE_URL=92.143.191.152
 # REACT_APP_BASE_URL=192.168.1.19
-REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
+REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fpaul-f4Ar4s3%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
 
 # REACT_APP_BASE_URL=92.143.191.152
 # REACT_APP_BASE_URL=192.168.1.19
diff --git a/containers/react/src/components/Footer.tsx b/containers/react/src/components/Footer.tsx
index 73f4fbb0..87bec15c 100644
--- a/containers/react/src/components/Footer.tsx
+++ b/containers/react/src/components/Footer.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-// import './Header.scss';
 
 function Footer() {
   return (
diff --git a/containers/react/src/components/Header.tsx b/containers/react/src/components/Header.tsx
index 57ec2d1d..e1270a60 100644
--- a/containers/react/src/components/Header.tsx
+++ b/containers/react/src/components/Header.tsx
@@ -4,23 +4,13 @@ import {Link} from 'react-router-dom';
 import DefaultPicture from '../assets/profile.jpg'
 import { motion, AnimatePresence } from 'framer-motion'
 import Modal from './Sidebar/Modal.tsx';
-import YellowAlert from './Alert/YellowAlert.tsx';
 import '../styles/Header.css';
-
 import api from '../script/axiosApi.tsx';
 
-import { MdQrCodeScanner } from 'react-icons/md';
-import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
-
 function Header() {
-	// const [sidebar, setSidebar] = useState(false);
-	// const showSidebar = () => setSidebar(!sidebar);
 	const [modalOpen, setModalOpen] = useState(false);
 	const close = () => setModalOpen(false);
-	const open = () => setModalOpen(true);
-
-	const [success, setSuccess] = useState([]);
-	
+	const open = () => setModalOpen(true);	
 	const [profilePicture, setProfilePicture] = useState('');
 
 	useEffect(() => {
@@ -29,9 +19,6 @@ function Header() {
 			const user = await api.get("/profile");
 			const pic = await api.post("/getPicture", {username: user.data.username})
         	setProfilePicture(pic.data);
-			// console.log("test ===", user.data)
-			setSuccess(user.data);
-			// console.log(`profile pic222= ${pic.data}`)
 		  } catch (error) {
 			console.error('Error fetching profile picture:', error);
 		  }
@@ -54,9 +41,7 @@ function Header() {
 			<div>
 				
  				{profilePicture ? (
- 				    // <img className='Header-pic' src={profilePicture} alt="Profile Picture" />
 					 <img className='Header-pic' src={`data:image/jpeg;base64,${profilePicture}`} />
-					// <img className='Header-pic' src={`data:image/jpeg;base64,${profilePicture.data}`} alt="Profile Picture" />
  				) : (
  				    <img className='Header-pic' src={DefaultPicture} alt="Default Profile Picture" />
  				)}
diff --git a/containers/react/src/components/Profile/EditName.tsx b/containers/react/src/components/Profile/EditName.tsx
index 1f71ba55..e1cc0596 100644
--- a/containers/react/src/components/Profile/EditName.tsx
+++ b/containers/react/src/components/Profile/EditName.tsx
@@ -1,7 +1,4 @@
 import { AnimatePresence, motion } from "framer-motion"
-// import Backdrop from "../Sidebar/Backdrop"
-import { Link } from 'react-router-dom';
-// import { UserProfile } from "../../DataBase/DataUserProfile";
 import { useState } from 'react';
 import "../../styles/Profile.css"
 
@@ -21,14 +18,7 @@ const dropIn = {
 	},
 }
 
-// const changeName = ({handleclose, name}) => {
-// 	return (
-// 		UserProfile.UserName = name
-// 	)
-// }
-
 const ModalEdit = () => {
-	// let new_name = "";
 	const [nickname, setNickname] = useState("");
 	const [errTaken, setErrTaken] = useState(false);
 	const closeTaken = () => setErrTaken(false);
@@ -37,56 +27,28 @@ const ModalEdit = () => {
 
 	const handler = (e: { target: { value: React.SetStateAction<string>; }; }) => {
 		setNickname(e.target.value);
-		console.log("testeeeee")
-		const postNickname = async () => {
-			// try{
-			// 	await api.post("/nickname", {nickname: nickname})
-			// 	// setUser(tmpUser.data);
-			// 	// setIsLoading(false)
-			// }
-			// catch(err){
-			// 	console.log(err);
-			// }
-		};
-		postNickname();
 	}
 
 	const handlePostNickname = async () => {
 		console.log("nickname=", nickname)
 		try {
-			// console.log("cest ici = ",ret);
-			// if (!ret)
-			// console.log("test ret =", ret.data);
 			if (nickname.length > 3) {
 				const ret = await api.post("/nickname", { nickname: nickname });
 				if (ret.data) {
-					console.log("ici error = ", ret.data);
 					window.location.reload();
 				}
 				else {
-					console.log("nickname already set = ", ret.data);
-	
 					setErrTaken(true);
 				}
 			}
 			else if (nickname.length < 3)
-			{
 				setErrTooShort(true);
-			}
-
-
-			// setUser(tmpUser.data);
-			// setIsLoading(false)
 		}
 		catch (err) {
 			console.log(err);
 		}
 	}
 
-
-	// function handleClose(){
-	// 	//do nothing
-	// }
 	return (
 		<motion.div
 			className="modal"
@@ -99,7 +61,6 @@ const ModalEdit = () => {
 			<div>
 				<div className="button" onClick={handlePostNickname}>
 					change
-					{/* <Link className="button" to={""}>change</Link> */}
 				</div>
 				<AnimatePresence initial={false} onExitComplete={() => null}>
 				{
diff --git a/containers/react/src/components/Profile/Logout.tsx b/containers/react/src/components/Profile/Logout.tsx
index 25fcbd16..0d11e712 100644
--- a/containers/react/src/components/Profile/Logout.tsx
+++ b/containers/react/src/components/Profile/Logout.tsx
@@ -16,10 +16,6 @@ function Logout(){
 	logout();
 	localStorage.clear();
 	const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
-	// history(path, { replace: true });
-	// window.location.replace(path);
-	// window.history.pushState({}, '', path);
-
 	window.history.pushState({}, '', path);
 	window.location.reload();
 	return (<></>)
diff --git a/containers/react/src/components/Profile/Win_Loss.tsx b/containers/react/src/components/Profile/Win_Loss.tsx
index 353b660c..7b298225 100644
--- a/containers/react/src/components/Profile/Win_Loss.tsx
+++ b/containers/react/src/components/Profile/Win_Loss.tsx
@@ -1,50 +1,5 @@
-// import PropTypes from "prop-types"
-// import styled from 'styled-components';
-// import '../DataBase/DummyDBWinLoss.js'
-// import '../DataBase/DataProfileUser.js'
-// import { DBWinLoss } from '../../DataBase/DummyDBWinLoss.js';
 import '../../styles/Win_Loss.css'
-import { User, Matchlog } from "../../../interfaces.tsx"
-// import { UserProfile } from '../../DataBase/DataUserProfile';
-// import color from '../../utils/style/color.js';
-
-
-
-// const CardWrapper = styled.div`
-//         display: flex;
-//         flex-direction: column;
-//         padding: 15px;
-//         background-color: black;
-//         border-radius: 30px;
-//         width: 350px;
-//         transition: 200ms;
-// 		margin-top: 50px;
-//         &:hover {
-//             cursor: pointer;
-//             box-shadow: 2px 2px 10px #b6b6b6;
-//         }
-// `
-
-// const CardLabel1 = styled.h1`
-//     color: #5843e4;
-//     // font-size: 22px;
-//     font-weight: bold;
-// 	margin-bottom: 25px;
-// `
-// const CardLabel2 = styled.span`
-// 	color: #5843e4;
-//     font-size: 22px;
-//     font-weight: bold;
-// 	display: flex;
-// 	flex-direction: column;
-// `
-
-// const CardImage = styled.img`
-//     heigh: 80px;
-//     width: 80px;
-//     border-radius: 50%;
-// `
-  
+import { User, Matchlog } from "../../../interfaces.tsx"  
 import React, { useState, useEffect, useRef } from "react";
 import { useParams } from 'react-router-dom';
 import api from '../../script/axiosApi.tsx';
@@ -61,7 +16,6 @@ function WinLoss() {
 	useEffect(()=> {
 		const getUser = async ()=>{
 			try{
-				// const tmpUser = await api.get("/profile")
 				console.log("username win loss=", username)
 				let tmpUser;
 				let tmpHistory;
@@ -87,23 +41,10 @@ function WinLoss() {
 		getUser();
 	}, [])
 
-	// console.log(`user= ${user.children}`)
-
     return (
-
-// 		<div>
-// 		{isLoading ? (
-// 			<h1>Loading...</h1>
-// 		  ) : (
-// 			<h1>{user.username}</h1>	
-// 		  )}
-//   	</div>
-
-
         <div className='tab'>
 		{isLoading || !history || !user ? (
 			<h1>Loading...</h1>
-			// <span>Loading...</span>
 		  ) : (
 			  <div className='scroll'>
 				 <h2 className='title'>Match history {user.win}/{user.loss}</h2>
@@ -111,41 +52,17 @@ function WinLoss() {
                     return (
                         <div key={index} className='elements'>
                         <li key={index}>
-                                {/* <h4 className='content'>{c.id}</h4> */}
                                 <div className='content2nd'>
                                     <h4 className='me'>{user.username}</h4>  <h4 className='score'>{c.myScore} - {c.opScore} </h4>  <h4 className="opponent">{c.opponent}</h4>
                                 </div>
-                                {/* <h4 className='content'>{c.openent}</h4> */}
                             </li>
                         </div>
                         )
                     })}
             </div>
-
-
-			
-		// 	<div>
-		// 	<h1>User: {user.name}</h1>
-		// 	<div>
-		// 	  <h2>Children:</h2>
-		// 	  {history.map((child) => (
-		// 		<div key={child.id}>
-		// 		  <p>Child ID: {child.id}</p>
-		// 		  <p>Child Name: {child.name}</p>
-		// 		  {/* Render other child properties as needed */}
-		// 		</div>
-		// 	  ))}
-		// 	</div>
-		//   </div>
 		)}
         </div>
     )
 }
-
-// Card.propTypes = {
-//     label: PropTypes.string,
-//     title: PropTypes.string.isRequired,
-//     picture: PropTypes.string,
-// }
  
 export default WinLoss
\ No newline at end of file
diff --git a/containers/react/src/components/Sidebar/Backdrop.tsx b/containers/react/src/components/Sidebar/Backdrop.tsx
index b19352e0..622f3bd4 100644
--- a/containers/react/src/components/Sidebar/Backdrop.tsx
+++ b/containers/react/src/components/Sidebar/Backdrop.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, ReactNode, HTMLAttributes } from "react";
+import React, { ReactNode } from "react";
 import { motion } from "framer-motion"
 import "../../styles/Header.css"
 
diff --git a/containers/react/src/pages/2fa.tsx b/containers/react/src/pages/2fa.tsx
index 880731c4..0356720e 100644
--- a/containers/react/src/pages/2fa.tsx
+++ b/containers/react/src/pages/2fa.tsx
@@ -3,7 +3,6 @@ import api from '../script/axiosApi.tsx';
 
 
 const DoubleAuth = () => {
-	// const [imageSrc, setImageSrc] = useState('');
 	const [imageSrc, setImageSrc] = useState<string | ArrayBuffer | null>('');
 
 	useEffect(() => {
diff --git a/containers/react/src/pages/Field.tsx b/containers/react/src/pages/Field.tsx
index 7d70b019..bd242261 100644
--- a/containers/react/src/pages/Field.tsx
+++ b/containers/react/src/pages/Field.tsx
@@ -16,7 +16,6 @@ function Field()
 	useEffect(() => {
 		const queryParams = queryString.parse(window.location.search);
 		
-		console.log("launch canva hehe")
 		let Modifiers = 0;
 		let info: GameProps;
 
@@ -38,19 +37,16 @@ function Field()
 		}
 		if (queryParams.username)
 		{
-				console.log("user= ", queryParams.username)
-				info = {
-					privateParty: true,
-					username: queryParams.username as string,
-					gameId: queryParams.gameId as unknown as number
-				}
-			console.log("info of param vefore canvas=", info)
+			info = {
+				privateParty: true,
+				username: queryParams.username as string,
+				gameId: queryParams.gameId as unknown as number
+			}
 		}
 
 		const cleanup = DrawCanvas(Modifiers, info);
 	
 		return () => {
-		  console.log("Cleanup");
 			if (cleanup)
 				cleanup();
 		};
diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx
index 1b81daa0..82dc185e 100644
--- a/containers/react/src/pages/Home.tsx
+++ b/containers/react/src/pages/Home.tsx
@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/26 07:06:35 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/26 11:31:57 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -41,14 +41,11 @@ function Profile () {
 	const [profilePicture, setProfilePicture] = useState('');
 	const handleFileChange = async (event: { target: { files: any; }; }) => {
 		  const photo = (event.target.files[0]);
-		  console.log("file selected")
 		  if (photo) {
-			console.log("selected photo")
 			  const formData = new FormData();
 			  formData.append('photo', photo);
 			  try {
 				await api.post('/picture', formData);
-				console.log('File uploaded successfully');
 				window.location.reload();
 			  } catch (error) {
 				setError(true);
diff --git a/containers/react/src/pages/LoginButton.tsx b/containers/react/src/pages/LoginButton.tsx
index 46314d92..d6a08dcf 100644
--- a/containers/react/src/pages/LoginButton.tsx
+++ b/containers/react/src/pages/LoginButton.tsx
@@ -6,7 +6,6 @@ function HomeLogin()
 {
 	const handleButtonClick = () => {
 		const token = localStorage.getItem('token')
-		console.log(`token type= ${typeof token}`);
 		if (token !== null && typeof token === 'string')
 			return ;
 		let path = process.env.REACT_APP_INTRA_URL || "";
diff --git a/containers/react/src/pages/canvas.tsx b/containers/react/src/pages/canvas.tsx
index e53f1f92..d60eb414 100644
--- a/containers/react/src/pages/canvas.tsx
+++ b/containers/react/src/pages/canvas.tsx
@@ -38,23 +38,13 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 	function launchGame()
 	{
 		if (!gameParam.privateParty)
-		{
-			console.log("laucnh matchmaking")
 			matchmaking();
-		}
 		else if (!gameParam.gameId)
-		{
-			console.log("laucnh private")
 			privateParty();
-		}
 		else
-		{
-			console.log("join private")
 			joinPrivateParty();
-		}
 	}
 	
-	console.log("start function");
 	const canvas = document.getElementById('myCanvas') as HTMLCanvasElement | null;
 	if (!canvas)
 		return ;
@@ -131,13 +121,9 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 
 socket.on('pong:win', async () => {
 	myScore = maxScore;
-	console.log("instant win opponent disconnect")
-	console.log("after request1")
 	await api.post('/status', {status: 1});
-	console.log("after request2")
 	running = false;
 	socket.emit('pong:disconnect', {id: myId});
-	console.log("before reload")
 	return ;
 
 });
@@ -152,19 +138,13 @@ socket.on('pong:privateId', async (data) => {
 });
 
 socket.on('pong:gameId', async (data) => {
-	console.log("gameId received");
 	gameId = data.gameId;
-	console.log("gameid = ", gameId);
-	console.log("data gameid = ", data);
-  
 	try {
 	  let response = await api.get('/profile');
 	  const myName = response.data.username;
 	  response = await api.get('/rank');
 	  await api.post('/status', {status: 2});
 	  opRank = response.data
-	  console.log(`rank= ${opRank}`);
-	  console.log(`myname= ${myName}`);
 
 	  const info = {
 		id: myId,
@@ -173,18 +153,11 @@ socket.on('pong:gameId', async (data) => {
 		rank: opRank,
 	  };
   
-	  console.log("emit to name");
 	  socket.emit('pong:name', info);
 	  if (data.id === myId)
-	  {
-		console.log("myId= true")
 	  	vX = 0.0005;
-	  }
 	  else
-	  {
-		console.log("myId= false")
 	  	vX = -0.0005;
-	  }
 	} catch (error) {
 	  console.log(error);
 	  return;
@@ -193,7 +166,6 @@ socket.on('pong:gameId', async (data) => {
 
 socket.on('pong:name', (data) => {
 	opName = data.name;
-	console.log(`opponent Name= ${opName}`)
 });
 
 socket.on('connect', () => {
@@ -201,9 +173,7 @@ socket.on('connect', () => {
 });
 
 socket.on('pong:clientId', (data) => {
-	console.log("receive id")
 	myId = data;
-	console.log(`id is= ${myId}`)
 	launchGame();
 });
 
@@ -217,12 +187,10 @@ socket.on('pong:info', (data) => {
 });
 
 socket.on('pong:paddle', (data) => {
-	console.log("paddle info receive")
 	oPaddleY = (data.paddleY / data.height) * canvas.height
 });
 
 socket.on('pong:power', (data) => {
-	console.log("paddle info receive")
 	
 	oPaddleY = 0;
 	opPaddleHeight = canvas.height;
@@ -230,12 +198,10 @@ socket.on('pong:power', (data) => {
 	setTimeout(() => {
 		opPaddleHeight = canvas.height * 0.25;
 		oPaddleY = canvas.height / 2 - paddleHeight / 2;
-		console.log('Cinq secondes se sont écoulées.');
 	}, 5000);
 });
 
 socket.on('pong:point', (data) => {
-	console.log("gain point");
 	myScore = data.point;
 	vX = -0.0005;
 	vY = 0;
@@ -244,7 +210,6 @@ socket.on('pong:point', (data) => {
 });
 
 socket.on('pong:hisPoint', (data) => {
-	console.log("myPointawdawdawdawd point");
 	hisScore = data.point;
 	vX = -0.0005;
 	vY = 0;
@@ -260,7 +225,6 @@ socket.on('pong:hisPoint', (data) => {
 
 	function matchmaking()
 	{
-		console.log(`id ion matcj= ${myId}`)
 		const info = {
 			id: myId,
 			option: option,
@@ -270,7 +234,6 @@ socket.on('pong:hisPoint', (data) => {
 
 	function privateParty()
 	{
-		console.log(`id private party= ${myId}`)
 		const info = {
 			id: myId,
 			option: option,
@@ -280,7 +243,6 @@ socket.on('pong:hisPoint', (data) => {
 
 	function joinPrivateParty()
 	{
-		console.log(`id private party= ${myId}`)
 		const info = {
 			id: myId,
 			gameId: gameParam.gameId,
@@ -311,7 +273,6 @@ socket.on('pong:hisPoint', (data) => {
 	{
 		if (!gameId || !canvas)
 			return ;
-		console.log("send point");
 		const info = {
 			id: myId,
 			gameId: gameId,
@@ -391,7 +352,6 @@ socket.on('pong:hisPoint', (data) => {
 
 	function drawcenter()
 	{
-		// ctx.restore();
 		if (!ctx || !canvas)
 			return ;
 		ctx.fillStyle = 'white';
@@ -459,18 +419,14 @@ socket.on('pong:hisPoint', (data) => {
 			opRank: opRank,
 		};
 		await api.post('/loss', data);
-		// await api.post('/status', {status: 1});
 	}
 
-
-	//here
 	socket.emit('pong:disconnect', {id: myId});
 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
   };
 
 async function draw(timestamp: number)
 {
-	console.log("turning, running= ", running);
 	if (!running)
 	{
 		window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong")
@@ -483,7 +439,6 @@ async function draw(timestamp: number)
 	}
 	if (myScore === maxScore || hisScore === maxScore)
 	{
-		console.log("maxScore!!!!")
 		const data = {
 			myScore: myScore,
 			opScore: hisScore,
@@ -495,14 +450,12 @@ async function draw(timestamp: number)
 			await api.post('/win', data);
 			await api.post('/status', {status: 1});
 			socket.emit('pong:disconnect', {id: myId});
-			console.log("send all ?? win");	
 		}
 		else
 		{
 			await api.post('/loss', data);
 			await api.post('/status', {status: 1});
 			socket.emit('pong:disconnect', {id: myId});
-			console.log("send loose");
 		}
 		window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
 		return ;
@@ -567,10 +520,7 @@ async function draw(timestamp: number)
 			if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)//touch paddle
 			{
 				if (ballX +  ballRadius > paddleX && ballX - ballRadius < paddleX + paddleWidth)
-				{
-					console.log("hehe here")
 					ballX = paddleX + paddleWidth + ballRadius;
-				}
 				updateVector();
 			}
 			send_info();
@@ -594,7 +544,6 @@ async function draw(timestamp: number)
 		{
 			if (ballY <= paddleY + paddleHeight + ballRadius && ballY >= paddleY - ballRadius)
 			{
-				console.log('true hehe');
 				ballX = paddleX + paddleWidth + ballRadius;
 				updateVector();
 				return ;
@@ -607,11 +556,7 @@ async function draw(timestamp: number)
 			send_point();
 		}
 		if (ballX > (canvas.width * 1.2) && ballX - (vX * 2) > canvas.width)
-		{
-			console.log("ball out win point pls")
 			send_my_point();
-		}
-
 	}
 
 
@@ -672,7 +617,6 @@ async function draw(timestamp: number)
 			setTimeout(() => {
 				paddleHeight = canvas.height * 0.25;
 				paddleY = canvas.height / 2 - paddleHeight / 2;
-				console.log('Cinq secondes se sont écoulées.');
 			  }, 5000);
 			date = new Date();
 			lastPower = date.getTime();
@@ -680,7 +624,6 @@ async function draw(timestamp: number)
 	});
 
 	requestAnimationFrame(draw);
-	console.log("retuuuuuuuuuuurn")
 	return (stopDrawCanvas);
 }
 
diff --git a/containers/react/src/script/axiosApi.tsx b/containers/react/src/script/axiosApi.tsx
index 2ae297d4..b75141d5 100644
--- a/containers/react/src/script/axiosApi.tsx
+++ b/containers/react/src/script/axiosApi.tsx
@@ -11,20 +11,9 @@ function getToken() {
 
 console.log(`getToken = ${getToken()}`)
 console.log(`Bearer ${localStorage.getItem("token")}`)
-
-// const test = "192.168.1.19"
-// const url = 'http://' + process.env.REACT_APP_BASE_URL + '/api'
-// const url = 'http://' + test + '/api'
-
-// console.log("url= ", url)
-// console.log("test= ", test)
-// console.log("env= ", process.env.REACT_APP_BASE_URL)
-
 let api = axios.create({
-//   baseURL: 'http://localhost/api', 
 baseURL: 'http://' + process.env.REACT_APP_BASE_URL + '/api', 
   headers: {
-	//   Authorization: `Bearer ${getToken()}`,
 		Authorization : `Bearer ${localStorage.getItem("token")}`
 	},
   withCredentials: true,
diff --git a/containers/react/src/script/login.tsx b/containers/react/src/script/login.tsx
deleted file mode 100644
index 74733e26..00000000
--- a/containers/react/src/script/login.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// export const login()
-// {
-//     alert("Le bouton a été cliqué !");
-//     var formulaire = document.getElementById("loginForm");
-//     formulaire.submit();
-// }
-
-export const login = () => {
-	console.log('Hello from myFunction');
-    // alert("Le bouton a été cliqué !");
-    var formulaire = document.getElementById("loginForm");
-    formulaire.submit();
-  }
\ No newline at end of file
diff --git a/containers/react/src/script/login42.tsx b/containers/react/src/script/login42.tsx
deleted file mode 100644
index 732afa85..00000000
--- a/containers/react/src/script/login42.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// function setupLogin()
-// {	
-// 	// alert("Le bouton a été cliqué !");
-// 	console.log('Hello from login42');
-// }
-
-// export default setupLogin;
\ No newline at end of file
diff --git a/containers/react/src/script/tokenSuccess.tsx b/containers/react/src/script/tokenSuccess.tsx
index 4f7ff0ed..7b0f7ec0 100644
--- a/containers/react/src/script/tokenSuccess.tsx
+++ b/containers/react/src/script/tokenSuccess.tsx
@@ -41,14 +41,9 @@ function SuccessToken() {
 	}, [data]);
   
 	const handleKeyPress = async (e: { key: string; })=>{
-		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
 			return ;
 		try{
-			console.log("code= ", code)
-			// const res = await api.post("/verifyOtp", {token: code})
-
-
 			const res = await axios({
 				method: 'POST',
 				url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/verifyOtp',
@@ -59,28 +54,13 @@ function SuccessToken() {
 				data: { token: code }
 			  });
 
-			console.log("res= ", res.data)
-			console.log("res= ", res)
 			if (res.data === 1)
 			{
-				console.log("registered")
-				// history.push('/login')
-	
 				localStorage.setItem('token', `${cleanData}`);
-				console.log(`prout token2= ${localStorage.getItem('token')}`);
 				window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
-
-				// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
-				// window.history.pushState({}, '', path);
-				// window.location.reload();
-	
 			}
 			else
-			{
 				console.log("bad code")
-				//alert ?? retry
-			}
-			// redirect('/test')
 		} 
 		catch(err){
 			 console.log(err)
@@ -90,7 +70,6 @@ function SuccessToken() {
 
   
 	if (!user) {
-	  // Render a loading indicator or return null while user is being fetched
 	  return <h1>Loading...</h1>;
 	}
 	if (!data)
@@ -98,9 +77,7 @@ function SuccessToken() {
 	const cleanData = data.slice(1, -1); // Declare cleanData here as well
   
 	if (!user.otp_verified) {
-	  console.log("false");
 	  localStorage.setItem('token', `${cleanData}`);
-	  console.log(`prout token2= ${localStorage.getItem('token')}`);
 	  window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
 	  return null; // or return a message or component indicating not verified
 	}
@@ -120,132 +97,4 @@ function SuccessToken() {
 	  );
 	}
 	
-	export default SuccessToken;
-
-// function SuccessToken() {
-
-//   const location = useLocation();
-//   const { data } = queryString.parse(location.search);
-
-//   if ( !data)
-//   {
-// 	console.log("no data")
-//   	return ;
-//   }
-//   const cleanData = data.slice(1, -1);
-
-
-//   const [code, setCode] = useState('');
-//   const [user, setUser] = useState(false);
-
-//   useEffect(()=> {
-
-// 	const getUser = async ()=>{
-// 		try {
-// 			// const tmpUser = await api.get("/profile");
-
-// 			const tmpUser = await axios({
-// 				method: 'GET',
-// 				url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/profile',
-// 				headers: {
-// 				  Authorization: `Bearer ${cleanData}`,
-// 				},
-// 				withCredentials: true,
-// 			  });
-// 			  setUser(tmpUser.data);
-
-// 			// setUser(tmpUser.data);
-// 			// if (tmpUser.data.otp_verified)
-// 			// {
-// 			// 	console.log("true");
-// 			// 	return (
-// 			// 		<>
-// 			// 		<h1>Double Auth</h1>
-// 			// 		<input
-// 			// 		  onKeyDown={handleKeyPress}
-// 			// 		  type="text"
-// 			// 		  className="qr"
-// 			// 		  placeholder="6 Digits Code"
-// 			// 		  value={code}
-// 			// 		  onChange={(e) => setCode(e.target.value)}
-// 			// 		/>
-// 			// 	  </>
-// 			// 	)
-// 			// }
-// 			// else 
-// 			// {
-// 			// 	console.log("false");
-// 			// 	localStorage.setItem('token', `${cleanData}`);
-// 			// 	console.log(`prout token2= ${localStorage.getItem('token')}`)
-// 			// 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
-// 			// }
-// 		} catch(err) {
-// 			console.log(err)
-// 		}
-// 	}
-// 	getUser();
-//   }, []);
-
-//   const handleKeyPress = async (e)=>{
-// 	// console.log(`e in press= ${e.key}`)
-// 	if (e.key !== "Enter")
-// 		return ;
-// 	try{
-// 		console.log("code= ", code)
-// 		const res = await api.post("/verifyOtp", {token: code})
-// 		console.log("res= ", res.data)
-// 		console.log("res= ", res)
-// 		if (res.data === 1)
-// 		{
-// 			console.log("registered")
-// 			// history.push('/login')
-
-// 			const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
-// 			window.history.pushState({}, '', path);
-// 			window.location.reload();
-
-// 		}
-// 		else
-// 		{
-// 			console.log("bad code")
-// 			//alert ?? retry
-// 		}
-// 		// redirect('/test')
-// 	} 
-// 	catch(err){
-// 		 console.log(err)
-// 	}
-//   }
-
-
-//   console.log("start while...")
-//   while(user === false)
-//   	;
-//   console.log("end while")
-//   if (!user.otp_verified)
-//   {
-// 	console.log("false");
-// 	localStorage.setItem('token', `${cleanData}`);
-// 	console.log(`prout token2= ${localStorage.getItem('token')}`)
-// 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
-// 	return ;
-//   }
-  
-//   return (
-// 	  <>
-// 		<h1>Double Auth</h1>
-// 		<input
-// 		  onKeyDown={handleKeyPress}
-// 		  type="text"
-// 		  className="qr"
-// 		  placeholder="6 Digits Code"
-// 		  value={code}
-// 		  onChange={(e) => setCode(e.target.value)}
-// 		/>
-// 	  </>
-//   )
-
-
-// }
-
-// export default SuccessToken;
+	export default SuccessToken;
\ No newline at end of file

From 790e9e589779c34dad9a743aeeb9c12040be059d Mon Sep 17 00:00:00 2001
From: Alexandre POMMIER <apommier@paul-f4Ar4s3.clusters.42paris.fr>
Date: Mon, 26 Jun 2023 12:02:50 +0200
Subject: [PATCH 2/3] je sais plus

---
 containers/react/src/components/Messages/Modal.tsx |  1 -
 containers/react/src/pages/Field.tsx               | 14 +++++++++-----
 containers/react/src/pages/canvas.tsx              |  3 +--
 containers/react/src/script/tokenSuccess.tsx       |  3 +--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx
index 54e8cc44..6480f24b 100644
--- a/containers/react/src/components/Messages/Modal.tsx
+++ b/containers/react/src/components/Messages/Modal.tsx
@@ -129,7 +129,6 @@ const Modal = ({handleClose}: ModalProps) => {
 			members: selectedOptions,
 		}
 		try{
-			// test
 			await api.post("/conv", data);
 			handleClose();
 			window.location.reload();
diff --git a/containers/react/src/pages/Field.tsx b/containers/react/src/pages/Field.tsx
index bd242261..7d70b019 100644
--- a/containers/react/src/pages/Field.tsx
+++ b/containers/react/src/pages/Field.tsx
@@ -16,6 +16,7 @@ function Field()
 	useEffect(() => {
 		const queryParams = queryString.parse(window.location.search);
 		
+		console.log("launch canva hehe")
 		let Modifiers = 0;
 		let info: GameProps;
 
@@ -37,16 +38,19 @@ function Field()
 		}
 		if (queryParams.username)
 		{
-			info = {
-				privateParty: true,
-				username: queryParams.username as string,
-				gameId: queryParams.gameId as unknown as number
-			}
+				console.log("user= ", queryParams.username)
+				info = {
+					privateParty: true,
+					username: queryParams.username as string,
+					gameId: queryParams.gameId as unknown as number
+				}
+			console.log("info of param vefore canvas=", info)
 		}
 
 		const cleanup = DrawCanvas(Modifiers, info);
 	
 		return () => {
+		  console.log("Cleanup");
 			if (cleanup)
 				cleanup();
 		};
diff --git a/containers/react/src/pages/canvas.tsx b/containers/react/src/pages/canvas.tsx
index d60eb414..cd63fe12 100644
--- a/containers/react/src/pages/canvas.tsx
+++ b/containers/react/src/pages/canvas.tsx
@@ -10,7 +10,6 @@ interface GameProps {
 
 function DrawCanvas(option: number, gameParam: GameProps) {
 
-
 	useEffect(() => {
 		const handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
 			try {
@@ -19,13 +18,13 @@ function DrawCanvas(option: number, gameParam: GameProps) {
 				console.log(err);
 			}
 		};
-
 		window.addEventListener('beforeunload', handleBeforeUnload);
 		return () => {
 			window.removeEventListener('beforeunload', handleBeforeUnload);
 		};
 	}, []);
 
+
 	console.log(`option= ${option}`);
 	const superpowerModifier = option & 1;  // Retrieves the superpower modifier
     const obstacleModifier = (option >> 1) & 1;  // Retrieves the obstacle modifier
diff --git a/containers/react/src/script/tokenSuccess.tsx b/containers/react/src/script/tokenSuccess.tsx
index 7b0f7ec0..2a6faecd 100644
--- a/containers/react/src/script/tokenSuccess.tsx
+++ b/containers/react/src/script/tokenSuccess.tsx
@@ -1,11 +1,10 @@
 import { useLocation } from 'react-router-dom';
 import { useState, useEffect } from 'react'
 import queryString from 'query-string';
-import api from "./axiosApi.tsx";
 import axios from 'axios';
 import React from 'react';
 
-import {Matchlog, User} from "../../interfaces.tsx"
+import {User} from "../../interfaces.tsx"
 
 function SuccessToken() {
 	const location = useLocation();

From 18706e168ecf323ba084cbf93b51f8a644ed639b Mon Sep 17 00:00:00 2001
From: kinou-p <alexpomms@gmail.com>
Date: Wed, 28 Jun 2023 14:19:23 +0200
Subject: [PATCH 3/3] fix error useEffect pong by putting it in field.tsx, add
 game session, when page closed nbr session work for me but maybe not at
 school

---
 containers/api/src/app.controller.ts    | 20 ++++++++++++-
 containers/api/src/auth/login42.ts      |  1 +
 containers/api/src/model/user.entity.ts |  3 ++
 containers/react/interfaces.tsx         |  1 +
 containers/react/src/components/App.tsx | 37 +++++++++++++++----------
 containers/react/src/pages/Field.tsx    | 30 +++++++++++++++++++-
 containers/react/src/pages/canvas.tsx   | 28 +++++++++----------
 7 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/containers/api/src/app.controller.ts b/containers/api/src/app.controller.ts
index 741f1250..73e38d2e 100644
--- a/containers/api/src/app.controller.ts
+++ b/containers/api/src/app.controller.ts
@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:00 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/26 10:16:19 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/28 13:57:06 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -198,6 +198,24 @@ export class AppController {
 	//========================================================================================================
 	//========================================================================================================
 
+	@UseGuards(JwtAuthGuard)
+	@Post('/addGame')
+	async addGame(@Request() req, @Body() data: any) {
+	  const user = await this.userService.findOne(req.user.username);
+	  user.gameSession += 1;
+	  await this.userService.save(user);
+	}
+
+	@UseGuards(JwtAuthGuard)
+	@Post('/rmGame')
+	async removeGame(@Request() req, @Body() data: any) {
+	  const user = await this.userService.findOne(req.user.username);
+	  user.gameSession -= 1;
+	  if (user.gameSession === 0)
+		user.status = 1;
+	  await this.userService.save(user);
+	}
+
   @UseGuards(JwtAuthGuard)
   @Post('/win')
   async addWin(@Request() req, @Body() data: any) {
diff --git a/containers/api/src/auth/login42.ts b/containers/api/src/auth/login42.ts
index e4192d64..b9fda15c 100644
--- a/containers/api/src/auth/login42.ts
+++ b/containers/api/src/auth/login42.ts
@@ -63,6 +63,7 @@ export class loginClass {
 				blocked: null,
 				photo: null,
 				sessionNumber: 0,
+				gameSession: 0,
 			  };
 			await this.usersService.create(user);
 		}
diff --git a/containers/api/src/model/user.entity.ts b/containers/api/src/model/user.entity.ts
index fa572dac..e6651e24 100644
--- a/containers/api/src/model/user.entity.ts
+++ b/containers/api/src/model/user.entity.ts
@@ -50,6 +50,9 @@ export class User {
 	@Column({ default: 0 })
 	sessionNumber: number;
 
+	@Column({ default: 0 })
+	gameSession: number;
+
 	@Column({ default: 0 })
 	rank: number;
 
diff --git a/containers/react/interfaces.tsx b/containers/react/interfaces.tsx
index 71e376ca..acfc247c 100644
--- a/containers/react/interfaces.tsx
+++ b/containers/react/interfaces.tsx
@@ -17,6 +17,7 @@ export interface User {
 	friends: string[];
 	blocked: string[];
 	sessionNumber: number;
+	gameSession : number;
   }
 
 export interface Conv {
diff --git a/containers/react/src/components/App.tsx b/containers/react/src/components/App.tsx
index b8979c67..dcbaf3ae 100644
--- a/containers/react/src/components/App.tsx
+++ b/containers/react/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Routes, Route, Navigate } from 'react-router-dom';
 import HomeLogin from "../pages/LoginButton.tsx";
 
@@ -23,17 +23,18 @@ import api from "../script/axiosApi.tsx"
 
 function AnimatedRoute() {
 	useEffect(() => {
-		const handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
-			console.log("git ")
-			if (!localStorage.getItem('token'))
-				return;
-			try {
-				await api.post("/quit");
-			} catch (err) {
-				console.log(err);
-			}
-		};
-
+		// const handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
+		// 	console.log("git ")
+		// 	if (!localStorage.getItem('token'))
+		// 		return;
+		// 	try {
+		// 		await api.post("/quit");
+		// 		// navigator.sendBeacon("http://" + process.env.REACT_APP_BASE_URL + "/api/quit", {username: user.username})
+		// 	} catch (err) {
+		// 		console.log(err);
+		// 	}
+		// };
+		
 		const handleLoad = async () => {
 			if (!localStorage.getItem('token'))
 				return;
@@ -45,9 +46,17 @@ function AnimatedRoute() {
 		};
 
 		handleLoad();
-		window.addEventListener('beforeunload', handleBeforeUnload);
+
+		window.addEventListener("beforeunload", async (event) => {
+			await api.post("/quit");
+		});
+		window.addEventListener("unload", async (event) => {	
+			await api.post("/quit");
+		});
+
+
 		return () => {
-			window.removeEventListener('beforeunload', handleBeforeUnload);
+			// window.removeEventListener('beforeunload', handleBeforeUnload);
 		};
 	}, []);
 
diff --git a/containers/react/src/pages/Field.tsx b/containers/react/src/pages/Field.tsx
index 7d70b019..3b367630 100644
--- a/containers/react/src/pages/Field.tsx
+++ b/containers/react/src/pages/Field.tsx
@@ -3,7 +3,7 @@ import DrawCanvas from './canvas.tsx';
 import queryString from 'query-string';
 import '../styles/field.css';
 import React from 'react';
-
+import api from '../script/axiosApi.tsx';
 
 interface GameProps {
 	privateParty: boolean,
@@ -13,6 +13,34 @@ interface GameProps {
 
 function Field()
 {
+
+	useEffect(() => {
+
+		const addGameSession = async () => {
+			try {
+				await api.post("/addGame");
+			} catch (err) {
+				console.log(err);
+			}
+		};
+
+		addGameSession();
+
+		const handleBeforeUnload = async () => {
+			try {
+				await api.post("/rmGame");
+			} catch (err) {
+				console.log(err);
+			}
+		};
+
+		window.addEventListener('beforeunload', handleBeforeUnload);
+		return () => {
+			window.removeEventListener('beforeunload', handleBeforeUnload);
+		};
+	}, []);
+
+
 	useEffect(() => {
 		const queryParams = queryString.parse(window.location.search);
 		
diff --git a/containers/react/src/pages/canvas.tsx b/containers/react/src/pages/canvas.tsx
index e53f1f92..a7b06935 100644
--- a/containers/react/src/pages/canvas.tsx
+++ b/containers/react/src/pages/canvas.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+// import { useEffect } from 'react';
 import api from '../script/axiosApi.tsx';
 import io from 'socket.io-client';
 
@@ -11,20 +11,20 @@ interface GameProps {
 function DrawCanvas(option: number, gameParam: GameProps) {
 
 
-	useEffect(() => {
-		const handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
-			try {
-				await api.post("/status", {status: 1});
-			} catch (err) {
-				console.log(err);
-			}
-		};
+	// useEffect(() => {
+	// 	const handleBeforeUnload = async (event: { preventDefault: () => void; returnValue: string; }) => {
+	// 		try {
+	// 			await api.post("/status", {status: 1});
+	// 		} catch (err) {
+	// 			console.log(err);
+	// 		}
+	// 	};
 
-		window.addEventListener('beforeunload', handleBeforeUnload);
-		return () => {
-			window.removeEventListener('beforeunload', handleBeforeUnload);
-		};
-	}, []);
+	// 	window.addEventListener('beforeunload', handleBeforeUnload);
+	// 	return () => {
+	// 		window.removeEventListener('beforeunload', handleBeforeUnload);
+	// 	};
+	// }, []);
 
 	console.log(`option= ${option}`);
 	const superpowerModifier = option & 1;  // Retrieves the superpower modifier