input to select ajout mot de si channel prive

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

@@ -107,12 +107,16 @@ function Chats(){
 				const convs = await api.get("/conv")
 				const tmpInvite = await api.get("/partyInvite")
 				const tmpUser = await api.get("/profile")
+				const tmpUsers = await api.get("/users");
+
 				console.log(convs);
 
 				// console.log("invite data use effect= ", tmpInvite.data);
 				setPartyInvite(tmpInvite.data);
 				setUser(tmpUser.data);
 				setConversation(convs.data);
+				setUsers(tmpUsers.data);
+
 				// console.log(`connection....`);
 				socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] });
 				// console.log(`connection done`);
@@ -255,6 +259,10 @@ function Chats(){
 
 	const [newGameModalOpen, setNewGameModalOpen] = useState(false);
 	const [newConversationModalOpen, setNewConversationModalOpen] = useState(false);
+
+    const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
+	const [users, setUsers] = useState([]);
+
   
 	const openNewGameModal = () => {
 	  setNewGameModalOpen(true);
@@ -335,6 +343,15 @@ function Chats(){
 		setShowBlockAlert(false);
 	  };
 
+	  const handleOptionChange = (selectId, selectedOption) => {
+		console.log("selected Option=", selectedOption)
+        setSelectTag((prevTags) => 
+            prevTags.map((tag) =>
+                tag.id === selectId ? { ...tag, selectedOption } : tag
+            )
+        );
+    };
+
 //========================================================================================================
 //========================================================================================================
 //                                              HTML			                                  
@@ -399,9 +416,26 @@ function Chats(){
 					):("")}
 				</div> */}
 
-<div className="end">
-      <input className="lookForFriends" type="text" value={friend} onChange={handleFriend} />
-      <TouchDiv>
+				<div className="end">
+					{selectTags.map((selectTag) => (
+				  <div key={selectTag.id}>
+				    <select
+				      value={selectTag.selectedOption}
+					  className="lookForFriends"
+				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
+				    >
+				      <option value="">{
+					selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
+					}</option>
+				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
+				        <option key={index} value={item.username}>
+				          {item.username}
+				        </option>
+				      ))}
+				    </select>
+				  </div>
+				))}
+      	<TouchDiv>
         <motion.div onClick={handleAddFriend}>
           <MdOutlineGroupAdd />
         </motion.div>

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

@@ -155,6 +155,10 @@ const Modal = ({handleClose}) => {
         			  ))}
         			</select>
       			)}
+				  {channel.private ? (
+					<input className="mdp" placeholder="password" type="text" />
+				  ):("")}
+
 
 				<div className="div_submit">
 					<Link to='#' className="submit" onClick={ joinChannel }>Join</Link>

containers/react/src/styles/Messages.css

@@ -315,4 +315,12 @@ input.in{
 	color: white;
 	border-radius: 12px;
 	width: 70%;
-}
+}
+
+.mdp{
+	background-color : black;
+	border-radius: 8px;
+	color: white;
+	width: 20%;
+}
+