warning sidebar fixed warning Win_Loss fixed modif bouton edit_name

containers/react/package.json

@@ -17,7 +17,7 @@
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.6.1",
     "styled-components": "^5.3.10",
-    "typescript": "^5.0.4",
+    "typescript": "^3.2.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

containers/react/src/DataBase/DummyDBWinLoss.js

@@ -2,29 +2,36 @@ export const DBWinLoss = [
 	{
 		title: 'Victory',
 		score: '10 - 6',
+		opponent: 'chef bandit'
 	},
 	{
 		title: 'Defeat',
 		score: '9 - 10',
+		opponent: 'ex tueur'
 	},
 	{
 		title: 'Victory',
 		score: '10 - 0',
+		opponent: 'tueur'
 	},
 	{
 		title: 'Victory',
 		score: '10 - 9',
+		opponent: 'boulanger'
 	},
 	{
 		title: 'Defeat',
 		score: '3 - 10',
+		opponent: 'charcutier'
 	},
 	{
 		title: 'Deafet',
 		score: '9 - 10',
+		opponent: 'preach'
 	},
 	{
 		title: 'Victory',
 		score: '10 - 9',
+		opponent: 'aba'
 	},
 ]

containers/react/src/components/App.jsx

@@ -16,6 +16,7 @@ import SuccessToken from '../script/tokenSuccess'
 
 import DoubleAuth from "../pages/2fa.js";
 import Game from "../pages/Game.jsx";
