ajout cote message

containers/react/src/components/Messages/AddSelectTag.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { Rank } from "../../DataBase/DataRank";
+
+const AddSelectTag = () => {
+    // const [selectCount, setSelectCount] = useState(0);
+    // const [selectValues, setSelectValues] = useState([]);
+
+    // const handleAddSelect = () => {
+    //     setSelectCount((selectCount)  => selectCount + 1);
+    //     setSelectCount((selectValues) =>[...selectValues, `select${selectCount + 1}`]   );
+    // };
+
+    return (
+        <div>
+            {/* <button onClick={handleAddSelect}>Add</button>
+            <div>
+                {selectValues.map((selectName, index) => (
+                    <select key={index} name={selectName}>
+                        <option value="option1"> option 1</option>
+                        <option value="option2"> option 2</option>
+                    </select>
+                ))}
+            </div> */}
+            <select>
+                    {Rank.map((item, index) => {
+                        return (
+                            <option value="data">{item.name}
+                            {/* <input type="checkbox" /> */}
+                            </option>
+                        )
+                    })}
+                </select>
+        </div>
+    )
+}
+
+export default AddSelectTag;

containers/react/src/components/Messages/Chats.jsx

@@ -4,6 +4,8 @@ import '../../styles/Messages.css'
 import styled from "styled-components";
 import DefaultPic from '../../assets/profile.jpg'
 import api from '../../script/axiosApi';
+import { motion } from "framer-motion";
+import Modal from "./Modal";
 
 import Message from "./Message"
 // import Input from "./Input";
@@ -214,6 +216,10 @@ function Chats(){
 		}
 	}
 
+	const [modalOpen, setModalOpen] = useState(false);
+	const close = () => setModalOpen(false);
+	const open = () => setModalOpen(true);
+
 	// console.log(`data user1= ${user.username}`)
 
 	// while (user === null)
@@ -265,13 +271,20 @@ function Chats(){
 				<div className="contact">
 					<UserChat>
 
-					<div className="newMessage">
+						<motion.div className="newMessage"
+							onClick={() => (modalOpen ? close() : open())}
+						
+						>
 							<GrAdd/>
-						<span>New Message</span>
-					</div>
+							<span>New Conversation</span>
+						</motion.div>
+						{modalOpen && <Modal modalOpen={modalOpen} handleClose={close}/>}
+
 					</UserChat>
-					{conversations.map(c=> (
-						<div onClick={() => setCurrentChat(c)}>
+					{conversations.map((c, index ) => {
+						return (
+						<div key={index}
+						onClick={() => setCurrentChat(c)}>
 							<UserChat>
 							<img className="pic-user" src={DefaultPic} alt="User" />
 							<div className="infoSideBar">
@@ -281,7 +294,7 @@ function Chats(){
 							</UserChat>
 						</div>
 				
-					))}
+						)})}
 				</div>
 
 				{

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

@@ -0,0 +1,107 @@
+import { motion } from "framer-motion";
+import Backdrop from "../Sidebar/Backdrop";
+import { Rank } from "../../DataBase/DataRank"
+import '../../styles/Messages.css'
+import { useState } from "react";
+import { GrAdd } from "react-icons/gr";
+import { Link } from "react-router-dom";
+import AddSelectTag from "./AddSelectTag";
+
+const dropIn = {
+    hidden:{y:"-100vh",
+            opacity: 0,},
+    visible:{y: "0",
+            opacity: 0,
+            transotion:{
+                duration:0.1,
+                type:"spring",
+                damping: 100,
+                stiffness: 500,
+            }},
+    exit:{y: "100vh",
+            opacity: 0,},
+
+};
+
+const Modal = ({handleClose, text}) => {
+    const [multi, setMulti] = useState(false);
+    // const addButton = document.getElementById('addButton');
+    // const selectContainer = document.getElementById('selectContainer');
+    // let selectCount = 0;
+    // function addSelectTag(){
+    //     selectCount++;
+    //     const select = document.createElement('select');
+    //     select.name = `select${selectCount}`;
+
+    //     const opt1 = document.createElement('option');
+    //     opt1.value = 'opt1';
+    //     opt1.text = 'opt1';
+
+    //     const opt2 = document.createElement('option');
+    //     opt2.value = 'opt2';
+    //     opt2.text = 'opt2';
+
+    //     select.appendChild(opt1);
+    //     select.appendChild(opt2);
+
+    //     selectContainer.appendChild(select);
+    // }
+    function try_me()
+    {
+
+        for (let i = 0; i < 2; i++)
+        {
+            AddSelectTag();
+        }
+    }
+    return (
+        <Backdrop>
+            <motion.div
+                onClick={(e) => e.stopPropagation()}
+                className="modal"
+                variant={dropIn}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+            >
+                <p>New Convewrstion</p>
+
+{/* First selection  */}
+
+                <select className="custom-select"
+                onChange={(e) => {
+                    const selection = e.target.value;
+                    selection === "group" ? setMulti(true) : setMulti(false)
+                }}>
+                    <option value="1v1">1v1</option>
+                    <option value="group">Group</option>
+                </select>
+
+{/* Second selection  */}
+
+                <select>
+                    {Rank.map((item, index) => {
+                        return (
+                            <option value="data">{item.name}
+                            {/* <input type="checkbox" /> */}
+                            </option>
+                        )
+                    })}
+                </select>
+                {/* <button id="addButton">Add</button> */}
+                {/* addButton.addEventListener('click', addSelectTag); */}
+                <div id="selectContainer" onClick={() => (try_me())}>
+                    {multi === true ? <GrAdd/> : " "}
+                </div>
+                <div className="div_submit">
+                    <Link to="#" className="submit" onClick={handleClose}>Submit</Link>
+                    
+                    <Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
+                </div>
+
+            </motion.div>
+        </Backdrop>
+    )
+}
+
+export default Modal

containers/react/src/styles/Messages.css

@@ -1,12 +1,39 @@
 .home{
 	background-color: black;
-	height: 10vh;
+	height: 90vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	
 }
 
+select{
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	-ms-appearance: none;
+	background: black;
+	color: white;
+	box-shadow: none;
+	appearance: none;
+	outline: 0;
+	border: 0!important;
+	margin: 5px;
+	font-size: 18px;
+	border-radius: 6px;
+}
+
+.modal{
+	width: clamp(50%, 700px, 90%);
+	height: min(50%, 300px);
+
+	margin: auto;
+	padding: 2rem;
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 .scroll{
 	overflow: scroll;
 }
@@ -61,9 +88,11 @@
 .navbar{
 	display: flex;
 	align-items: center;
-	background-color: #000c66;
+	/* background-color: yellow; */
+	background-image: linear-gradient(90deg, #5843e4, #5a0760);
 	color: white;
 	padding: 3px;
+	border-radius: 10px 10px 0px 0px;
 }
 
 .pic{
@@ -144,3 +173,21 @@ input{
 	padding: 20px;
 	color: lightgrey;
 }
+
+.submit{
+	display: inline-block;
+	color: white;
+	background-color:  #5843e4;
+	border-radius: 10px;
+	padding: 5px;
+	font-size: 1.2rem;
+	text-decoration: none;
+	font-weight:lighter;
+}
+
+.div_submit {
+	flex-direction: row;
+	align-items: center;
+	/* margin-left: 4px;
+	margin-right: 4px; */
+}