chat work but no good css

containers/api/src/app.controller.ts

@@ -178,10 +178,17 @@ export class AppController {
 	return await this.chatService.createMessage(message);
   }
 
-  @Post('/getMessage')
+  @Post('/member')
-  async getMessage(@Request() req, @Body() data: any) {
+  async getMember(@Body() data: any) {
 	console.log(data);
-	console.log(req.query	)
+	console.log(`get member= ${data.convId}`);
+	return await this.chatService.findConv(data.convId);
+  }
+
+  @Post('/getMessage')
+  async getMessage(@Body() data: any) {
+	console.log(data);
+	// console.log(req.query)
 	console.log(`data get /conv= ${data.convId}`);
 	// let test = {id: 2, members: "cc"};
 

containers/api/src/chat/chat.service.ts

@@ -37,6 +37,13 @@ export class ChatService {
 	return convs;
 }
 
+async findConv(number: number){
+	// username = "apommier"
+	console.log(`fincConv; ${number}`)
+	const conv = await this.chatRepository.findOneBy({id: number})
+	return conv;
+}
+
 // Usage
 // const user = 'user1';
 // findConvsContainingUser(user)

containers/chat/src/chat/chat.gateway.ts

@@ -5,7 +5,13 @@ import { v4 as uuidv4 } from 'uuid';
 @WebSocketGateway({ cors: true })
 export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
 
+	@WebSocketServer()
+	server: Server;
+
 	private clients: Record<string, Socket> = {};
+	// private clientsNames: Record<string, Socket[]> = {};
+	private clientsNames: Map<string, string[]> = new Map();
+	// private games: Map<string, Socket[]> = new Map();// Chat en cours, identifiées par un ID
 
 	afterInit(server: Server)
 	{
@@ -15,30 +21,212 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
 	handleConnection(client: Socket, ...args: any[])
 	{
 		console.log(`Client connected: ${client.id}`);
+		// console.log(`Client connected: ${args[0].username}`);
 
-		const clientId = uuidv4();
+		// const clientId = args[0].username;
+		const clientId = client.id;
     	this.clients[clientId] = client;
-		client.emit('chat:clientId', clientId);
+		// client.emit('chat:clientId', clientId);
-
 		console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
 	}
 
 	handleDisconnect(client: Socket)
 	{
-		console.log(`Client disconnected: ${client.id}`);
+		console.log(`Client want to deco: ${client.id}`);
 
-		const disconnectedClientId = Object.keys(this.clients).find(clientId => this.clients[clientId] === client);
+		// const disconnectedClientId = Object.keys(this.clients).find(clientId => this.clients[clientId] === client);
+		const disconnectedClientId = client.id
 		if (disconnectedClientId)
 		{
+			this.clientsNames.forEach((clientArray, clientName) =>
+			{
+				// clientArray.
+				console.log(`Clients with name ${clientName}:`);
+				console.log(`array= ${clientArray}`)
+				console.log(`lenght= ${clientArray.length}`)
+				clientArray.forEach((targetClient, index) =>
+				{
+					console.log(`index= ${index}`)
+					console.log(`lenght2= ${clientArray.length}`)
+					if (targetClient === disconnectedClientId)
+					{
+						console.log("find it")
+						console.log(`target= ${clientArray[index]}`)
+						// delete this.clientsNames[clientName][index];
+						if (clientArray.length === 1)
+						{
+							console.log("delete true")
+							this.clientsNames.delete(clientName);
+							return 
+						}
+						else
+						{
+							const newArray = clientArray.filter(item => item !== targetClient);
+							this.clientsNames.delete(clientName);
+							this.clientsNames.set(clientName, newArray);
+						}
+							// 
+						// this.clientsNames[clientName].delete(index);
+						// else
+							
+						return ;
+					}
+				});
+			});
 			delete this.clients[disconnectedClientId];
+			// delete this.clientsNames;
 			console.log(`Client disconnected: ${disconnectedClientId}`);
 			console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
 		}
 	}	
 	
+	@SubscribeMessage('connection')
+	connectClient(client: any, payload: any): void {
+		console.log("connect client")
+		if (this.clientsNames.has(payload.username)) {
+			console.log("get it")
+			const clientArray = this.clientsNames.get(payload.username); // Retrieve the array
+			clientArray.push(client.id); // Add the new client to the array
+		  } else {
+			console.log("create")
+			this.clientsNames.set(payload.username, [client.id]); // Create a new array with the new client as the value
+		  }
+		// let clientLenght = Object.keys(this.clientsNames[payload.username]).length
+		// const clientArray = this.clientsNames.get(payload.username)
+		// let clientLenght = clientArray.
+		// console.log(`lenght= ${clientLenght}`)
 		
-	@SubscribeMessage('message')
+		// this.clientsNames[payload.username][clientLenght] = this.clients[client.id];
-	handleMessage(client: any, payload: any): string {
+		// console.log(`clients: ${Object.keys(this.clientsNames).length}`)
-		return 'Hello world!';
+		// this.clients[clientId] = client;
+
+		//add a new client with socket and name for key
+		//payload.username
   }
-}
+  
+
+	// @SubscribeMessage('sendMessage')
+	// handleMessage(user: any, payload: any): void {
+	// 	console.log(`message recceveid: ${payload}`)
+	// 	console.log(`message recceveid: ${payload.sender}`)
+	// 	console.log(`message recceveid: ${payload.convId}`)
+	// 	console.log(`message recceveid: ${payload.members}`)
+
+	// 	console.log(`client id: ${user.id}`)
+
+	// 	this.clientsNames.forEach((clientArray, clientName) => {
+	// 		console.log(`Clients with name ${clientName}:`);
+			
+	// 		// clientArray.forEach((client) => {
+	// 		this.clientsNames[clientName]
+	// 		// .forEach(client => {
+	// 		// 	// if(client.id != user.id)
+	// 		// 	// {
+	// 		// 		console.log("send to someone")
+	// 		// 		console.log(client); // Perform actions on each client
+	// 		// 		// clients.emit('message', payload)
+	// 		// 		client.emit('message')
+	// 		// 	// }
+	// 		// });
+			
+	// 		// .forEach((client) => {
+	// 			// if(client.id != user.id)
+	// 			// {
+	// 			// 	console.log("send to someone")
+	// 			// 	console.log(client); // Perform actions on each client
+	// 			// 	// clients.emit('message', payload)
+	// 			// 	client.emit('message')
+	// 			// }
+	// 		});
+	// 	  };
+
+	@SubscribeMessage('sendMessage')
+	handleMessage(client: Socket, payload: any): void {
+	//   console.log(`message received: ${payload}`);
+	  console.log(`message sender: ${payload.sender}`);
+	  console.log(`client id: ${client.id}`);
+	  console.log(`conversation ID: ${payload.convId}`);
+	  console.log(`members: ${payload.members}`);
+	
+	  this.clientsNames.forEach((clientArray, clientName) =>
+	  {
+		console.log(`		5Clients with name ${clientName}:`);
+		if (payload.members.includes(clientName))
+		{
+			clientArray.forEach((targetClient, index) =>
+			{
+			  console.log(`client id: ${client.id}`);
+			  console.log(`target: ${targetClient}`);
+			  console.log(`target id: ${targetClient}`);
+			  if (targetClient && targetClient !== client.id)
+			  {
+				console.log("Sending to someone");
+				console.log(`index= ${index}`);
+				console.log(`target: ${targetClient}`); // Perform actions on each target client
+				// targetClient.emit('message')
+				// this.clientsNames[clientName].emit('message')
+				// this.clientsNames["apommier"].emit('message')
+				this.clients[targetClient].emit('message', payload)
+				// console.log(test)
+				// console.log(test)
+				// this.clientsNames[clientName][index].emit('message');
+				// const socket = this.server.sockets.sockets.get(targetClient.id);
+				// if (socket) {
+				//   socket.emit('message', payload);
+				// } else {
+				//   console.log(`Socket with ID ${client.id} not found.`);
+				// }
+				// targetClient.emit('message', payload);
+				// targetClient.emit('message', payload);
+			  }
+			  else {
+				console.log("not sending");
+			  }
+			});
+		}
+	});
+	}
+
+
+	}
+
+
+
+
+		// for (let key in this.clientsNames) {
+		// 	if (payload.members.includes(key)) {
+		// 		console.log("Key exists in the array");
+		// 		// if (key !== payload.sender)
+		// 		// {
+		// 			for (let key2 in this.clientsNames[key])
+		// 			{
+		// 				if (client.id !== this.clientsNames[key][key2])
+		// 				{
+		// 					console.log("send to someone")
+		// 					this.clientsNames[key][key2].emit('message', payload)
+		// 				}
+		// 			}
+		// 		// }
+		// 		//if member socket different from mine
+		// 			//send
+		// 	  } else {
+		// 		console.log("Key does not exist in the array");
+		// 	  }
+			//if key is in member
+				
+			// let socket = this.clients[key];
+			// console.log("Clé:", key);
+			// console.log("Socket:", socket);
+		// }
+		//		payload.convId // conv user instead ? 
+		//find user to send message to 
+		//const res = {
+			//convId: payload.convId
+			//sender: payload.sender
+
+		// }
+		//while (user of conv)//how to get conv user
+			// if (user connected)
+				//send res to user
+//   }
+

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import '../../styles/Messages.css'
 import styled from "styled-components";
 import DefaultPic from '../../assets/profile.jpg'
@@ -24,10 +24,10 @@ const UserChat = styled.div `
 	}
 `
 
-const SideSpan = styled.span`
+// const SideSpan = styled.span`
-	font-size: 18px;
+// 	font-size: 18px;
-	font-weight: 500;
+// 	font-weight: 500;
-`
+// `
 
 const SideP = styled.p`
 	font-size: 14px;
@@ -35,18 +35,40 @@ const SideP = styled.p`
 	margin-left: 15px;
 `
 
+//========================================================================================================
+//========================================================================================================
+//                                              Socket handler			                                  
+//========================================================================================================
+//========================================================================================================
+
+
+
+
+//========================================================================================================
+//========================================================================================================
+//                                              Logical part			                                  
+//========================================================================================================
+//========================================================================================================
+
+
 function Chats(){
 	
 	const [conversations, setConversation] = useState([]);
-	const [user, setUser] = useState([]);
+	const [user, setUser] = useState(null);
 	const [currentChat, setCurrentChat] = useState(null);
 	const [messages, setMessage] = useState([]);
 	const [newMessages, setNewMessage] = useState("");
-	const [socket, setSocket] = useState(null);
+	const [incomingMessage, setIncomingMessage] = useState("");
+	const socket = useRef();
 	
-	useEffect(()=> {
+	// Socket handler
-		setSocket(io("http://localhost:4001"));
+
-	}, [])
+	// socket.on('message', (data) => { //data should be a message ?
+	// 	console.log(`message received data= ${data}`)
+	// 	setMessage([...messages, data]);
+	// });
+
+	//End of socket handler
 
 	useEffect(()=> {
 
@@ -57,14 +79,59 @@ function Chats(){
 				console.log(convs);
 				setUser(tmpUser);
 				setConversation(convs.data);
+				// return tmpUser;
+
+
+				console.log(`tmpUser= ${tmpUser.data}`);
+				socket.current = io("http://localhost:4001");
+				console.log(`connection....`);
+				socket.current.emit('connection', {username: tmpUser.data.username})
+				// const socket = io("http://localhost:4001", {
+				 // 	query: {
+				   // 	username: user.data.username,
+				  // },});
+				socket.current.on('message', (data) => { //data should be a message ?
+					console.log(`message received data= ${data.sender}`)
+					console.log(`message received data= ${data.convId}`)
+					console.log(`message received data= ${data.sender}`)
+					console.log(`curretn chat = ${currentChat}`)
+					setIncomingMessage(data);
+				});
+
 			}
 			catch(err){
 				console.log(err);
 			}
 		};
 		getConv();
+
 	}, [])
 
+	useEffect(()=> {
+		if (currentChat)
+		console.log(currentChat.id)
+		// console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`)
+		if (currentChat !== null && currentChat.id === incomingMessage.convId)
+			setMessage((prev) => [...prev, incomingMessage]);
+	}, [incomingMessage, currentChat])
+
+	// useEffect(()=> {
+
+	// 	const getConv = async ()=>{
+	// 		try{
+	// 			const convs = await api.get("/conv")
+	// 			const tmpUser = await api.get("/profile")
+	// 			console.log(convs);
+	// 			setUser(tmpUser);
+	// 			setConversation(convs.data);
+	// 		}
+	// 		catch(err){
+	// 			console.log(err);
+	// 		}
+	// 	};
+	// 	getConv();
+	// }, [])
+
 	useEffect(()=> { 
 		const getMessage = async ()=>
 		{
@@ -81,18 +148,30 @@ function Chats(){
 	getMessage()
 	}, [currentChat])
 
+
+
 	const handleSubmit = async (e)=>{
 		e.preventDefault();
 		const message = {
 			sender: user.data.username,
 			text: newMessages,
-			convId: currentChat.id
+			convId: currentChat.id,
+			members: null
 		};
 		try{
+			console.log(`id= ${currentChat.id}`)
 			const res = await api.post('/message', message);
-			setMessage([...messages, res.data]);
+			const convMember = await api.post('/member', message);
-		} catch(err){
+			message.members = convMember.data.members;
+			console.log(convMember);
+			// console.log(`currentChat= ${currentChat.id}`)
 			
+			setMessage([...messages, res.data]);
+			setNewMessage("");
+			socket.current.emit('sendMessage', message);
+		} 
+		catch(err){
+			 console.log(err)
 		}
 	}