Antes de alterar o CSS do chatbox

backend/app.js

@@ -52,6 +52,7 @@ sequelize
 			});
 
 			socket.on("joinNotification", () => {
+				console.log("chat entro no canal de notificações");
 				socket.join("notification");
 			});
 

backend/controllers/message.js

@@ -1,18 +1,13 @@
 const fs = require("fs");
 const Message = require("../models/Message");
 const Contact = require("../models/Contact");
-const io = require("../socket");
+const { getIO } = require("../socket");
+const { getWbot } = require("./wbot");
 
-const wbot = require("./wbot");
 const { MessageMedia } = require("whatsapp-web.js");
 
-exports.getContactMessages = async (req, res, next) => {
-	const { contactId } = req.params;
-
+const setMessagesAsRead = async contactId => {
 	try {
-		const contact = await Contact.findByPk(contactId);
-		const contactMessages = await contact.getMessages();
-
 		const result = await Message.update(
 			{ read: true },
 			{
@@ -23,6 +18,35 @@ exports.getContactMessages = async (req, res, next) => {
 			}
 		);
 
+		if (!result) {
+			const error = new Error(
+				"Erro ao definir as mensagens como lidas no banco de dados"
+			);
+			error.satusCode = 501;
+			throw error;
+		}
+	} catch (err) {
+		next(err);
+	}
+};
+
+exports.getContactMessages = async (req, res, next) => {
+	const wbot = getWbot();
+	const io = getIO();
+
+	const { contactId } = req.params;
+
+	try {
+		const contact = await Contact.findByPk(contactId);
+		if (!contact) {
+			const error = new Error("Erro ao localizar o contato no banco de dados");
+			error.satusCode = 501;
+			throw error;
+		}
+
+		setMessagesAsRead(contactId);
+		const contactMessages = await contact.getMessages();
+
 		return res.json(contactMessages);
 	} catch (err) {
 		next(err);
@@ -30,9 +54,13 @@ exports.getContactMessages = async (req, res, next) => {
 };
 
 exports.postCreateContactMessage = async (req, res, next) => {
+	const wbot = getWbot();
+	const io = getIO();
+
 	const { contactId } = req.params;
 	const message = req.body;
 	const media = req.file;
+	let sentMessage;
 
 	try {
 		const contact = await Contact.findByPk(contactId);
@@ -45,11 +73,16 @@ exports.postCreateContactMessage = async (req, res, next) => {
 				message.mediaType = "other";
 			}
 
-			wbot.getWbot().sendMessage(`${contact.number}@c.us`, newMedia);
+			sentMessage = await wbot.sendMessage(`${contact.number}@c.us`, newMedia);
 		} else {
-			wbot.getWbot().sendMessage(`${contact.number}@c.us`, message.messageBody);
+			sentMessage = await wbot.sendMessage(
+				`${contact.number}@c.us`,
+				message.messageBody
+			);
 		}
 
+		message.id = sentMessage.id.id;
+
 		const newMessage = await contact.createMessage(message);
 		if (!newMessage) {
 			const error = new Error("Erro ao inserir a mensagem no banco de dados");
@@ -57,7 +90,7 @@ exports.postCreateContactMessage = async (req, res, next) => {
 			throw error;
 		}
 
-		io.getIO().to(contactId).emit("appMessage", {
+		io.to(contactId).emit("appMessage", {
 			action: "create",
 			message: newMessage,
 		});

backend/controllers/session.json

@@ -1 +1 @@
-{"WABrowserId":"\"W5pw0Llb60mSeV7WOHnk8A==\"","WASecretBundle":"{\"key\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\",\"encKey\":\"FQ1MZ2eIH9hKV4dqFoBYTv1/89aopcMAa4CXgh/9csM=\",\"macKey\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\"}","WAToken1":"\"mjiCXmqu33f9L6eQ/8RP/ud+axdbx9y4wDFAqfJD90o=\"","WAToken2":"\"1@o99W6mNitfwQz+tg3dNp4f5/z0mMj3tR/fRgy2wuneqfze+ccCkZ9O8NT15xRlqPwAbgdpT+nJ0krg==\""}
+{"WABrowserId":"\"W5pw0Llb60mSeV7WOHnk8A==\"","WASecretBundle":"{\"key\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\",\"encKey\":\"FQ1MZ2eIH9hKV4dqFoBYTv1/89aopcMAa4CXgh/9csM=\",\"macKey\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\"}","WAToken1":"\"cCkFiHM1JR5ck9OMV+WCiBG6QLCjsCjifdel3jRQ56k=\"","WAToken2":"\"1@0Y7HKBGDZWNuaYV7LiEwm0Y8xzlGoUGoyI8OD/KWjEH7UqVxJWfeT+pMNF4XBO7LeyEjpXVljC6rvQ==\""}

backend/controllers/wbotMessageListener.js

@@ -1,4 +1,6 @@
 const Contact = require("../models/Contact");
+const Message = require("../models/Message");
+
 const path = require("path");
 const fs = require("fs");
 
@@ -6,15 +8,18 @@ const { getIO } = require("../socket");
 const { getWbot } = require("./wbot");
 
 const wbotMessageListener = () => {
-	getWbot().on("message", async msg => {
+	const io = getIO();
+	const wbot = getWbot();
+
+	wbot.on("message", async msg => {
 		let newMessage;
+		console.log(msg);
 		const msgContact = await msg.getContact();
 		const imageUrl = await msgContact.getProfilePicUrl();
 		try {
 			let contact = await Contact.findOne({
 				where: { number: msgContact.number },
 			});
-			// await contact.update({ imageURL: imageUrl });
 
 			if (!contact) {
 				try {
@@ -24,9 +29,9 @@ const wbotMessageListener = () => {
 						imageURL: imageUrl,
 					});
 
-					contact.dataValues.unreadMessages = 1;
+					// contact.dataValues.unreadMessages = 1;
 
-					getIO().emit("contact", {
+					io.to("notification").emit("contact", {
 						action: "create",
 						contact: contact,
 					});
@@ -54,18 +59,20 @@ const wbotMessageListener = () => {
 					);
 
 					newMessage = await contact.createMessage({
+						id: msg.id.id,
+						messageBody: msg.body || media.filename,
 						mediaUrl: path.join("public", media.filename),
 						mediaType: media.mimetype.split("/")[0],
-						messageBody: msg.body || media.filename,
 					});
 				}
 			} else {
 				newMessage = await contact.createMessage({
+					id: msg.id.id,
 					messageBody: msg.body,
 				});
 			}
 
-			getIO().to(contact.id).to("notification").emit("appMessage", {
+			io.to(contact.id).to("notification").emit("appMessage", {
 				action: "create",
 				message: newMessage,
 			});
@@ -76,6 +83,25 @@ const wbotMessageListener = () => {
 			console.log(err);
 		}
 	});
+
+	wbot.on("message_ack", (msg, ack) => {
+		// console.log("alteração do ack da msg", msg);
+		try {
+			const result = Message.update({ ack: ack }, { where: { id: msg.id.id } });
+
+			if (!result) {
+				const error = new Error(
+					"Erro ao definir as mensagens como lidas no banco de dados"
+				);
+				error.satusCode = 501;
+				throw error;
+			}
+		} catch (err) {
+			console.log(err);
+		}
+
+		console.log("ack da msg", ack);
+	});
 };
 
 module.exports = wbotMessageListener;

backend/models/Message.js

@@ -2,7 +2,13 @@ const Sequelize = require("sequelize");
 const sequelize = require("../util/database");
 
 const Message = sequelize.define("message", {
+	id: {
+		type: Sequelize.STRING(50),
+		allowNull: false,
+		primaryKey: true,
+	},
 	userId: { type: Sequelize.INTEGER, defaultValue: 0 },
+	ack: { type: Sequelize.INTEGER, defaultValue: 0 },
 	messageBody: { type: Sequelize.STRING(250), allowNull: false },
 	read: { type: Sequelize.BOOLEAN, defaultValue: false },
 	mediaUrl: { type: Sequelize.STRING(250) },

frontend/src/pages/Chat/Chat.js

@@ -42,14 +42,15 @@ const Chat = ({ showToast }) => {
 		socket.emit("joinNotification");
 
 		socket.on("contact", data => {
-			console.log(data);
+			console.log("mensagem de um novo contato");
 			if (data.action === "create") {
 				addContact(data.contact);
+				setNotification(prevState => !prevState);
 			}
 		});
 
 		socket.on("appMessage", data => {
-			console.log("recebendo msg");
+			console.log("mensagem de contato existente");
 			setNotification(prevState => !prevState);
 			// handleUnreadMessages(data.message.contactId);
 		});
@@ -57,7 +58,7 @@ const Chat = ({ showToast }) => {
 		return () => {
 			socket.disconnect();
 		};
-	}, [contacts]);
+	}, []);
 
 	// const handleUnreadMessages = contactId => {
 	// 	console.log("Atualizando mensagens n lidas");

frontend/src/pages/ChatBox/ChatBox.css

@@ -332,6 +332,10 @@ input::placeholder {
 	overflow-wrap: break-word;
 }
 
+.messageAck {
+	font-size: 10px;
+}
+
 .viewListContentChat div:last-child {
 	margin-bottom: 10px;
 }

frontend/src/pages/ChatBox/ChatBox.js

@@ -138,6 +138,8 @@ const ChatBox = ({ currentPeerContact }) => {
 		setShowEmoji(false);
 	};
 
+	console.log(listMessages);
+
 	const renderMessages = () => {
 		if (listMessages.length > 0) {
 			let viewListMessages = [];
@@ -227,6 +229,7 @@ const ChatBox = ({ currentPeerContact }) => {
 						viewListMessages.push(
 							<div className="viewItemRight" key={message.id}>
 								<span className="textContentItem ">{message.messageBody}</span>
+								<span className="messageAck">{message.ack}</span>
 							</div>
 						);
 					}