longeur messages et logueur modal nouveau message

containers/react/package-lock.json

@@ -23,7 +23,7 @@
         "react-scripts": "5.0.1",
         "socket.io-client": "^4.6.1",
         "styled-components": "^5.3.10",
-        "typescript": "^3.2.1",
+        "typescript": "^3.9.10",
         "web-vitals": "^2.1.4"
       }
     },
@@ -20221,9 +20221,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.1.tgz",
-      "integrity": "sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg==",
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -35362,9 +35362,9 @@
       }
     },
     "typescript": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.1.tgz",
-      "integrity": "sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg=="
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q=="
     },
     "unbox-primitive": {
       "version": "1.0.2",

containers/react/package.json

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

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/Chats.tsx

@@ -3,11 +3,11 @@ import io from 'socket.io-client';
 import '../../styles/Messages.css'
 import styled from "styled-components";
 import DefaultPic from '../../assets/profile.jpg'
-import api from '../../script/axiosApi.tsx';
+import  api from '../../script/axiosApi.tsx'
 import { motion , AnimatePresence} from "framer-motion";
 import Modal from "./Modal.tsx";
 
-import Message from "./Message.tsx"
+import Message  from './Message.tsx';
 // import Input from "./Input";
 
 //react icons

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/pages/Field.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useLocation } from 'react';
+import React from 'react';
+import { useEffect } from 'react';
 // import { useState, useRef } from 'react';
-import DrawCanvas from './canvas.tsx';
+import DrawCanvas from './canvas';
 import queryString from 'query-string';
 import '../styles/field.css';
 

