maintenance commit

frontend/src/pages/Chat/Chat.js

@@ -10,6 +10,7 @@ import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
 import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
 
 import ChatBox from "../ChatBox/ChatBox";
+// let socket;
 
 const Chat = ({ showToast }) => {
 	const token = localStorage.getItem("token");
@@ -18,18 +19,28 @@ const Chat = ({ showToast }) => {
 	const [currentPeerContact, setCurrentPeerContact] = useState(null);
 	const [contacts, setContacts] = useState([]);
 	const [displayedContacts, setDisplayedContacts] = useState([]);
+	const [notification, setNotification] = useState(true);
 
 	useEffect(() => {
 		const fetchContacts = async () => {
-			const res = await api.get("/contacts", {
-				headers: { Authorization: "Bearer " + token },
-			});
-			setContacts(res.data);
-			setDisplayedContacts(res.data);
+			try {
+				const res = await api.get("/contacts", {
+					headers: { Authorization: "Bearer " + token },
+				});
+				setContacts(res.data);
+				setDisplayedContacts(res.data);
+			} catch (err) {
+				alert(err.response.data.message);
+			}
 		};
 		fetchContacts();
+	}, [currentPeerContact, token, notification]);
+
+	useEffect(() => {
 		const socket = openSocket("http://localhost:8080");
 
+		socket.emit("joinNotification");
+
 		socket.on("contact", data => {
 			console.log(data);
 			if (data.action === "create") {
@@ -37,14 +48,31 @@ const Chat = ({ showToast }) => {
 			}
 		});
 
+		socket.on("appMessage", data => {
+			console.log("recebendo msg");
+			setNotification(prevState => !prevState);
+			// handleUnreadMessages(data.message.contactId);
+		});
+
 		return () => {
 			socket.disconnect();
 		};
-	}, [currentPeerContact, token]);
+	}, [contacts]);
+
+	// const handleUnreadMessages = contactId => {
+	// 	console.log("Atualizando mensagens n lidas");
+	// 	console.log(contacts);
+	// 	let aux = [...contacts];
+	// 	let contactIndex = aux.findIndex(contact => contact.id === contactId);
+	// 	aux[contactIndex].unreadMessages++;
+
+	// 	aux.unshift(aux.splice(contactIndex, 1)[0]);
+
+	// 	setDisplayedContacts(aux);
+	// };
 
 	const addContact = contact => {
 		setContacts(prevState => [...prevState, contact]);
-		console.log("adicionando contato", contact);
 		setDisplayedContacts(prevState => [...prevState, contact]);
 	};
 
@@ -109,16 +137,20 @@ const Chat = ({ showToast }) => {
 											<img
 												className="viewAvatarItem"
 												alt=""
-												src={profileDefaultPic}
+												src={
+													contact.imageURL
+														? contact.imageURL
+														: profileDefaultPic
+												}
 											/>
 											<div className="viewWrapContentItem">
 												<span className="textItem">{contact.name}</span>
 											</div>
 
-											{contact.messages && contact.messages.length > 0 && (
+											{contact.unreadMessages > 0 && (
 												<div className="notificationpragraph">
 													<p className="newmessages">
-														{contact.messages.length}
+														{contact.unreadMessages}
 													</p>
 												</div>
 											)}

frontend/src/pages/ChatBox/ChatBox.css

@@ -12,8 +12,8 @@
 	backface-visibility: hidden;
 	border-left: 1px solid #ededed;
 	/* border-right: 5px solid #DFA375; */
-	max-height: 104%;
-	min-height: 104%;
+	max-height: 104.3%;
+	min-height: 104.3%;
 	/* margin-right: 20px; */
 	border-radius: 10px;
 	/* box-shadow: 0 5px 5px #808888; */
@@ -67,12 +67,6 @@
 	background-color: #e8e8e8;
 }
 
-.teste {
-	border-radius: 10px;
-	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-	background-color: #e8e8e8;
-}
-
 .viewBottom {
 	display: flex;
 	flex-direction: row;
@@ -83,10 +77,14 @@
 	background-color: #f0f0f0;
 }
 
-.icOpenGallery {
-	width: 30px;
-	height: 30px;
-	margin-left: 10px;
+.viewMediaBottom {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	height: 100px;
+
+	background-color: #f0f0f0;
 }
 
 .viewInputGallery {
@@ -97,18 +95,59 @@
 	width: 30px;
 }
 
-.icOpenSticker {
-	width: 30px;
-	height: 30px;
-	margin-left: 5px;
-	margin-right: 5px;
+.icOpenGallery {
+	width: 20px;
+	height: 20px;
+	margin-left: 10px;
+	margin-right: 10px;
+	cursor: pointer;
+}
+
+.icOpenGallery:hover {
+	opacity: 70%;
+	width: 20px;
+	height: 20px;
+	margin-left: 10px;
+	margin-right: 10px;
+	cursor: pointer;
+}
+
+.icOpenEmojis {
+	width: 20px;
+	height: 20px;
+	margin-left: 10px;
+	cursor: pointer;
+}
+
+.icOpenEmojis:hover {
+	opacity: 70%;
+	width: 20px;
+	height: 20px;
+	margin-left: 10px;
+	cursor: pointer;
 }
 
 .icSend {
-	width: 30px;
-	height: 30px;
+	width: 20px;
+	height: 20px;
 	margin-left: 5px;
 	margin-right: 30px;
+	cursor: pointer;
+}
+
+.icSend:hover {
+	opacity: 70%;
+	width: 20px;
+	height: 20px;
+	margin-left: 5px;
+	margin-right: 30px;
+	cursor: pointer;
+}
+
+.viewMediaInput {
+	flex: 1;
+	width: 100%;
+	margin-right: 10px;
 }
 
 .viewInput {
@@ -132,9 +171,30 @@ input::placeholder {
 /* View item message */
 
 .viewItemRight {
-	width: 300px;
+	min-width: 100px;
+	max-width: 600px;
 	height: auto;
 
+	margin-right: 20px;
+	margin-top: 5px;
+	background-color: #dcf8c6;
+	align-self: flex-end;
+	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;
+}
+
+.viewItemRight2 {
+	width: 300px;
+	padding: 4px;
+	height: auto;
 	background-color: #dcf8c6;
 	align-self: flex-end;
 	margin-right: 20px;
@@ -144,27 +204,7 @@ input::placeholder {
 	border-bottom-left-radius: 8px;
 	border-bottom-right-radius: 0px;
 	color: #203152;
-	text-align: left;
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	box-shadow: 0 5px 5px #808888;
-}
-
-.viewItemRight2 {
-	width: 300px;
-	height: auto;
-	background-color: #e1f3fb;
-	align-self: flex-end;
-	margin-right: 20px;
-	margin-top: 10px;
-	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;
+	/* text-align: left; */
 	box-shadow: 0 5px 5px #808888;
 }
 
@@ -207,10 +247,14 @@ input::placeholder {
 }
 
 .viewItemLeft {
-	width: 300px;
+	min-width: 100px;
+	max-width: 600px;
 	height: auto;
-	margin-top: 10px;
+
+	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;
@@ -225,17 +269,22 @@ input::placeholder {
 
 .viewItemLeft2 {
 	width: 300px;
+	padding: 4px;
 	height: auto;
-	background-color: #203152;
+	margin-left: 10px;
+	margin-top: 10px;
+	background-color: #ffffff;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
 	border-bottom-left-radius: 0px;
 	border-bottom-right-radius: 8px;
-	color: white;
+	color: #203152;
 	box-shadow: 0 5px 5px #808888;
 }
 
 .viewItemLeft3 {
+	margin-left: 10px;
+	margin-top: 10px;
 	width: 300px;
 	height: auto;
 	border-top-left-radius: 8px;
@@ -280,7 +329,7 @@ input::placeholder {
 
 .textContentItem {
 	font-size: 16px;
-	word-break: break-all;
+	overflow-wrap: break-word;
 }
 
 .viewListContentChat div:last-child {
@@ -319,11 +368,9 @@ input::placeholder {
 /* Stickers */
 
 .viewStickers {
-	display: block;
+	position: absolute;
+	bottom: 90px;
 	border-top: 1px solid #e8e8e8;
-	height: 100px;
-	align-items: center;
-	justify-content: space-around;
 	overflow-x: scroll;
 }
 .viewStickers::-webkit-scrollbar-track {
@@ -360,9 +407,3 @@ input::placeholder {
 	color: #808888;
 	font-size: 14px;
 }
-
-.imgWaveHand {
-	width: 40px;
-	height: 40px;
-	margin-left: 10px;
-}

frontend/src/pages/ChatBox/ChatBox.js

@@ -1,25 +1,35 @@
 import React, { useState, useEffect } from "react";
 import { Card } from "react-bootstrap";
-import profileDefaultPic from "../../Images/profile_default.png";
-import uploadPic from "../../Images/upload.png";
-import sendPic from "../../Images/send.png";
+import { FiPaperclip, FiSend, FiX, FiSmile, FiDownload } from "react-icons/fi";
+import { RiSendPlane2Line } from "react-icons/ri";
+import "emoji-mart/css/emoji-mart.css";
+import { Picker } from "emoji-mart";
+import ModalImage from "react-modal-image";
+
 import api from "../../util/api";
 import openSocket from "socket.io-client";
+import profileDefaultPic from "../../Images/profile_default.png";
+import ReactAudioPlayer from "react-audio-player";
 
 import ScrollToBottom from "react-scroll-to-bottom";
 
 import "react-toastify/dist/ReactToastify.css";
 import "./ChatBox.css";
+// let socket;
 
 const ChatBox = ({ currentPeerContact }) => {
+	const SERVER_URL = "http://localhost:8080/";
 	const contactId = currentPeerContact.id;
 	const unreadMessages = currentPeerContact.messages;
 	const userId = localStorage.getItem("userId");
 	const username = localStorage.getItem("username");
 	const token = localStorage.getItem("token");
+	const mediaInitialState = { preview: "", raw: "", name: "" };
 
 	const [listMessages, setListMessages] = useState([]);
 	const [inputMessage, setInputMessage] = useState("");
+	const [media, setMedia] = useState(mediaInitialState);
+	const [showEmoji, setShowEmoji] = useState(false);
 
 	useEffect(() => {
 		const fetchMessages = async () => {
@@ -33,44 +43,88 @@ const ChatBox = ({ currentPeerContact }) => {
 			}
 		};
 
-		const readMesages = async () => {
-			try {
-				await api.post(
-					"/messages/setread",
-					{ messagesToSetRead: unreadMessages },
-					{ headers: { Authorization: "Bearer " + token } }
-				);
-			} catch (err) {
-				alert(err);
-			}
-		};
+		fetchMessages();
+
+		return () => {
+			setInputMessage("");
+			setShowEmoji(false);
+			setMedia({});
+		};
+	}, [contactId, unreadMessages, token]);
+
+	useEffect(() => {
+		const socket = openSocket(SERVER_URL);
+
+		socket.emit("joinChatBox", contactId, () => {});
 
-		const socket = openSocket("http://localhost:8080");
 		socket.on("appMessage", data => {
 			if (data.action === "create") {
-				if (contactId === data.message.contactId) {
-					addMessage(data.message);
-				}
+				addMessage(data.message);
 			}
 		});
 
-		fetchMessages();
-		readMesages();
-
 		return () => {
 			socket.disconnect();
 		};
-	}, [contactId, unreadMessages, token]);
+	}, [contactId]);
+
+	const addMessage = message => {
+		setListMessages(prevState => [...prevState, message]);
+	};
 
 	const handleChangeInput = e => {
 		setInputMessage(e.target.value);
 	};
 
+	const handleAddEmoji = e => {
+		let emoji = e.native;
+		setInputMessage(prevState => prevState + emoji);
+	};
+
+	const handleChangeMedia = e => {
+		if (e.target.files.length) {
+			setMedia({
+				preview: URL.createObjectURL(e.target.files[0]),
+				raw: e.target.files[0],
+				name: e.target.files[0].name,
+			});
+		}
+	};
+
+	const handleInputPaste = e => {
+		if (e.clipboardData.files[0]) {
+			setMedia({
+				preview: URL.createObjectURL(e.clipboardData.files[0]),
+				raw: e.clipboardData.files[0],
+				name: e.clipboardData.files[0].name,
+			});
+		}
+	};
+
+	const handleUploadMedia = async e => {
+		e.preventDefault();
+		const formData = new FormData();
+		formData.append("media", media.raw);
+		formData.append("userId", userId);
+		formData.append("messageBody", media.name);
+
+		try {
+			await api.post(`/messages/${contactId}`, formData, {
+				headers: { Authorization: "Bearer " + token },
+			});
+		} catch (err) {
+			console.log(err);
+			alert(err);
+		}
+		setMedia(mediaInitialState);
+	};
+
 	const handleSendMessage = async () => {
 		if (inputMessage.trim() === "") return;
 		const message = {
 			read: 1,
 			userId: userId,
+			mediaUrl: "",
 			messageBody: `${username}: ${inputMessage.trim()}`,
 		};
 		try {
@@ -81,57 +135,194 @@ const ChatBox = ({ currentPeerContact }) => {
 			alert(err);
 		}
 		setInputMessage("");
+		setShowEmoji(false);
 	};
 
-	const addMessage = message => {
-		setListMessages(prevState => [...prevState, message]);
+	const renderMessages = () => {
+		if (listMessages.length > 0) {
+			let viewListMessages = [];
+			listMessages.forEach((message, index) => {
+				if (message.userId === 0) {
+					if (message.mediaUrl && message.mediaType === "image") {
+						viewListMessages.push(
+							<div className="viewItemLeft2" key={message.id}>
+								<ModalImage
+									className="imgItemLeft"
+									smallSrcSet={`${SERVER_URL}${message.mediaUrl}`}
+									medium={`${SERVER_URL}${message.mediaUrl}`}
+									large={`${SERVER_URL}${message.mediaUrl}`}
+									alt=""
+								/>
+								<span className="textContentItem">{message.messageBody}</span>
+							</div>
+						);
+					} else if (message.mediaUrl && message.mediaType === "audio") {
+						viewListMessages.push(
+							<div className="viewItemLeft3" key={message.id}>
+								{message.messageBody}
+								<ReactAudioPlayer
+									src={`${SERVER_URL}${message.mediaUrl}`}
+									controls
+								/>
+							</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>
+						);
+					} else {
+						viewListMessages.push(
+							<div className="viewItemLeft" key={message.id}>
+								<span className="textContentItem">{message.messageBody}</span>
+							</div>
+						);
+					}
+				} else {
+					if (message.mediaUrl && message.mediaType === "image") {
+						viewListMessages.push(
+							<div className="viewItemRight2" key={message.id}>
+								<ModalImage
+									className="imgItemLeft"
+									smallSrcSet={`${SERVER_URL}${message.mediaUrl}`}
+									medium={`${SERVER_URL}${message.mediaUrl}`}
+									large={`${SERVER_URL}${message.mediaUrl}`}
+									alt=""
+								/>
+								<span className="textContentItem">{message.messageBody}</span>
+							</div>
+						);
+					} else if (message.mediaUrl && message.mediaType === "audio") {
+						viewListMessages.push(
+							<div className="viewItemRight3" key={message.id}>
+								{message.messageBody}
+								<ReactAudioPlayer
+									src={`${SERVER_URL}${message.mediaUrl}`}
+									controls
+								/>
+							</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>
+						);
+					} else {
+						viewListMessages.push(
+							<div className="viewItemRight" key={message.id}>
+								<span className="textContentItem ">{message.messageBody}</span>
+							</div>
+						);
+					}
+				}
+			});
+			return viewListMessages;
+		} else {
+			return (
+				<div className="viewWrapSayHi">
+					<span className="textSayHi">Diga olá para o seu novo contato</span>
+				</div>
+			);
+		}
 	};
 
 	return (
 		<Card className="viewChatBoard">
 			<div className="headerChatBoard">
-				<img className="viewAvatarItem" src={profileDefaultPic} alt="" />
+				<img
+					className="viewAvatarItem"
+					src={currentPeerContact.imageURL || profileDefaultPic}
+					alt=""
+				/>
 				<span className="textHeaderChatBoard">
 					<p style={{ fontSize: "20px" }}>{currentPeerContact.name}</p>
 				</span>
+				<div className="aboutme">
+					<span>
+						<p>Status do contato</p>
+					</span>
+				</div>
 			</div>
 			<ScrollToBottom className="viewListContentChat">
-				<div className="viewListContentChat">
-					{listMessages.map((message, index) =>
-						message.userId === 0 ? (
-							<div className="viewItemLeft" key={message.id}>
-								<span className="textContentItem">{message.messageBody}</span>
-							</div>
-						) : (
-							<div className="viewItemRight" key={message.id}>
-								<span className="textContentItem">{message.messageBody}</span>
-							</div>
-						)
-					)}
-				</div>
+				<div className="viewListContentChat">{renderMessages()}</div>
 			</ScrollToBottom>
-			<div className="viewBottom">
-				<img className="icOpenGallery" src={uploadPic} alt="" />
-				<input
-					// ref={input => input && input.focus()}
-					name="inputMessage"
-					className="viewInput"
-					placeholder="mensagem"
-					value={inputMessage}
-					onChange={handleChangeInput}
-					onKeyPress={e => {
-						if (e.key === "Enter") {
-							handleSendMessage();
-						}
-					}}
-				></input>
-				<img
-					className="icSend"
-					src={sendPic}
-					alt=""
-					onClick={handleSendMessage}
-				/>
-			</div>
+			{media.preview ? (
+				<div className="viewMediaBottom">
+					<FiX
+						color="gray"
+						className="icOpenGallery"
+						onClick={e => setMedia(mediaInitialState)}
+					/>
+					<span className="viewMediaInput">
+						{media.name}
+						{/* <img src={media.preview} alt=""></img> */}
+					</span>
+					<RiSendPlane2Line
+						color="gray"
+						className="icSend"
+						onClick={handleUploadMedia}
+					/>
+				</div>
+			) : (
+				<div className="viewBottom">
+					<div>
+						{showEmoji ? (
+							<div className="viewStickers">
+								<Picker onSelect={handleAddEmoji} />
+							</div>
+						) : null}
+
+						<FiSmile
+							color="gray"
+							className="icOpenEmojis"
+							onClick={e => setShowEmoji(prevState => !prevState)}
+						/>
+						<label htmlFor="upload-button">
+							<FiPaperclip color="gray" className="icOpenGallery" />
+						</label>
+						<input
+							type="file"
+							id="upload-button"
+							style={{ display: "none" }}
+							onChange={handleChangeMedia}
+						/>
+					</div>
+
+					<input
+						// ref={input => inputMessage && inputMessage.focus()}
+						name="inputMessage"
+						autoComplete="off"
+						className="viewInput"
+						placeholder="Digite uma mensagem"
+						onPaste={handleInputPaste}
+						value={inputMessage}
+						onChange={handleChangeInput}
+						onKeyPress={e => {
+							if (e.key === "Enter") {
+								handleSendMessage();
+							}
+						}}
+					/>
+
+					<FiSend color="gray" className="icSend" onClick={handleSendMessage} />
+				</div>
+			)}
 		</Card>
 	);
 };