Started migration to material-ui

frontend/src/App.js

@@ -4,6 +4,7 @@ import { toast, ToastContainer } from "react-toastify";
 
 import Home from "./pages/Home/Home";
 import Chat from "./pages/Chat/Chat";
+import Chat2 from "./pages/Chat-Material/Chat2";
 import Profile from "./pages/Profile/Profile";
 import Signup from "./pages/Signup/Signup";
 import Login from "./pages/Login/Login";
@@ -52,6 +53,11 @@ const App = () => {
 					path="/chat"
 					render={props => <Chat showToast={showToast} />}
 				/>
+				<Route
+					exact
+					path="/chat2"
+					render={props => <Chat2 showToast={showToast} />}
+				/>
 			</Switch>
 		</BrowserRouter>
 	);

frontend/src/components/Navbar/LogedinNavbar.js

@@ -2,6 +2,7 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import { Navbar, Nav, Container } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
+import "./Navbar.css";
 
 const DefaultNavbar = () => {
 	const username = localStorage.getItem("username");
@@ -31,6 +32,9 @@ const DefaultNavbar = () => {
 							<LinkContainer to="/chat">
 								<Nav.Link href="#link">Chat</Nav.Link>
 							</LinkContainer>
+							<LinkContainer to="/chat2">
+								<Nav.Link href="#link">Chat MaterialUi</Nav.Link>
+							</LinkContainer>
 						</Nav>
 						<Navbar.Text>
 							Logado como: <a href="#login">{username}</a>

frontend/src/index.js

@@ -1,11 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
 import "bootstrap/dist/css/bootstrap.min.css";
+import ScopedCssBaseline from "@material-ui/core/ScopedCssBaseline";
+
+import App from "./App";
 
 ReactDOM.render(
 	<React.StrictMode>
-		<App />
+		<ScopedCssBaseline>
+			<App />
+		</ScopedCssBaseline>
 	</React.StrictMode>,
 	document.getElementById("root")
 );

frontend/src/pages/Chat-Material/Chat2.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import Grid from "@material-ui/core/Grid";
+import Container from "@material-ui/core/Container";
+import Paper from "@material-ui/core/Paper";
+import { makeStyles } from "@material-ui/core/styles";
+
+import ContactsHeader from "./components/ContactsHeader/ContactsHeader";
+import ContactsList from "./components/ContactsList/ContactsList";
+import MessagesList from "./components/MessagesList/MessagesList";
+import MessagesInput from "./components/MessagesInput/MessagesInput";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		flexGrow: 1,
+	},
+	welcomeMsg: {
+		backgroundColor: "#eee",
+		// display: "flex",
+		// flex: 1,
+		// alignItems: "center",
+		height: 626,
+		textAlign: "center",
+	},
+}));
+
+const Chat2 = () => {
+	const classes = useStyles();
+	const [selectedContact, setSelectedContact] = useState(null);
+
+	return (
+		<div>
+			<Container maxWidth="lg">
+				<br></br>
+				<Grid container spacing={0}>
+					<Grid item xs={4}>
+						<ContactsHeader />
+						<ContactsList setSelectedContact={setSelectedContact} />
+					</Grid>
+					<Grid item xs={7}>
+						{selectedContact ? (
+							<>
+								<MessagesList selectedContact={selectedContact} />
+								<MessagesInput selectedContact={selectedContact} />
+							</>
+						) : (
+							<Paper square className={classes.welcomeMsg}>
+								Selecione um contato para começar a conversar
+							</Paper>
+						)}
+					</Grid>
+				</Grid>
+			</Container>
+		</div>
+	);
+};
+
+export default Chat2;

frontend/src/pages/Chat-Material/components/ContactsHeader/ContactsHeader.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import IconButton from "@material-ui/core/IconButton";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import Avatar from "@material-ui/core/Avatar";
+
+import profileDefaultPic from "../../../../Images/profile_default.png";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		flexGrow: 1,
+	},
+	contactsHeader: {
+		display: "flex",
+		backgroundColor: "#eee",
+		borderBottomLeftRadius: 0,
+		borderBottomRightRadius: 0,
+		borderTopRightRadius: 0,
+	},
+	settingsIcon: {
+		alignSelf: "center",
+		marginLeft: "auto",
+		padding: 8,
+	},
+}));
+
+const ContactsHeader = () => {
+	const classes = useStyles();
+
+	const username = localStorage.getItem("username");
+
+	return (
+		<Card variant="outlined" className={classes.contactsHeader}>
+			<CardHeader
+				avatar={<Avatar alt="logged_user" src={profileDefaultPic} />}
+				title={username}
+			/>
+			<IconButton className={classes.settingsIcon} aria-label="settings">
+				<MoreVertIcon />
+			</IconButton>
+		</Card>
+	);
+};
+
+export default ContactsHeader;

frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js

@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
+import api from "../../../../util/api";
+import openSocket from "socket.io-client";
+
+import profileDefaultPic from "../../../../Images/profile_default.png";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
+import Paper from "@material-ui/core/Paper";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemAvatar from "@material-ui/core/ListItemAvatar";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import Avatar from "@material-ui/core/Avatar";
+import Divider from "@material-ui/core/Divider";
+import Badge from "@material-ui/core/Badge";
+import SearchIcon from "@material-ui/icons/Search";
+import InputBase from "@material-ui/core/InputBase";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		flexGrow: 1,
+	},
+
+	badgeStyle: {
+		color: "white",
+		backgroundColor: green[500],
+	},
+
+	contactsList: {
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0,
+		borderBottomRightRadius: 0,
+		height: 500,
+		overflowY: "scroll",
+		"&::-webkit-scrollbar": {
+			width: "8px",
+		},
+		"&::-webkit-scrollbar-thumb": {
+			// borderRadius: "2px",
+			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+			backgroundColor: "#e8e8e8",
+		},
+	},
+	contactsSearchBox: {
+		background: "#fafafa",
+		position: "relative",
+		padding: "10px 13px",
+	},
+
+	serachInputWrapper: {
+		background: "#fff",
+		borderRadius: 40,
+	},
+
+	searchIcon: {
+		color: "grey",
+		marginLeft: 7,
+		marginRight: 7,
+		verticalAlign: "middle",
+	},
+
+	contactsSearchInput: {
+		border: "none",
+		borderRadius: 30,
+		width: "80%",
+	},
+}));
+
+const ContactsList = ({ selectedContact, setSelectedContact }) => {
+	const classes = useStyles();
+	const token = localStorage.getItem("token");
+
+	const [contacts, setContacts] = useState([]);
+	const [displayedContacts, setDisplayedContacts] = useState([]);
+	const [notification, setNotification] = useState(true);
+
+	const history = useHistory();
+
+	useEffect(() => {
+		const fetchContacts = async () => {
+			try {
+				const res = await api.get("/contacts", {
+					headers: { Authorization: "Bearer " + token },
+				});
+				setContacts(res.data);
+				setDisplayedContacts(res.data);
+			} catch (err) {
+				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();
+	}, [selectedContact, token, notification, history]);
+
+	useEffect(() => {
+		const socket = openSocket("http://localhost:8080");
+
+		socket.emit("joinNotification");
+
+		socket.on("contact", data => {
+			if (data.action === "create") {
+				addContact(data.contact);
+			}
+			if (data.action === "updateUnread") {
+				resetUnreadMessages(data.contactId);
+			}
+		});
+
+		socket.on("appMessage", data => {
+			setNotification(prevState => !prevState);
+			// handleUnreadMessages(data.message.contactId);
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	const resetUnreadMessages = contactId => {
+		setDisplayedContacts(prevState => {
+			let aux = [...prevState];
+			let contactIndex = aux.findIndex(contact => contact.id === +contactId);
+			aux[contactIndex].unreadMessages = 0;
+
+			return aux;
+		});
+	};
+
+	const addContact = contact => {
+		setContacts(prevState => [contact, ...prevState]);
+		setDisplayedContacts(prevState => [contact, ...prevState]);
+	};
+
+	const handleSelectContact = (e, contact) => {
+		setSelectedContact(contact);
+		setNotification(prevState => !prevState);
+	};
+
+	const handleSearchContact = e => {
+		let searchTerm = e.target.value.toLowerCase();
+
+		setDisplayedContacts(
+			contacts.filter(contact =>
+				contact.name.toLowerCase().includes(searchTerm)
+			)
+		);
+	};
+
+	return (
+		<>
+			<Paper variant="outlined" square className={classes.contactsSearchBox}>
+				<div className={classes.serachInputWrapper}>
+					<SearchIcon className={classes.searchIcon} />
+					<InputBase
+						className={classes.contactsSearchInput}
+						placeholder="Buscar contatos"
+						type="serach"
+						onChange={handleSearchContact}
+					/>
+				</div>
+			</Paper>
+			<Paper variant="outlined" className={classes.contactsList}>
+				<List>
+					{displayedContacts.map((contact, index) => (
+						<React.Fragment key={contact.id}>
+							<ListItem button onClick={e => handleSelectContact(e, contact)}>
+								<ListItemAvatar>
+									<Avatar
+										src={
+											contact.imageURL ? contact.imageURL : profileDefaultPic
+										}
+									>
+										>
+									</Avatar>
+								</ListItemAvatar>
+								<ListItemText
+									primary={contact.name}
+									secondary="last contact message..."
+								/>
+								<ListItemSecondaryAction>
+									{contact.unreadMessages > 0 && (
+										<Badge
+											badgeContent={contact.unreadMessages}
+											classes={{
+												badge: classes.badgeStyle,
+											}}
+										/>
+									)}
+								</ListItemSecondaryAction>
+							</ListItem>
+							<Divider variant="inset" component="li" />
+						</React.Fragment>
+					))}
+				</List>
+			</Paper>
+		</>
+	);
+};
+
+export default ContactsList;

frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import InputBase from "@material-ui/core/InputBase";
+
+import AttachFileIcon from "@material-ui/icons/AttachFile";
+import MoodIcon from "@material-ui/icons/Mood";
+import SendIcon from "@material-ui/icons/Send";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		flexGrow: 1,
+	},
+
+	newMessageBox: {
+		background: "#eee",
+		display: "flex",
+		padding: "10px 13px",
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0,
+		borderBottomLeftRadius: 0,
+	},
+
+	messageInputWrapper: {
+		background: "#fff",
+		borderRadius: 40,
+		flex: 1,
+	},
+
+	messageInput: {
+		paddingLeft: 10,
+		border: "none",
+		borderRadius: 30,
+		width: "80%",
+	},
+
+	sendMessageIcon: {
+		opacity: "80%",
+		margin: 4,
+		alignSelf: "middle",
+		cursor: "pointer",
+		"&:hover": {
+			opacity: "70%",
+		},
+	},
+}));
+
+const MessagesInput = () => {
+	const classes = useStyles();
+
+	return (
+		<Paper variant="outlined" className={classes.newMessageBox}>
+			<MoodIcon className={classes.sendMessageIcon} />
+			<AttachFileIcon className={classes.sendMessageIcon} />
+			<div className={classes.messageInputWrapper}>
+				<InputBase
+					className={classes.messageInput}
+					placeholder="Escreva uma mensagem"
+				/>
+			</div>
+			<SendIcon className={classes.sendMessageIcon} />
+		</Paper>
+	);
+};
+
+export default MessagesInput;

frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js

@@ -0,0 +1,461 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import AccessTimeIcon from "@material-ui/icons/AccessTime";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import DoneIcon from "@material-ui/icons/Done";
+import DoneAllIcon from "@material-ui/icons/DoneAll";
+import SearchIcon from "@material-ui/icons/Search";
+import InputBase from "@material-ui/core/InputBase";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import IconButton from "@material-ui/core/IconButton";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import Avatar from "@material-ui/core/Avatar";
+import { green } from "@material-ui/core/colors";
+
+import api from "../../../../util/api";
+import openSocket from "socket.io-client";
+
+import moment from "moment-timezone";
+import InfiniteScrollReverse from "react-infinite-scroll-reverse";
+import ModalImage from "react-modal-image";
+import ReactAudioPlayer from "react-audio-player";
+
+const useStyles = makeStyles(theme => ({
+	messagesHeader: {
+		display: "flex",
+		backgroundColor: "#eee",
+		borderTopLeftRadius: 0,
+		borderBottomLeftRadius: 0,
+		borderBottomRightRadius: 0,
+	},
+
+	messagesSearchInputWrapper: {
+		margin: 20,
+		marginLeft: "auto",
+		background: "#fff",
+		borderRadius: 40,
+		width: 250,
+	},
+
+	messagesSearchInput: {
+		border: "none",
+		borderRadius: 30,
+	},
+
+	searchIcon: {
+		color: "grey",
+		marginLeft: 7,
+		marginRight: 7,
+		verticalAlign: "middle",
+	},
+
+	settingsIcon: {
+		alignSelf: "center",
+		padding: 8,
+	},
+
+	messagesList: {
+		backgroundImage: 'url("http://localhost:8080/public/wa-background.png")',
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		padding: "20px 20px 20px 20px",
+		height: 500,
+		overflowY: "scroll",
+		"&::-webkit-scrollbar": {
+			width: "8px",
+		},
+		"&::-webkit-scrollbar-thumb": {
+			// borderRadius: "2px",
+			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+			backgroundColor: "#e8e8e8",
+		},
+	},
+	wrapper: {
+		position: "relative",
+	},
+
+	circleLoading: {
+		color: green[500],
+		position: "absolute",
+		top: 0,
+		left: "50%",
+		marginTop: 12,
+		// marginLeft: -12,
+	},
+
+	messageLeft: {
+		marginTop: 5,
+		minWidth: 100,
+		maxWidth: 600,
+		height: "auto",
+		display: "block",
+		position: "relative",
+
+		backgroundColor: "#ffffff",
+		alignSelf: "flex-start",
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 0,
+		borderBottomRightRadius: 8,
+		paddingLeft: 5,
+		paddingRight: 5,
+		paddingTop: 5,
+		paddingBottom: 0,
+		boxShadow: "0 2px 2px #808888",
+	},
+
+	messageRight: {
+		marginLeft: 20,
+		marginTop: 5,
+		minWidth: 100,
+		maxWidth: 600,
+		height: "auto",
+		display: "block",
+		position: "relative",
+
+		backgroundColor: "#dcf8c6",
+		alignSelf: "flex-end",
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 0,
+		paddingLeft: 5,
+		paddingRight: 5,
+		paddingTop: 5,
+		paddingBottom: 0,
+		boxShadow: "0 2px 2px #808888",
+	},
+
+	messageMedia: {
+		objectFit: "cover",
+		width: 250,
+		height: 200,
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 8,
+	},
+
+	textContentItem: {
+		overflowWrap: "break-word",
+		padding: "0px 60px 10px 0px",
+	},
+
+	timestamp: {
+		fontSize: 11,
+		position: "absolute",
+		bottom: 0,
+		right: 10,
+		color: "#999",
+	},
+
+	dailyTimestamp: {
+		alignItems: "center",
+		textAlign: "center",
+		alignSelf: "center",
+		width: "110px",
+		backgroundColor: "#e1f3fb",
+		margin: "10px",
+		borderRadius: "10px",
+	},
+
+	dailyTimestampText: {
+		color: "#808888",
+		padding: 8,
+		alignSelf: "center",
+		marginLeft: "0px",
+	},
+}));
+
+const MessagesList = ({ selectedContact }) => {
+	const contactId = selectedContact.id;
+	const classes = useStyles();
+
+	const token = localStorage.getItem("token");
+
+	const [loading, setLoading] = useState(true);
+	const [messagesList, setMessagesList] = useState([]);
+	const [hasMore, setHasMore] = useState(false);
+	const [searchParam, setSearchParam] = useState("");
+	const [pageNumber, setPageNumber] = useState(0);
+	const lastMessageRef = useRef();
+
+	useEffect(() => {
+		setMessagesList([]);
+	}, [searchParam]);
+
+	useEffect(() => {
+		setLoading(true);
+		const delayDebounceFn = setTimeout(() => {
+			console.log(searchParam);
+			const fetchMessages = async () => {
+				try {
+					const res = await api.get("/messages/" + contactId, {
+						headers: { Authorization: "Bearer " + token },
+						params: { searchParam, pageNumber },
+					});
+					setMessagesList(prevMessages => {
+						return [...res.data.messages, ...prevMessages];
+					});
+					setHasMore(res.data.messages.length > 0);
+					setLoading(false);
+					if (pageNumber === 1 && res.data.messages.length > 1) {
+						scrollToBottom();
+					}
+				} catch (err) {
+					console.log(err);
+					alert(err);
+				}
+			};
+			fetchMessages();
+		}, 1000);
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchParam, pageNumber, contactId, token]);
+
+	useEffect(() => {
+		const socket = openSocket("http://localhost:8080/");
+
+		socket.emit("joinChatBox", contactId, () => {});
+
+		socket.on("appMessage", data => {
+			if (data.action === "create") {
+				addMessage(data.message);
+				scrollToBottom();
+			} else if (data.action === "update") {
+				updateMessageAck(data.message);
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+			setSearchParam("");
+			setPageNumber(1);
+			setMessagesList([]);
+		};
+	}, [contactId]);
+
+	const handleSearch = e => {
+		setSearchParam(e.target.value);
+		setPageNumber(1);
+	};
+
+	const loadMore = () => {
+		setPageNumber(prevPageNumber => prevPageNumber + 1);
+	};
+
+	const addMessage = message => {
+		setMessagesList(prevState => {
+			if (prevState.length >= 20) {
+				let aux = [...prevState];
+				aux.shift();
+				aux.push(message);
+				return aux;
+			} else {
+				return [...prevState, message];
+			}
+		});
+	};
+
+	const updateMessageAck = message => {
+		let id = message.id;
+		setMessagesList(prevState => {
+			let aux = [...prevState];
+			let messageIndex = aux.findIndex(message => message.id === id);
+			aux[messageIndex].ack = message.ack;
+
+			return aux;
+		});
+	};
+
+	const scrollToBottom = () => {
+		if (lastMessageRef) {
+			lastMessageRef.current.scrollIntoView({});
+		}
+	};
+
+	const checkMessaageMedia = message => {
+		if (message.mediaType === "image") {
+			return (
+				<ModalImage
+					className={classes.messageMedia}
+					smallSrcSet={message.mediaUrl}
+					medium={message.mediaUrl}
+					large={message.mediaUrl}
+					alt="image"
+				/>
+			);
+		}
+		if (message.mediaType === "audio") {
+			return <ReactAudioPlayer src={message.mediaUrl} controls />;
+		}
+
+		if (message.mediaType === "video") {
+			return (
+				<video
+					className={classes.messageMedia}
+					src={message.mediaUrl}
+					controls
+				/>
+			);
+		} else {
+			return <a href={message.mediaUrl}>Download</a>;
+		}
+	};
+
+	const renderMessageAck = message => {
+		if (message.ack === 0) {
+			return <AccessTimeIcon fontSize="small" />;
+		}
+		if (message.ack === 1) {
+			return <DoneIcon fontSize="small" />;
+		}
+		if (message.ack === 2) {
+			return <DoneAllIcon fontSize="small" />;
+		}
+		if (message.ack === 3) {
+			return <DoneAllIcon fontSize="small" color="primary" />;
+		}
+	};
+
+	const renderDailyTimestamps = (message, index) => {
+		if (index === 0) {
+			return (
+				<span
+					className={classes.dailyTimestamp}
+					key={`timestamp-${message.id}`}
+				>
+					<div className={classes.dailyTimestampText}>
+						{moment(messagesList[index].createdAt)
+							.tz("America/Sao_Paulo")
+							.format("DD/MM/YY")}
+					</div>
+				</span>
+			);
+		}
+		if (index < messagesList.length - 1) {
+			let messageDay = moment(messagesList[index].createdAt)
+				.tz("America/Sao_Paulo")
+				.format("DD/MM/YY");
+
+			let previousMessageDay = moment(messagesList[index - 1].createdAt)
+				.tz("America/Sao_Paulo")
+				.format("DD/MM/YY");
+
+			if (messageDay > previousMessageDay) {
+				return (
+					<span
+						className={classes.dailyTimestamp}
+						key={`timestamp-${message.id}`}
+					>
+						<div className={classes.dailyTimestampText}>
+							{moment(messagesList[index].createdAt)
+								.tz("America/Sao_Paulo")
+								.format("DD/MM/YY")}
+						</div>
+					</span>
+				);
+			}
+		}
+		if (index + 1 === messagesList.length) {
+			return (
+				<div
+					key={`ref-${message.createdAt}`}
+					ref={lastMessageRef}
+					style={{ float: "left", clear: "both" }}
+				/>
+			);
+		}
+	};
+
+	const renderMessages = () => {
+		if (messagesList.length > 0) {
+			let viewMessagesList = [];
+			messagesList.forEach((message, index) => {
+				if (message.userId === 0) {
+					viewMessagesList.push(
+						renderDailyTimestamps(message, index),
+						<div className={classes.messageLeft} key={message.id}>
+							{message.mediaUrl && checkMessaageMedia(message)}
+							<div className={classes.textContentItem}>
+								{message.messageBody}
+								<span className={classes.timestamp}>
+									{moment(message.createdAt)
+										.tz("America/Sao_Paulo")
+										.format("HH:mm")}
+								</span>
+							</div>
+						</div>
+					);
+				} else {
+					viewMessagesList.push(
+						renderDailyTimestamps(message, index),
+						<div className={classes.messageRight} key={message.id}>
+							{message.mediaUrl && checkMessaageMedia(message)}
+							<div className={classes.textContentItem}>
+								{message.messageBody}
+								<span className={classes.timestamp}>
+									{moment(message.createdAt)
+										.tz("America/Sao_Paulo")
+										.format("HH:mm")}{" "}
+									{renderMessageAck(message)}
+								</span>
+							</div>
+						</div>
+					);
+				}
+			});
+			return viewMessagesList;
+		} else {
+			return <div>Diga olá ao seu novo contato</div>;
+		}
+	};
+
+	console.log(messagesList);
+
+	return (
+		<>
+			<Card variant="outlined" className={classes.messagesHeader}>
+				<CardHeader
+					avatar={<Avatar alt="contact_name" src={selectedContact.imageURL} />}
+					title={selectedContact.name}
+					subheader="Contacts Status"
+				/>
+				<div className={classes.messagesSearchInputWrapper}>
+					<SearchIcon className={classes.searchIcon} />
+					<InputBase
+						className={classes.messagesSearchInput}
+						placeholder="Pesquisar mensagens"
+						onChange={handleSearch}
+						value={searchParam}
+					/>
+				</div>
+				<div className={classes.settingsIcon}>
+					<IconButton aria-label="settings">
+						<MoreVertIcon />
+					</IconButton>
+				</div>
+			</Card>
+			<div className={classes.wrapper}>
+				<InfiniteScrollReverse
+					className={classes.messagesList}
+					hasMore={hasMore}
+					isLoading={loading}
+					loadMore={loadMore}
+					loadArea={10}
+				>
+					{messagesList.length > 0 ? renderMessages() : []}
+				</InfiniteScrollReverse>
+				{loading ? (
+					<div>
+						<CircularProgress className={classes.circleLoading} />
+					</div>
+				) : null}
+			</div>
+		</>
+	);
+};
+
+export default MessagesList;

frontend/src/pages/Chat/Chat.css

@@ -62,10 +62,11 @@
 /* List user */
 
 .viewListUser {
-	overflow-y: scroll;
-	max-height: 90vh;
-	min-height: 90vh;
-	height: auto;
+	overflow: scroll;
+	display: inline-block;
+	/* max-height: 100%;
+	min-height: 100%; */
+	height: 80vh;
 	width: 50vh;
 	/* padding-top: 10px; */
 	/* padding-bottom: 10px; */

frontend/src/pages/ChatBox/ChatBox.css

@@ -4,18 +4,16 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	width: 100%;
 	position: relative;
-
+	height: 92vh;
 	background-image: url("../../Images/wa-background.png");
 
 	backface-visibility: hidden;
 	border-left: 1px solid #ededed;
-	/* border-right: 5px solid #DFA375; */
-	max-height: 104.3%;
-	min-height: 104.3%;
+	/* max-height: 104.3%; */
+	/* min-height: 104.3%; */
 	/* margin-right: 20px; */
-	border-radius: 10px;
+	/* border-radius: 10px; */
 	/* box-shadow: 0 5px 5px #808888; */
 }
 .viewAvatarItem {
@@ -168,35 +166,39 @@ input::placeholder {
 	color: rgb(199, 199, 199);
 }
 
-.rootsearchbar {
+/* serach messages */
+
+.searchMessageBar {
 	padding: 10px;
 	width: 300px;
 	margin-bottom: 10px;
 	background-color: #f7f7f7;
 }
 
-.input-container {
-	/* IE10 */
-	display: flex;
-	width: 300px;
-	margin-bottom: 15px;
-}
-
-.input-field {
+.search-input-field {
 	width: 300px;
 
 	border-radius: 10px;
 
 	/* margin-right: 85%; */
+	align-self: center;
 	border: none !important;
 	box-shadow: none !important;
 	outline: none !important;
 
-	width: 100%;
 	padding: 10px;
 	text-align: center;
 }
 
+.search-input-container {
+	/* IE10 */
+	display: flex;
+	width: 50%;
+	margin-left: 50%;
+	align-content: flex-end;
+	margin-bottom: 0px;
+}
+
 /* View item message */
 
 .viewItemRight {

frontend/src/pages/ChatBox/ChatBox.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import InfiniteScrollReverse from "react-infinite-scroll-reverse";
-import ReactLoading from "react-loading";
+import { Spinner } from "react-bootstrap";
 import {
 	FiPaperclip,
 	FiSend,
@@ -41,8 +41,11 @@ const ChatBox = ({ currentPeerContact }) => {
 	const [hasMore, setHasMore] = useState(false);
 	const [searchParam, setSearchParam] = useState("");
 	const [pageNumber, setPageNumber] = useState(0);
+	const lastMessageRef = useRef();
 
-	useEffect(() => setListMessages([]), [searchParam]);
+	useEffect(() => {
+		setListMessages([]);
+	}, [searchParam]);
 
 	useEffect(() => {
 		setLoading(true);
@@ -60,6 +63,9 @@ const ChatBox = ({ currentPeerContact }) => {
 					setHasMore(res.data.messages.length > 0);
 					setLoading(false);
 					console.log(res.data);
+					if (pageNumber === 1 && res.data.messages.length > 0) {
+						scrollToBottom();
+					}
 				} catch (err) {
 					console.log(err);
 					alert(err);
@@ -78,6 +84,7 @@ const ChatBox = ({ currentPeerContact }) => {
 		socket.on("appMessage", data => {
 			if (data.action === "create") {
 				addMessage(data.message);
+				scrollToBottom();
 			} else if (data.action === "update") {
 				updateMessageAck(data.message);
 			}
@@ -109,8 +116,23 @@ const ChatBox = ({ currentPeerContact }) => {
 		});
 	};
 
+	const scrollToBottom = () => {
+		if (lastMessageRef) {
+			lastMessageRef.current.scrollIntoView({});
+		}
+	};
+
 	const addMessage = message => {
-		setListMessages(prevState => [...prevState, message]);
+		setListMessages(prevState => {
+			if (prevState.length >= 20) {
+				let aux = [...prevState];
+				aux.shift();
+				aux.push(message);
+				return aux;
+			} else {
+				return [...prevState, message];
+			}
+		});
 	};
 
 	const handleChangeInput = e => {
@@ -206,6 +228,15 @@ const ChatBox = ({ currentPeerContact }) => {
 				);
 			}
 		}
+		if (index + 1 === listMessages.length) {
+			return (
+				<div
+					key={`ref-${message.createdAt}`}
+					ref={lastMessageRef}
+					style={{ float: "left", clear: "both" }}
+				></div>
+			);
+		}
 	};
 
 	const renderMsgAck = message => {
@@ -232,9 +263,9 @@ const ChatBox = ({ currentPeerContact }) => {
 							<div className="viewItemLeft2" key={message.id}>
 								<ModalImage
 									className="imgItemLeft"
-									smallSrcSet={`${SERVER_URL}${message.mediaUrl}`}
-									medium={`${SERVER_URL}${message.mediaUrl}`}
-									large={`${SERVER_URL}${message.mediaUrl}`}
+									smallSrcSet={message.mediaUrl}
+									medium={message.mediaUrl}
+									large={message.mediaUrl}
 									alt=""
 								/>
 								<div className="textContentItem">
@@ -442,9 +473,9 @@ const ChatBox = ({ currentPeerContact }) => {
 						<p>Status do contato</p>
 					</span>
 				</div>
-				<div className="input-container">
+				<div className="search-input-container">
 					<input
-						className="input-field"
+						className="search-input-field"
 						type="text"
 						placeholder="Buscar Mensagens"
 						onChange={handleSearch}
@@ -459,7 +490,7 @@ const ChatBox = ({ currentPeerContact }) => {
 				loadMore={loadMore}
 				loadArea={10}
 			>
-				{renderMessages()}
+				{listMessages.length > 0 ? renderMessages() : []}
 			</InfiniteScrollReverse>
 
 			{media.preview ? (
@@ -525,7 +556,7 @@ const ChatBox = ({ currentPeerContact }) => {
 			)}
 			{loading ? (
 				<div className="viewLoading">
-					<ReactLoading type={"spin"} color={""} height={"3%"} width={"3%"} />
+					<Spinner animation="border" variant="success" />
 				</div>
 			) : null}
 		</div>