longeur messages et logueur modal nouveau message

containers/react/src/components/Game/Rank.tsx

@@ -13,12 +13,13 @@
 // import React from "react"
 import React, { useState, useEffect, useRef } from "react";
 // import {Rank} from '../../DataBase/DataRank.js'
-import DefaultPicture from '../../assets/profile.jpg'
-import api from '../../script/axiosApi.tsx';
+// import DefaultPicture from '../../assets/profile.jpg'
+import api from '../../script/axiosApi';
 
 function Rank({user, index}){
 
 	const [profilePicture, setProfilePicture] = useState('');
+	const DefaultPicture:string = '../../assets/profile.jpg';
 	
 	useEffect(() => {
 		const fetchProfilePicture = async () => {

containers/react/src/components/Messages/Message.tsx

@@ -10,10 +10,11 @@
 /*                                                                            */
 /* ************************************************************************** */
 
+import React, { HtmlHTMLAttributes } from "react";
 import { useEffect, useState, useRef } from "react";
-import api from '../../script/axiosApi.tsx';
+import api from '../../script/axiosApi';
 import styled from "styled-components"
-import DefaultPicture from '../../assets/profile.jpg'
+// import DefaultPicture from '../../assets/profile.jpg'
 // import { useRef } from "react";
 // import { useEffect } from "react";
 import '../../styles/Messages.css'
@@ -25,12 +26,11 @@ const MeStyleP = styled.p`
 	color: white;
 	margin-right: 20px;
 `
-
 function MessageMe({message, own}){
 	
 	const [profilePicture, setProfilePicture] = useState('');
-	const scrollRef = useRef();
-
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const DefaultPicture: string = '../../assets/profile.jpg'
 	useEffect(() => {
 		if (scrollRef.current)
 		{

containers/react/src/components/Messages/Modal.tsx

@@ -1,11 +1,11 @@
 import { motion } from "framer-motion";
-import Backdrop from "../Sidebar/Backdrop.tsx";
+import Backdrop from "../Sidebar/Backdrop";
 // import { Rank } from "../../DataBase/DataRank"
 import '../../styles/Messages.css'
 import { useState, useEffect } from "react";
 import { GrAdd } from "react-icons/gr";
 import { Link } from "react-router-dom";
-import api from "../../script/axiosApi.tsx";
+import api from "../../script/axiosApi";
 import React from "react";
 
 const dropIn = {
@@ -99,7 +99,7 @@ const Modal = ({handleClose}) => {
     // let new_name;
 
     return (
-        <Backdrop>
+        <Backdrop >
             <motion.div
                 onClick={(e) => e.stopPropagation()}
                 className="modal"

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

@@ -46,7 +46,7 @@ import '../../styles/Win_Loss.css'
   
 import React, { useState, useEffect, useRef } from "react";
 import { useParams } from 'react-router-dom';
-import api from '../../script/axiosApi.tsx';
+import api from '../../script/axiosApi';
 
 
 function WinLoss() {
@@ -99,8 +99,8 @@ function WinLoss() {
                         <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 key={index} className='content2nd'>
+                                    <h4 key={index} className='me'>{user.username}</h4>  <h4 key={index} className='score'>{c.myScore} - {c.opScore} </h4>  <h4 key={index} className="opponent">{c.opponent}</h4>
                                 </div>
                                 {/* <h4 className='content'>{c.openent}</h4> */}
                             </li>

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

@@ -1,6 +1,7 @@
+import React from "react";
 import {motion} from "framer-motion"
-import Backdrop from "./Backdrop.tsx"
-import { SidebarData } from "./SidebarData.tsx"
+import Backdrop from "./Backdrop"
+import { SidebarData } from "./SidebarData"
 import {Link} from 'react-router-dom';
 import * as AiIcons from 'react-icons/ai';
 
@@ -19,26 +20,6 @@ const dropIn = {
 	},
 }
 
-
-// function showBar (){
-// 	return (
-// 		 {SidebarData.map((item, index) => {	
-// 					 return (	
-// 					<motion.div
-// 					className="nav-menu"
-// 					// whileHover={{scale: 1.1}}
-// 					>
-// 				 <li key={index} className={item.cName}>	
-// 					 <Link to={item.path}>	
-// 						 {item.icon}	
-// 						 <span>{item.title}</span>	
-// 					 </Link>	
-// 				 </li>	
-// 			</motion.div>
-// 			 )
-// 		 })}	
-// 	)
-// }
 const Modal = ({ handleclose }) => {
 	return (
 		<Backdrop onClick={handleclose}>

containers/react/src/styles/Messages.css

@@ -32,6 +32,7 @@ select{
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	overflow-x: scroll;
 }
 
 .scroll{
@@ -173,11 +174,17 @@ input{
 
 .messageContent{
 	display: flex;
+	flex-wrap: wrap;
 	flex-direction: column;
 	max-width: 80%;
 	gap: 10px;
 }
 
+p {
+	overflow-wrap: break-word;
+	max-width: 300px;
+}
+
 .meMessage{
 	display: flex;
 	flex-direction: row-reverse;