+import Social from "../pages/Social.jsx";
 
 function AnimatedRoute () {
 	const location = useLocation();
@@ -27,6 +28,7 @@ function AnimatedRoute () {
 				<Route exact path="/profile" element={<Home/>}/>
 				
 				<Route exact path="/2fa" element={<DoubleAuth/>}/>
+				<Route exact path="/Social" element={<Social/>}/>
 
 				<Route exact path="/token" element={<SuccessToken />}/>
 				<Route path="/game" element={<PlayButton />}/>

containers/react/src/components/Profile/EditName.jsx

@@ -1,5 +1,5 @@
 import {motion} from "framer-motion"
-// import Backdrop from "./Sidebar/Backdrop"
+// import Backdrop from "../Sidebar/Backdrop"
 import {Link} from 'react-router-dom';
 import { UserProfile } from "../../DataBase/DataUserProfile";
 import {useState} from 'react';
@@ -30,6 +30,7 @@ const ModalEdit = ({ handleClose }) => {
 	{
 		setUserName (e.target.value);
 	}
+	void(handleClose);
 	return (
 		// <Backdrop onClick={handleClose}>
 			<motion.div 
@@ -40,9 +41,11 @@ const ModalEdit = ({ handleClose }) => {
 						exit="exit">
 				<h2>Type your new name</h2>
 				<input className="text" type="text" value={username} onChange={handler} handleClose/>
+				<div onClick={handleClose}>
 					<div onClick={() => {UserProfile.UserName = username;}}>
 						<Link className="button">change</Link>
 					</div>
+				</div>
 			</motion.div>
 		// </Backdrop>
 		

containers/react/src/components/Profile/Win_Loss.jsx

@@ -52,11 +52,11 @@ function WinLoss() {
             <div className='scroll'>
                 {DBWinLoss.map((item, index) => {
                     return (
-                        <div className='elements'>
+                        <div key={index} className='elements'>
                         <li key={index}>
                                 <h4 className='content'>{item.title}</h4>
                                 <div className='content2nd'>
-                                    <h4 className='me'>{UserProfile.UserName}</h4>  <h4 className='score'>{item.score}  {item.openent}</h4>
+                                    <h4 className='me'>{UserProfile.UserName}</h4>  <h4 className='score'>{item.score}</h4>  <h4 className="opponent">{item.opponent}</h4>
                                 </div>
                                 {/* <h4 className='content'>{item.openent}</h4> */}
                             </li>

containers/react/src/components/Sidebar/Backdrop.jsx

@@ -5,9 +5,9 @@ const Backdrop = ({ children, onClick }) => {
 	return (
 		<motion.div className="backdrop"
 					onClick={onClick}
-					initial={{ opacity: 0}}
+					initial={{ opacity: -1}}
 					animate={{ opacity: 1}}
-					exit={{ opacity: 0}}>
+					exit={{ opacity: -1}}>
 			{children}
 		</motion.div>
 	)

containers/react/src/components/Sidebar/Modal.jsx

@@ -58,8 +58,7 @@ const Modal = ({ handleClose }) => {
 			<ul  className='nav-menu-items'>
 			{SidebarData.map((item, index) => {
 					return (
-					<motion.div   whileHover={{scale: 1.1}}
+					<motion.div key={index}  whileHover={{scale: 1.1}}>
-								className>
 						<li key={index} className={item.cName}>
 							<Link to={item.path}>
 								{item.icon}

containers/react/src/components/Sidebar/SidebarData.js

@@ -27,7 +27,7 @@ export const SidebarData = [
 	},
 	{
 		title: 'Social',
-		path: '/team',
+		path: '/social',
 		icon: <IoIcons.IoMdPeople />,
 		cName: 'nav-text'
 	},

containers/react/src/pages/Home.jsx

@@ -4,26 +4,54 @@ import '../styles/Profile.css'
 import DefaultPicture from "../assets/profile.jpg";
 import WinLoss from "../components/Profile/Win_Loss";
 import { motion, AnimatePresence } from 'framer-motion'
-import { AiFillEdit } from 'react-icons/ai'
+// import { AiFillEdit } from 'react-icons/ai'
+// import { GrClose } from 'react-icons/gr'
 import { Link } from "react-router-dom";
 import ModalEdit from "../components/Profile/EditName";
 import {AiOutlineHistory} from 'react-icons/ai'
 // import { Link } from "react-router-dom";
 import {UserProfile} from "../DataBase/DataUserProfile";
+// import axios from "axios";
+import api from '../script/axiosApi';
+import { CgEditMarkup } from 'react-icons/cg'
+import { IoCloseCircleOutline } from "react-icons/io5";
 
 
+	// axios.get("http://localhost/api")
+	// .then((response) => {
+	// 	response = response.json()
+	// 	response.then((result) => {
+	// 		console.log(result)
+	// 		console.log("ceci est un test")
+	// 	})
+	// })
+
 
 function Profile () {
 	const [modalOpen, setModalOpen] = useState(false);
 	const close = () => setModalOpen(false);
 	const open = () => setModalOpen(true);
+
+	const getConv = async ()=>{
+		try{
+			const convs = await api.get("/profile")
+			// const tmpUser = await api.get("/profile")
+			console.log(convs.data);
+			// setUser(tmpUser);
+			// setConversation(convs.data);
+		}
+		catch(err){
+			console.log(err);
+		}
+		getConv();
+	};
 	return (
 		<div className="profile">
 			<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
 			<h1>{UserProfile.UserName}</h1>
 				<motion.div  onClick={() => (modalOpen ? close() : open())}>
 					<Link to="#" className="edit_name">
-						<AiFillEdit/>
+						{modalOpen === true ?  <IoCloseCircleOutline/> : <CgEditMarkup/>}
 					</Link>
 				</motion.div>
 			<AnimatePresence
@@ -39,15 +67,15 @@ function Home () {
 	const [move, setmove ] = useState(false);
     return (
 		<motion.div className="page"
-		initial={{opacity: 0}}
+		initial={{opacity: -1}}
 		animate={{opacity: 1}}
-		exit={{opacity: 0}}>
+		exit={{opacity: -1}}>
 		<div className="home">
 			<motion.div animate={{x: move ? -200: 170}}
 				transition={{type: "tween", duration: 0.5}}>
 					<Profile/>
 			</motion.div>
-			<motion.div animate={{opacity: !move ? 0 : 1}}>
+			<motion.div animate={{opacity: !move ? -1 : 1}}>
 				<WinLoss/>
 			</motion.div>
 			</div>

containers/react/src/pages/Social.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Social (){
+    return (
+        <div>je suis la partie social</div>
+    )
+}
+
+export default Social

containers/react/src/styles/Win_Loss.css

@@ -1,6 +1,6 @@
 .tab{
-	display: flex;
+	/* display: flex; */
-	flex-direction: column;
+	/* flex-direction: column; */
 	/* background-color: red; */
 	height: 70vh;
 	/* padding: 15px; */
@@ -16,6 +16,7 @@
 }
 
 .elements {
+	/* display: flex; */
 	border-width:1px;
 	border-style:solid;
 	/* background-color: #5843e4; */
@@ -34,31 +35,34 @@
 	color: white;
     /* font-size: 22px; */
     font-weight: bold;
-	display: flex;
+	/* display: flex; */
 	flex-direction: column;
 	margin-bottom: 5px;
 }
 
 .content2nd {
+	display:inline;
+	flex-direction: row;
 	color: white;
     /* font-size: 22px; */
     font-weight: bold;
-	display: flex;
 	flex-direction: row;
-	text-align: justify;
+	/* text-align: justify; */
 	/* margin-bottom: 5px; */
 }
 
 .me {
 	text-align: start;
+	margin-left: 10px;
 }
 
 .score {
 	text-align: center;
 }
 
-.oponent {
+.opponent {
-	align-items: flex-end;
+	text-align: end;
+	margin-right:10px; 
 }
 
 div::-webkit-scrollbar {