Before add pagination

frontend/src/components/MessageSearch/useMessageSerach.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import api from "../../util/api";
+
+const useMessageSerach = (query, pageNumber) => {
+	useEffect(() => {
+		const fetchMessages = async () => {
+			try {
+				const res = await api.get("/messages/" + contactId, {
+					headers: { Authorization: "Bearer " + token },
+					params: { serach: query, page: pageNumber },
+				});
+				setListMessages(res.data);
+			} catch (err) {
+				alert(err);
+			}
+		};
+	}, [query, pageNumber]);
+
+	return null;
+};
+
+export default useMessageSerach;

frontend/src/pages/Chat/Chat.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import "./Chat.css";
+import { useHistory } from "react-router-dom";
 import api from "../../util/api";
 import profilePic from "../../Images/canove.png";
 import profileDefaultPic from "../../Images/profile_default.png";
@@ -10,12 +10,15 @@ import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
 import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
 
 import ChatBox from "../ChatBox/ChatBox";
+import "./Chat.css";
 // let socket;
 
 const Chat = ({ showToast }) => {
 	const token = localStorage.getItem("token");
 	const username = localStorage.getItem("username");
 
+	const history = useHistory();
+
 	const [currentPeerContact, setCurrentPeerContact] = useState(null);
 	const [contacts, setContacts] = useState([]);
 	const [displayedContacts, setDisplayedContacts] = useState([]);
@@ -30,11 +33,18 @@ const Chat = ({ showToast }) => {
 				setContacts(res.data);
 				setDisplayedContacts(res.data);
 			} catch (err) {
-				alert(err.response.data.message);
+				if (err.response.data.message === "invalidToken") {
+					localStorage.removeItem("token");
+					localStorage.removeItem("username");
+					localStorage.removeItem("userId");
+					history.push("/login");
+					alert("Sessão expirada, por favor, faça login novamente.");
+				}
+				console.log(err);
 			}
 		};
 		fetchContacts();