containers/react/src/pages/Game.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import PlayButton from "../components/Game/PlayButton.tsx";
-import Ranking from "../components/Game/Ranking.tsx";
+import PlayButton from "../components/Game/PlayButton";
+import Ranking from "../components/Game/Ranking";
 import '../styles/Game.css'
 
 function Game(){

containers/react/src/pages/Head.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 function Head()
 {
 	return (

containers/react/src/pages/Home.tsx

@@ -13,18 +13,18 @@
 // import { React, useState } from "react";
 import '../styles/Profile.css'
 // import '../styles/App.css'
-import DefaultPicture from "../assets/profile.jpg";
-import WinLoss from "../components/Profile/Win_Loss.tsx";
+// 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 { GrClose } from 'react-icons/gr'
 import { Link } from "react-router-dom";
-import ModalEdit from "../components/Profile/EditName.tsx";
+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.tsx';
+import api from '../script/axiosApi';
 import { CgEditMarkup } from 'react-icons/cg'
 import { IoCloseCircleOutline } from "react-icons/io5";
 
@@ -43,6 +43,7 @@ import { useParams } from 'react-router-dom';
 
 
 function Profile () {
+	const DefaultPicture: string = "../assets/profile.jpg";
 	const [user, setUser] = useState(null);
 	const [isLoading, setIsLoading] = useState(true);
 	const [modalOpen, setModalOpen] = useState(false);
@@ -67,8 +68,10 @@ function Profile () {
 	};
 
 	const handleUpload = async () => {
-		const formData = new FormData();
-		formData.append('photo', selectedPhoto);
+		const formData: FormData = new FormData();
+		if (selectedPhoto){
+			formData.append('photo', selectedPhoto);
+		}
 		try {
 		  await api.post('/picture', formData);
 		  console.log('File uploaded successfully');
@@ -125,7 +128,9 @@ function Profile () {
 					{isLoading ? (
         				<h1>Loading...</h1>
       				) : (
-        				<h1>{user.nickname}</h1>
+						user ?  (
+							<h1>{user.nickname}</h1>
+						) : ("")
       				)}
 	  		</span>
 

containers/react/src/pages/Login42.tsx

@@ -1,6 +1,7 @@
 // import GoogleLogin from 'react-google-login';
 import { useEffect } from 'react';
 import axios from 'axios';
+import React from 'react';
 // import setupLogin from '../script/login42';
 // import React, { useEffect } from 'react';
 

containers/react/src/pages/Messages.tsx

@@ -1,31 +1,14 @@
 import React from "react";
 // import Sidebar from '../components/Messages/Sidebar'
-import Chats from "../components/Messages/Chats.tsx"
+import Chats from "../components/Messages/Chats"
 import '../styles/Messages.css'
 import { motion } from 'framer-motion'
 
 // import {io} from 'socket.io-client'
 
-function Messages(params) {
-	// const socket = useRef(io("ws://localhost:8900"))
-
-	// useEffect(() => {
-	// 	setSocket(io("ws://localhost:8900"))
-	// }, [])
-	// const socket = socketIO.connect('http://localhost:4000');
-
-	// axios.get('http://localhost/api/user/id')
-	// 	.then(function());
-
-	// console.log(socket)
-	// useEffect(() => {
-	// 	socket.current.emit("addUser", user._id);
-		// socket.current.on("getUsers", users=>{
-		// 	console.log(users)
-		// })
-	// }, [user])
+function Messages() {
 	return (
-		<>
+		<div>
 		<motion.div className="home"
 		initial={{opacity: 0}}
 		animate={{opacity: 1}}
@@ -35,7 +18,7 @@ function Messages(params) {
 				<Chats/>
 			</div>
 		</motion.div>
-		</>
+		</div>
 	);
 }
 

containers/react/src/pages/NewLogin.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import '../styles/field.css';
 // import { useHistory } from 'react-router-dom';
 import { useNavigate } from "react-router-dom";

containers/react/src/pages/QrCode.tsx

@@ -3,10 +3,11 @@ import React, { useEffect, useRef, useState } from "react";
 // import { redirect } from "react-router-dom";
 
 import "../styles/App.css";
-import api from '../script/axiosApi.tsx';
+import api from '../script/axiosApi';
 
 import QRCodeStyling from "qr-code-styling";
 import { motion } from 'framer-motion'
+import { MutableRefObject } from "react";
 
 
 
@@ -29,7 +30,8 @@ const qrCode = new QRCodeStyling({
 
 function QrCode () {
     // const url = "https://www.youtube.com";
-    const ref = useRef(null);
+    // const ref = useRef(null);
+	const ref: MutableRefObject<HTMLElement | null> = {current: null};
 	const [user, setUser] = useState(false);
 	const [url, setUrl] = useState(false);
 	const [secret, setSecret] = useState(false);
@@ -39,7 +41,9 @@ function QrCode () {
 	// const history = useHistory();
 
     useEffect(() => {
-        qrCode.append(ref.current);
+		if (ref.current){
+			qrCode.append(ref.current);
+		}
 
 		const getUser = async ()=>{
 			try{
@@ -67,7 +71,7 @@ function QrCode () {
 
     useEffect(() => {
         qrCode.update({
-        data: url
+        	data: url
         });
     }, [url]);
 

containers/react/src/pages/canvas.tsx

@@ -1,6 +1,6 @@
 // import io from 'socket.io-client';
 
-import api from '../script/axiosApi.tsx';
+import api from '../script/axiosApi';
 
 // import { useEffect, useRef } from 'react';
 import io from 'socket.io-client';

containers/react/src/styles/Messages.css

@@ -32,6 +32,7 @@ select{
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	overflow-x: scroll;
 }
 
 .scroll{
@@ -50,7 +51,8 @@ select{
 .contact{
 	background-color: rgb(46, 46, 46);
 	align-items: left;
-	height: 30.2rem;
+	height: 74vh;
+	width: 30%;
 	overflow: scroll;
 	/* width: 2rem; */
 	/* height: 4rem; */
@@ -92,6 +94,8 @@ select{
 }
 
 .navbar{
+	/* width: clamp(50%, 500px, 20%); */
+	/* height: min(50%, 100px); */
 	display: flex;
 	align-items: center;
 	/* background-color: yellow; */
@@ -130,6 +134,7 @@ select{
 	background-color: rgb(26, 26, 26);
 	/* height: calc(100% - 118px); */
 	width: 70%;
+	/* height: 300px; */
 	overflow: scroll;
 }
 
@@ -169,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;

containers/react/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+    "compiledOptions": {
+        "composite": true,
+        "allowJs": true,
+        "allowImportingTsExtensions": true,
+        "jsx": "react"
+    }
+}