-	}, [currentPeerContact, token, notification]);
+	}, [currentPeerContact, token, notification, history]);
 
 	useEffect(() => {
 		const socket = openSocket("http://localhost:8080");
@@ -42,7 +52,6 @@ const Chat = ({ showToast }) => {
 		socket.emit("joinNotification");
 
 		socket.on("contact", data => {
-			console.log("mensagem de um novo contato");
 			if (data.action === "create") {
 				addContact(data.contact);
 				setNotification(prevState => !prevState);
@@ -50,7 +59,6 @@ const Chat = ({ showToast }) => {
 		});
 
 		socket.on("appMessage", data => {
-			console.log("mensagem de contato existente");
 			setNotification(prevState => !prevState);
 			// handleUnreadMessages(data.message.contactId);
 		});

frontend/src/pages/ChatBox/ChatBox.css

@@ -171,40 +171,43 @@ input::placeholder {
 /* View item message */
 
 .viewItemRight {
+	margin-right: 20px;
+	margin-top: 5px;
 	min-width: 100px;
 	max-width: 600px;
 	height: auto;
-
-	margin-right: 20px;
-	margin-top: 5px;
-	background-color: #dcf8c6;
+	display: block;
+	position: relative;
 	align-self: flex-end;
+	text-align: left;
+	background-color: #dcf8c6;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 8px;
 	border-bottom-right-radius: 0px;
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	color: #203152;
 	box-shadow: 0 5px 5px #808888;
+	padding-left: 10px;
+	padding-right: 40px;
+	padding-top: 5px;
+	padding-bottom: 0px;
+	color: #203152;
 }
 
 .viewItemRight2 {
-	width: 300px;
-	padding: 4px;
+	width: 315px;
+	padding: 8px;
 	height: auto;
 	background-color: #dcf8c6;
 	align-self: flex-end;
 	margin-right: 20px;
 	margin-top: 10px;
+	display: block;
+	position: relative;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 8px;
 	border-bottom-right-radius: 0px;
 	color: #203152;
-	/* text-align: left; */
 	box-shadow: 0 5px 5px #808888;
 }
 
@@ -214,6 +217,8 @@ input::placeholder {
 	align-self: flex-end;
 	margin-right: 20px;
 	margin-top: 10px;
+	display: block;
+	position: relative;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 8px;
@@ -247,33 +252,37 @@ input::placeholder {
 }
 
 .viewItemLeft {
+	margin-left: 20px;
+	margin-top: 5px;
 	min-width: 100px;
 	max-width: 600px;
 	height: auto;
+	display: block;
+	position: relative;
 
-	margin-left: 20px;
-	margin-top: 5px;
 	background-color: #ffffff;
 	align-self: flex-start;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 0px;
 	border-bottom-right-radius: 8px;
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
+	padding-left: 10px;
+	padding-right: 40px;
+	padding-top: 5px;
+	padding-bottom: 0px;
 	color: #303030;
 	box-shadow: 0 5px 5px #808888;
 }
 
 .viewItemLeft2 {
-	width: 300px;
-	padding: 4px;
+	width: 315px;
+	padding: 8px;
 	height: auto;
+	background-color: #ffffff;
 	margin-left: 10px;
 	margin-top: 10px;
-	background-color: #ffffff;
+	display: block;
+	position: relative;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 0px;
@@ -287,6 +296,8 @@ input::placeholder {
 	margin-top: 10px;
 	width: 300px;
 	height: auto;
+	display: block;
+	position: relative;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 0px;
@@ -330,10 +341,16 @@ input::placeholder {
 .textContentItem {
 	font-size: 16px;
 	overflow-wrap: break-word;
+	padding: 0px 50px 0px 0px;
 }
 
-.messageAck {
-	font-size: 10px;
+.timestamp {
+	font-size: 11px;
+	position: absolute;
+	bottom: 5px;
+	right: 10px;
+	text-transform: uppercase;
+	color: #999;
 }
 
 .viewListContentChat div:last-child {
@@ -354,7 +371,7 @@ input::placeholder {
 
 .imgItemLeft {
 	object-fit: cover;
-	width: 300px;
+	width: 290px;
 	height: 300px;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;

frontend/src/pages/ChatBox/ChatBox.js

@@ -1,10 +1,13 @@
-import React, { useState, useEffect } from "react";
-import { Card } from "react-bootstrap";
-import { FiPaperclip, FiSend, FiX, FiSmile, FiDownload } from "react-icons/fi";
+import React, { useState, useEffect, useRef } from "react";
+// import { Card } from "react-bootstrap"; alterei pra DIV, remover caso não dê problemas
+import { FiPaperclip, FiSend, FiX, FiSmile } from "react-icons/fi";
 import { RiSendPlane2Line } from "react-icons/ri";
+import { BsCheck, BsCheckAll, BsClock } from "react-icons/bs";
+import { FaFileDownload } from "react-icons/fa";
 import "emoji-mart/css/emoji-mart.css";
 import { Picker } from "emoji-mart";
 import ModalImage from "react-modal-image";
+import moment from "moment-timezone";
 
 import api from "../../util/api";
 import openSocket from "socket.io-client";
@@ -15,7 +18,12 @@ import ScrollToBottom from "react-scroll-to-bottom";
 
 import "react-toastify/dist/ReactToastify.css";
 import "./ChatBox.css";
-// let socket;
+
+// const executeScroll = myRef =>
+// 	myRef.current.scrollIntoView({
+// 		// behavior: "smooth",
+// 		block: "end",
+// 	});
 
 const ChatBox = ({ currentPeerContact }) => {
 	const SERVER_URL = "http://localhost:8080/";
@@ -25,19 +33,29 @@ const ChatBox = ({ currentPeerContact }) => {
 	const username = localStorage.getItem("username");
 	const token = localStorage.getItem("token");
 	const mediaInitialState = { preview: "", raw: "", name: "" };
+	// const [isLoading, setIsLoading] = useState(true);
 
 	const [listMessages, setListMessages] = useState([]);
 	const [inputMessage, setInputMessage] = useState("");
 	const [media, setMedia] = useState(mediaInitialState);
 	const [showEmoji, setShowEmoji] = useState(false);
 
+	// let lastMessageRef = useRef();
+
+	// useEffect(() => {
+	// 	executeScroll(lastMessageRef);
+	// }, [isLoading]);
+
 	useEffect(() => {
 		const fetchMessages = async () => {
+			// setIsLoading(true);
 			try {
 				const res = await api.get("/messages/" + contactId, {
 					headers: { Authorization: "Bearer " + token },
+					params: { page: 3 },
 				});
 				setListMessages(res.data);
+				// setIsLoading(false);
 			} catch (err) {
 				alert(err);
 			}
@@ -58,9 +76,13 @@ const ChatBox = ({ currentPeerContact }) => {
 		socket.emit("joinChatBox", contactId, () => {});
 
 		socket.on("appMessage", data => {
+			// setIsLoading(true);
 			if (data.action === "create") {
 				addMessage(data.message);
+			} else if (data.action === "update") {
+				updateMessageAck(data.message);
 			}
+			// setIsLoading(false);
 		});
 
 		return () => {
@@ -68,6 +90,18 @@ const ChatBox = ({ currentPeerContact }) => {
 		};
 	}, [contactId]);
 
+	const updateMessageAck = message => {
+		let id = message.id;
+		setListMessages(prevState => {
+			console.log("mudando o ack da mensagem");
+			let aux = [...prevState];
+			let messageIndex = aux.findIndex(message => message.id === id);
+			aux[messageIndex].ack = message.ack;
+
+			return aux;
+		});
+	};
+
 	const addMessage = message => {
 		setListMessages(prevState => [...prevState, message]);
 	};
@@ -140,10 +174,24 @@ const ChatBox = ({ currentPeerContact }) => {
 
 	console.log(listMessages);
 
+	const renderMsgAck = message => {
+		//todo remove timestamp logic from main return and adopt moment to timestamps
+		if (message.ack === 0) {
+			return <BsClock size="18" />;
+		} else if (message.ack === 1) {
+			return <BsCheck size="18" />;
+		} else if (message.ack === 2) {
+			return <BsCheckAll size="18" />;
+		} else if (message.ack === 3) {
+			return <BsCheckAll size="18" color="green" />;
+		}
+	};
+
 	const renderMessages = () => {
 		if (listMessages.length > 0) {
 			let viewListMessages = [];
 			listMessages.forEach((message, index) => {
+				// mensagens recebidas
 				if (message.userId === 0) {
 					if (message.mediaUrl && message.mediaType === "image") {
 						viewListMessages.push(
@@ -155,36 +203,80 @@ const ChatBox = ({ currentPeerContact }) => {
 									large={`${SERVER_URL}${message.mediaUrl}`}
 									alt=""
 								/>
-								<span className="textContentItem">{message.messageBody}</span>
+								<div className="textContentItem">
+									{message.messageBody}
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}
+									</span>
+								</div>
 							</div>
 						);
 					} else if (message.mediaUrl && message.mediaType === "audio") {
 						viewListMessages.push(
-							<div className="viewItemLeft3" key={message.id}>
-								{message.messageBody}
+							<div className="viewItemLeft2" key={message.id}>
 								<ReactAudioPlayer
 									src={`${SERVER_URL}${message.mediaUrl}`}
 									controls
 								/>
+								<div className="textContentItem">
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}
+									</span>
+								</div>
+							</div>
+						);
+					} else if (message.mediaUrl && message.mediaType === "video") {
+						viewListMessages.push(
+							<div className="viewItemLeft2" key={message.id}>
+								<video
+									className="imgItemLeft"
+									src={`${SERVER_URL}${message.mediaUrl}`}
+									controls
+								/>
+								<div className="textContentItem">
+									{message.messageBody}
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}
+									</span>
+								</div>
 							</div>
 						);
 					} else if (message.mediaUrl) {
 						viewListMessages.push(
 							<div className="viewItemLeft" key={message.id}>
-								<a
-									href={`${SERVER_URL}${message.mediaUrl}`}
-									className="textContentItem"
-								>
-									{message.messageBody}
-									<hr></hr>
-									Download <FiDownload size="20" />
-								</a>
+								<div className="textContentItem">
+									<a
+										href={`${SERVER_URL}${message.mediaUrl}`}
+										className="textContentItem"
+									>
+										{message.messageBody}
+										<FaFileDownload size="20" />
+									</a>
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}
+									</span>
+								</div>
 							</div>
 						);
 					} else {
 						viewListMessages.push(
 							<div className="viewItemLeft" key={message.id}>
-								<span className="textContentItem">{message.messageBody}</span>
+								<div className="textContentItem">
+									{message.messageBody}
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}
+									</span>
+								</div>
 							</div>
 						);
 					}
@@ -193,43 +285,86 @@ const ChatBox = ({ currentPeerContact }) => {
 						viewListMessages.push(
 							<div className="viewItemRight2" key={message.id}>
 								<ModalImage
-									className="imgItemLeft"
+									className="imgItemRight"
 									smallSrcSet={`${SERVER_URL}${message.mediaUrl}`}
 									medium={`${SERVER_URL}${message.mediaUrl}`}
 									large={`${SERVER_URL}${message.mediaUrl}`}
 									alt=""
 								/>
-								<span className="textContentItem">{message.messageBody}</span>
+								<div className="textContentItem">
+									{message.messageBody}
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}{" "}
+										{renderMsgAck(message)}
+									</span>
+								</div>
 							</div>
 						);
+						// mensagens enviadas
 					} else if (message.mediaUrl && message.mediaType === "audio") {
 						viewListMessages.push(
-							<div className="viewItemRight3" key={message.id}>
-								{message.messageBody}
+							<div className="viewItemRight2 " key={message.id}>
 								<ReactAudioPlayer
 									src={`${SERVER_URL}${message.mediaUrl}`}
 									controls
 								/>
+								<div className="textContetItem">
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}{" "}
+										{renderMsgAck(message)}
+									</span>
+								</div>
+							</div>
+						);
+					} else if (message.mediaUrl && message.mediaType === "video") {
+						viewListMessages.push(
+							<div className="viewItemRight2" key={message.id}>
+								<video src={`${SERVER_URL}${message.mediaUrl}`} controls />
+								{message.messageBody}
+								<span className="timestamp">
+									{moment(message.createdAt)
+										.tz("America/Sao_Paulo")
+										.format("HH:mm")}{" "}
+									{renderMsgAck(message)}
+								</span>
 							</div>
 						);
 					} else if (message.mediaUrl) {
 						viewListMessages.push(
 							<div className="viewItemRight" key={message.id}>
-								<a
-									href={`${SERVER_URL}${message.mediaUrl}`}
-									className="textContentItem"
-								>
-									{message.messageBody}
-									<hr></hr>
-									Download <FiDownload size="20" />
-								</a>
+								<div className="textContentItem">
+									<a
+										href={`${SERVER_URL}${message.mediaUrl}`}
+										className="textContentItem"
+									>
+										{message.messageBody}
+										<FaFileDownload size="20" />
+									</a>
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}{" "}
+										{renderMsgAck(message)}
+									</span>
+								</div>
 							</div>
 						);
 					} else {
 						viewListMessages.push(
 							<div className="viewItemRight" key={message.id}>
-								<span className="textContentItem ">{message.messageBody}</span>
-								<span className="messageAck">{message.ack}</span>
+								<div className="textContentItem">
+									{message.messageBody}
+									<span className="timestamp">
+										{moment(message.createdAt)
+											.tz("America/Sao_Paulo")
+											.format("HH:mm")}{" "}
+										{renderMsgAck(message)}
+									</span>
+								</div>
 							</div>
 						);
 					}
@@ -246,7 +381,7 @@ const ChatBox = ({ currentPeerContact }) => {
 	};
 
 	return (
-		<Card className="viewChatBoard">
+		<div className="viewChatBoard">
 			<div className="headerChatBoard">
 				<img
 					className="viewAvatarItem"
@@ -257,13 +392,14 @@ const ChatBox = ({ currentPeerContact }) => {
 					<p style={{ fontSize: "20px" }}>{currentPeerContact.name}</p>
 				</span>
 				<div className="aboutme">
-					<span>
-						<p>Status do contato</p>
-					</span>
+					<span>Status do contato</span>
 				</div>
 			</div>
 			<ScrollToBottom className="viewListContentChat">
-				<div className="viewListContentChat">{renderMessages()}</div>
+				<div className="viewListContentChat">
+					{renderMessages()}
+					{/* <div ref={lastMessageRef}> </div> */}
+				</div>
 			</ScrollToBottom>
 			{media.preview ? (
 				<div className="viewMediaBottom">
@@ -326,7 +462,7 @@ const ChatBox = ({ currentPeerContact }) => {
 					<FiSend color="gray" className="icSend" onClick={handleSendMessage} />
 				</div>
 			)}
-		</Card>
+		</div>
 	);
 };