First github Commit

2026-04-17 19:37:02 +00:00 · 2020-06-18 17:25:43 -03:00
parent 48ee6385d3
commit 8a6324a98b
19 changed files with 391 additions and 210 deletions
--- a/backend/controllers/contact.js
+++ b/backend/controllers/contact.js
@@ -3,12 +3,23 @@ const Message = require("../models/Message");
 const Sequelize = require("sequelize");

 exports.getContacts = async (req, res) => {
+	const { searchParam } = req.query;
+
+	const lowerSerachParam = searchParam.toLowerCase();
+
+	const whereCondition = {
+		name: Sequelize.where(
+			Sequelize.fn("LOWER", Sequelize.col("name")),
+			"LIKE",
+			"%" + lowerSerachParam + "%"
+		),
+	};
+
+	//todo >> add contact number to search where condition
+
 	try {
 		const contacts = await Contact.findAll({
-			include: {
-				model: Message,
-				attributes: [],
-			},
+			where: whereCondition,
 			attributes: {
 				include: [
 					[
@@ -25,7 +36,7 @@ exports.getContacts = async (req, res) => {
 					],
 				],
 			},
-			order: [[Message, "createdAt", "DESC"]],
+			order: [["updatedAt", "DESC"]],
 		});

 		return res.json(contacts);
--- a/backend/controllers/message.js
+++ b/backend/controllers/message.js
@@ -3,7 +3,7 @@ const Message = require("../models/Message");
 const Contact = require("../models/Contact");
 const { getIO } = require("../socket");
 const { getWbot } = require("./wbot");
-const sequelize = require("sequelize");
+const Sequelize = require("sequelize");

 const { MessageMedia } = require("whatsapp-web.js");

@@ -44,13 +44,11 @@ exports.getContactMessages = async (req, res, next) => {
 	const { contactId } = req.params;
 	const { searchParam, pageNumber = 1 } = req.query;

-	console.log(req.body, req.query);
-
 	const lowerSerachParam = searchParam.toLowerCase();

 	const whereCondition = {
-		messageBody: sequelize.where(
-			sequelize.fn("LOWER", sequelize.col("messageBody")),
+		messageBody: Sequelize.where(
+			Sequelize.fn("LOWER", Sequelize.col("messageBody")),
 			"LIKE",
 			"%" + lowerSerachParam + "%"
 		),
@@ -90,7 +88,11 @@ exports.getContactMessages = async (req, res, next) => {
 			};
 		});

-		return res.json({ messages: serializedMessages.reverse(), messagesFound });
+		return res.json({
+			messages: serializedMessages.reverse(),
+			contact: contact,
+			messagesFound,
+		});
 	} catch (err) {
 		next(err);
 	}
--- a/backend/controllers/wbot.js
+++ b/backend/controllers/wbot.js
@@ -1,57 +1,72 @@
 const qrCode = require("qrcode-terminal");
 const { Client } = require("whatsapp-web.js");
 const Whatsapp = require("../models/Whatsapp");
+const { getIO } = require("../socket");

 let wbot;

 module.exports = {
 	init: async () => {
-		let sessionCfg;
+		try {
+			let sessionCfg;

-		const dbSession = await Whatsapp.findOne({ where: { id: 1 } });
-		if (dbSession && dbSession.session) {
-			sessionCfg = JSON.parse(dbSession.session);
-		}
+			const dbSession = await Whatsapp.findOne({ where: { id: 1 } });
+			if (dbSession && dbSession.session) {
+				sessionCfg = JSON.parse(dbSession.session);
+			}

-		wbot = new Client({
-			session: sessionCfg,
-			restartOnAuthFail: true,
-		});
-		wbot.initialize();
-		wbot.on("qr", async qr => {
-			qrCode.generate(qr, { small: true });
-			await Whatsapp.upsert({ id: 1, qrcode: qr, status: "pending" });
-		});
-		wbot.on("authenticated", async session => {
-			console.log("AUTHENTICATED");
-			await Whatsapp.upsert({
-				id: 1,
-				session: JSON.stringify(session),
-				status: "authenticated",
+			wbot = new Client({
+				session: sessionCfg,
+				restartOnAuthFail: true,
 			});
-		});
-		wbot.on("auth_failure", async msg => {
-			console.error("AUTHENTICATION FAILURE", msg);
-			await Whatsapp.destroy({ where: { id: 1 } });
-		});
-		wbot.on("ready", async () => {
-			console.log("READY");
-			await Whatsapp.update({ status: "online" }, { where: { id: 1 } });
-			// const chats = await wbot.getChats(); // pega as mensagens nao lidas (recebidas quando o bot estava offline)
-			// let unreadMessages;                  // todo > salvar isso no DB pra mostrar no frontend
-			// for (let chat of chats) {
-			// 	if (chat.unreadCount > 0) {
-			// 		unreadMessages = await chat.fetchMessages({
-			// 			limit: chat.unreadCount,
-			// 		});
-			// 	}
-			// }
+			wbot.initialize();
+			wbot.on("qr", async qr => {
+				qrCode.generate(qr, { small: true });
+				await Whatsapp.upsert({ id: 1, qrcode: qr, status: "pending" });
+				getIO().emit("qrcode", {
+					action: "update",
+					qr: qr,
+				});
+			});
+			wbot.on("authenticated", async session => {
+				console.log("AUTHENTICATED");
+				await Whatsapp.upsert({
+					id: 1,
+					session: JSON.stringify(session),
+					status: "authenticated",
+				});
+				getIO().emit("whats_auth", {
+					action: "authentication",
+					session: dbSession,
+				});
+			});
+			wbot.on("auth_failure", async msg => {
+				console.error("AUTHENTICATION FAILURE", msg);
+				await Whatsapp.update({ session: "" }, { where: { id: 1 } });
+			});
+			wbot.on("ready", async () => {
+				console.log("READY");
+				await Whatsapp.update(
+					{ status: "online", qrcode: "" },
+					{ where: { id: 1 } }
+				);
+				// const chats = await wbot.getChats(); // pega as mensagens nao lidas (recebidas quando o bot estava offline)
+				// let unreadMessages;                  // todo > salvar isso no DB pra mostrar no frontend
+				// for (let chat of chats) {
+				// 	if (chat.unreadCount > 0) {
+				// 		unreadMessages = await chat.fetchMessages({
+				// 			limit: chat.unreadCount,
+				// 		});
+				// 	}
+				// }

-			// console.log(unreadMessages);
-			wbot.sendPresenceAvailable();
-		});
-
-		return wbot;
+				// console.log(unreadMessages);
+				wbot.sendPresenceAvailable();
+			});
+			return wbot;
+		} catch (err) {
+			console.log(err);
+		}
 	},

 	getWbot: () => {
--- a/backend/controllers/wbotMonitor.js
+++ b/backend/controllers/wbotMonitor.js
@@ -1,10 +1,6 @@
-const Contact = require("../models/Contact");
-const Message = require("../models/Message");
+const Whatsapp = require("../models/Whatsapp");
 const wbotMessageListener = require("./wbotMessageListener");

-const path = require("path");
-const fs = require("fs");
-
 const { getIO } = require("../socket");
 const { getWbot, init } = require("./wbot");

@@ -12,32 +8,43 @@ const wbotMonitor = () => {
 	const io = getIO();
 	const wbot = getWbot();

-	wbot.on("change_state", newState => {
-		console.log("monitor", newState);
-	});
+	try {
+		wbot.on("change_state", newState => {
+			console.log("monitor", newState);
+		});

-	wbot.on("change_battery", batteryInfo => {
-		// Battery percentage for attached device has changed
-		const { battery, plugged } = batteryInfo;
-		console.log(`Battery: ${battery}% - Charging? ${plugged}`);
-	});
+		wbot.on("change_battery", async batteryInfo => {
+			// Battery percentage for attached device has changed
+			const { battery, plugged } = batteryInfo;
+			try {
+				await Whatsapp.update({ battery, plugged }, { where: { id: 1 } });
+			} catch (err) {
+				console.log(err);
+			}

-	wbot.on("disconnected", reason => {
-		console.log("disconnected", reason);
-		wbot.destroy();
-		setTimeout(() =>
-			init()
-				.then(res => {
-					wbotMessageListener();
-					wbotMonitor();
-				})
-				.catch(err => console.log(err))
-		);
-	});
+			console.log(`Battery: ${battery}% - Charging? ${plugged}`); //todo> save batery state to db
+		});

-	// setInterval(() => {
-	// 	wbot.resetState();
-	// }, 20000);
+		wbot.on("disconnected", reason => {
+			console.log("disconnected", reason); //todo> save connection status to DB
+			setTimeout(
+				() =>
+					init()
+						.then(res => {
+							wbotMessageListener();
+							wbotMonitor();
+						})
+						.catch(err => console.log(err)),
+				2000
+			);
+		});
+
+		// setInterval(() => {
+		// 	wbot.resetState();
+		// }, 20000);
+	} catch (err) {
+		console.log(err);
+	}
 };

 module.exports = wbotMonitor;
--- a/backend/models/Whatsapp.js
+++ b/backend/models/Whatsapp.js
@@ -5,7 +5,9 @@ const sequelize = require("../util/database");
 const Whatsapp = sequelize.define("whatsapp", {
 	session: { type: Sequelize.TEXT() },
 	qrcode: { type: Sequelize.TEXT() },
-	status: { type: Sequelize.STRING(20) },
+	status: { type: Sequelize.STRING(60) },
+	battery: { type: Sequelize.STRING(20) },
+	plugged: { type: Sequelize.BOOLEAN() },
 });

 module.exports = Whatsapp;
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -31,9 +31,9 @@
      "dev": true
    },
    "@types/node": {
-      "version": "14.0.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.11.tgz",
-      "integrity": "sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg=="
+      "version": "14.0.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
+      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA=="
    },
    "@types/yauzl": {
      "version": "2.9.1",
@@ -1046,9 +1046,9 @@
      }
    },
    "extract-zip": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.0.tgz",
-      "integrity": "sha512-i42GQ498yibjdvIhivUsRslx608whtGoFIhF26Z7O4MYncBxp8CwalOs1lnHy21A9sIohWO2+uiE4SRtC9JXDg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
      "requires": {
        "@types/yauzl": "^2.9.1",
        "debug": "^4.1.1",
@@ -2342,9 +2342,9 @@
      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
    },
    "sequelize": {
-      "version": "5.21.12",
-      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-5.21.12.tgz",
-      "integrity": "sha512-WRTXLoH72HQnlEUbKI1Iev2yS1/epg72Chz0fHqk0MLn4Wj2pH/TS01lpMDGQqxZPXCxRGrwk1YxwUw2C0yI9A==",
+      "version": "5.21.13",
+      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-5.21.13.tgz",
+      "integrity": "sha512-wpwSpxzvADmgPkcOGeer5yFdAVsYeA7NLEw4evSXw03OlGL41J4S8hVz2/nilSWlJSwumlDGC9QbdwAmkWGqJg==",
      "requires": {
        "bluebird": "^3.5.0",
        "cls-bluebird": "^2.1.0",
@@ -2867,9 +2867,9 @@
      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
    },
    "whatsapp-web.js": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/whatsapp-web.js/-/whatsapp-web.js-1.6.1.tgz",
-      "integrity": "sha512-pj0JEIuMsWTlqlNr7vRST9XrS+lj/E4i9B7c00FCzUGu6pbPr+95QrYYY56tH5bpCtpsl2NbIB3fbYe3RlxdkA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/whatsapp-web.js/-/whatsapp-web.js-1.7.0.tgz",
+      "integrity": "sha512-cha7byb+/xWZCB60JW/bSTGaiPgWlA4m37vXjGRkUvMT30/JZyVjQ9W2hazS4dBOtnx3/8DKSnn2AQEEb6Hi5w==",
      "requires": {
        "@pedroslopez/moduleraid": "^4.1.0",
        "jsqr": "^1.3.1",
--- a/backend/package.json
+++ b/backend/package.json
@@ -23,10 +23,10 @@
 		"multer": "^1.4.2",
 		"mysql2": "^2.1.0",
 		"qrcode-terminal": "^0.12.0",
-		"sequelize": "^5.21.12",
+		"sequelize": "^5.21.13",
 		"sequelize-cli": "^5.5.1",
 		"socket.io": "^2.3.0",
-		"whatsapp-web.js": "^1.6.1"
+		"whatsapp-web.js": "^1.7.0"
 	},
 	"devDependencies": {
 		"nodemon": "^2.0.4"
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10736,6 +10736,21 @@
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
    },
+    "qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8="
+    },
+    "qrcode.react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.0.tgz",
+      "integrity": "sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.0",
+        "qr.js": "0.0.0"
+      }
+    },
    "qs": {
      "version": "6.5.2",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
    "emoji-mart": "^3.0.0",
    "moment": "^2.26.0",
    "moment-timezone": "^0.5.31",
+    "qrcode.react": "^1.0.0",
    "react": "^16.13.1",
    "react-audio-player": "^0.13.0",
    "react-bootstrap": "^1.0.1",
--- a/frontend/src/components/Layout/MainDrawer.js
+++ b/frontend/src/components/Layout/MainDrawer.js
@@ -181,7 +181,7 @@ const MainDrawer = ({ appTitle, children }) => {
 						{appTitle}
 					</Typography>
 					<IconButton color="inherit">
-						<Badge badgeContent={4} color="secondary">
+						<Badge badgeContent={0} color="secondary">
 							<NotificationsIcon />
 						</Badge>
 					</IconButton>
--- a/frontend/src/components/Layout/MainListItems.js
+++ b/frontend/src/components/Layout/MainListItems.js
@@ -12,7 +12,7 @@ import Collapse from "@material-ui/core/Collapse";
 import DashboardIcon from "@material-ui/icons/Dashboard";
 import WhatsAppIcon from "@material-ui/icons/WhatsApp";
 // import PeopleIcon from "@material-ui/icons/People";
-import BorderOuterIcon from "@material-ui/icons/BorderOuter";
+import SyncAltIcon from "@material-ui/icons/SyncAlt";
 import ChatIcon from "@material-ui/icons/Chat";
 import BarChartIcon from "@material-ui/icons/BarChart";
 import LayersIcon from "@material-ui/icons/Layers";
@@ -71,8 +71,8 @@ const MainListItems = () => {
 					<ListItemLink
 						className={classes.nested}
 						to="/whats-auth"
-						primary="Autenticação"
-						icon={<BorderOuterIcon />}
+						primary="Conexão"
+						icon={<SyncAltIcon />}
 					/>
 					<ListItemLink
 						className={classes.nested}
--- a/frontend/src/pages/Chat/Chat.js
+++ b/frontend/src/pages/Chat/Chat.js
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React from "react";
+import { useParams } from "react-router-dom";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
@@ -47,7 +48,7 @@ const useStyles = makeStyles(theme => ({

 const Chat = () => {
 	const classes = useStyles();
-	const [selectedContact, setSelectedContact] = useState(null);
+	const { contactId } = useParams();

 	return (
 		<div>
@@ -56,15 +57,12 @@ const Chat = () => {
 					<Paper square className={classes.chatPapper}>
 						<Grid container spacing={0}>
 							<Grid item xs={4} className={classes.contactsWrapper}>
-								<ContactsList
-									selectedContact={selectedContact}
-									setSelectedContact={setSelectedContact}
-								/>
+								<ContactsList />
 							</Grid>
 							<Grid item xs={8} className={classes.messagessWrapper}>
-								{selectedContact ? (
+								{contactId ? (
 									<>
-										<MessagesList selectedContact={selectedContact} />
+										<MessagesList />
 									</>
 								) : (
 									<Paper
--- a/frontend/src/pages/Chat/components/ContactsList/ContactsList.js
+++ b/frontend/src/pages/Chat/components/ContactsList/ContactsList.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 import api from "../../../../util/api";
 import openSocket from "socket.io-client";
 import moment from "moment-timezone";
@@ -8,6 +8,7 @@ import profileDefaultPic from "../../../../Images/profile_default.png";

 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import Paper from "@material-ui/core/Paper";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
@@ -45,6 +46,7 @@ const useStyles = makeStyles(theme => ({
 	},

 	contactsList: {
+		position: "relative",
 		borderTopLeftRadius: 0,
 		borderTopRightRadius: 0,
 		borderBottomRightRadius: 0,
@@ -59,6 +61,7 @@ const useStyles = makeStyles(theme => ({
 		},
 	},
 	contactsSearchBox: {
+		position: "relative",
 		background: "#fafafa",
 		padding: "10px 13px",
 	},
@@ -106,14 +109,24 @@ const useStyles = makeStyles(theme => ({
 		color: "white",
 		backgroundColor: green[500],
 	},
+	circleLoading: {
+		color: green[500],
+		opacity: "70%",
+		position: "absolute",
+		top: 0,
+		left: "50%",
+		marginTop: 12,
+		// marginLeft: -12,
+	},
 }));

-const ContactsList = ({ selectedContact, setSelectedContact }) => {
+const ContactsList = () => {
 	const classes = useStyles();
 	const token = localStorage.getItem("token");
-
+	const { contactId } = useParams();
 	const [contacts, setContacts] = useState([]);
-	const [displayedContacts, setDisplayedContacts] = useState([]);
+	const [loading, setLoading] = useState();
+	const [searchParam, setSearchParam] = useState("");

 	const history = useHistory();

@@ -126,21 +139,23 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 	}, []);

 	useEffect(() => {
-		const fetchContacts = async () => {
-			try {
-				const res = await api.get("/contacts");
-				setContacts(res.data);
-				setDisplayedContacts(res.data);
-			} catch (err) {
-				if (err) {
+		setLoading(true);
+		const delayDebounceFn = setTimeout(() => {
+			const fetchContacts = async () => {
+				try {
+					const res = await api.get("/contacts", {
+						params: { searchParam },
+					});
+					setContacts(res.data);
+					setLoading(false);
+				} catch (err) {
 					console.log(err);
-					alert(err);
 				}
-				console.log(err);
-			}
-		};
-		fetchContacts();
-	}, [token, history]);
+			};
+			fetchContacts();
+		}, 1000);
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchParam, token]);

 	useEffect(() => {
 		const socket = openSocket("http://localhost:8080");
@@ -154,60 +169,54 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 		});

 		socket.on("appMessage", data => {
-			if (
-				selectedContact &&
-				data.message.contactId === selectedContact.id &&
-				document.visibilityState === "visible"
-			) {
-				return;
+			if (data.action === "create") {
+				updateUnreadMessagesCount(data);
+				if (
+					contactId &&
+					data.message.contactId === +contactId &&
+					document.visibilityState === "visible"
+				)
+					return;
+				showDesktopNotification(data);
 			}
-
-			let contactImageUrl = profileDefaultPic;
-			let contactName = "Novo Contato";
-
-			const contactIndex = contacts.findIndex(
-				contact => contact.id === data.message.contactId
-			);
-
-			if (contactIndex !== -1) {
-				contactImageUrl = contacts[contactIndex].imageURL;
-				contactName = contacts[contactIndex].name;
-				setDisplayedContacts(prevState => {
-					let aux = [...prevState];
-					aux.unshift(aux.splice(contactIndex, 1)[0]);
-					return aux;
-				});
-				setContacts(prevState => {
-					let aux = [...prevState];
-					aux[contactIndex].unreadMessages++;
-					aux.unshift(aux.splice(contactIndex, 1)[0]);
-					return aux;
-				});
-			} else {
-				setContacts(prevState => [data.contact, ...prevState]);
-				setDisplayedContacts(prevState => [data.contact, ...prevState]);
-			}
-			showNotification(data, contactName, contactImageUrl);
 		});

 		return () => {
 			socket.disconnect();
 		};
-	}, [selectedContact, contacts]);
+	}, [contactId]);

-	const showNotification = (data, contactName, contactImageUrl) => {
+	const updateUnreadMessagesCount = data => {
+		setContacts(prevState => {
+			const contactIndex = prevState.findIndex(
+				contact => contact.id === data.message.contactId
+			);
+
+			if (contactIndex !== -1) {
+				let aux = [...prevState];
+				aux[contactIndex].unreadMessages++;
+				aux[contactIndex].lastMessage = data.message.messageBody;
+				aux.unshift(aux.splice(contactIndex, 1)[0]);
+				return aux;
+			} else {
+				return [data.contact, ...prevState];
+			}
+		});
+	};
+
+	const showDesktopNotification = data => {
 		const options = {
 			body: `${data.message.messageBody} - ${moment(new Date())
 				.tz("America/Sao_Paulo")
 				.format("DD/MM/YY - HH:mm")}`,
-			icon: contactImageUrl,
+			icon: data.contact.imageURL,
 		};
-		new Notification(`Mensagem de ${contactName}`, options);
+		new Notification(`Mensagem de ${data.contact.name}`, options);
 		document.getElementById("sound").play();
 	};

 	const resetUnreadMessages = contactId => {
-		setDisplayedContacts(prevState => {
+		setContacts(prevState => {
 			let aux = [...prevState];
 			let contactIndex = aux.findIndex(contact => contact.id === +contactId);
 			aux[contactIndex].unreadMessages = 0;
@@ -217,17 +226,12 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 	};

 	const handleSelectContact = (e, contact) => {
-		setSelectedContact(contact);
+		history.push(`/chat/${contact.id}`);
 	};

 	const handleSearchContact = e => {
-		let searchTerm = e.target.value.toLowerCase();
-
-		setDisplayedContacts(
-			contacts.filter(contact =>
-				contact.name.toLowerCase().includes(searchTerm)
-			)
-		);
+		// let searchTerm = e.target.value.toLowerCase();
+		setSearchParam(e.target.value.toLowerCase());
 	};

 	return (
@@ -246,12 +250,12 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 			</Paper>
 			<Paper variant="outlined" className={classes.contactsList}>
 				<List>
-					{displayedContacts.map((contact, index) => (
+					{contacts.map((contact, index) => (
 						<React.Fragment key={contact.id}>
 							<ListItem
 								button
 								onClick={e => handleSelectContact(e, contact)}
-								selected={selectedContact && selectedContact.id === contact.id}
+								selected={contactId && +contactId === contact.id}
 							>
 								<ListItemAvatar>
 									<Avatar
@@ -296,15 +300,13 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 											>
 												{contact.lastMessage || <br />}
 											</Typography>
-											{contact.unreadMessages > 0 && (
-												<Badge
-													className={classes.newMessagesCount}
-													badgeContent={contact.unreadMessages}
-													classes={{
-														badge: classes.badgeStyle,
-													}}
-												/>
-											)}
+											<Badge
+												className={classes.newMessagesCount}
+												badgeContent={contact.unreadMessages}
+												classes={{
+													badge: classes.badgeStyle,
+												}}
+											/>
 										</span>
 									}
 								/>
@@ -313,6 +315,11 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 						</React.Fragment>
 					))}
 				</List>
+				{loading ? (
+					<div>
+						<CircularProgress className={classes.circleLoading} />
+					</div>
+				) : null}
 			</Paper>
 			<audio id="sound" preload="auto">
 				<source src={require("../../../../util/sound.mp3")} type="audio/mpeg" />
--- a/frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js
+++ b/frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import api from "../../../../util/api";
 import "emoji-mart/css/emoji-mart.css";
 import { Picker } from "emoji-mart";
@@ -63,6 +64,7 @@ const useStyles = makeStyles(theme => ({

 	circleLoading: {
 		color: green[500],
+		opacity: "70%",
 		position: "absolute",
 		top: "20%",
 		left: "50%",
@@ -72,9 +74,9 @@ const useStyles = makeStyles(theme => ({
 	},
 }));

-const MessagesInput = ({ selectedContact, searchParam }) => {
+const MessagesInput = ({ searchParam }) => {
 	const classes = useStyles();
-	const contactId = selectedContact.id;
+	const { contactId } = useParams();
 	const userId = localStorage.getItem("userId");
 	const username = localStorage.getItem("username");

@@ -90,7 +92,7 @@ const MessagesInput = ({ selectedContact, searchParam }) => {
 			setShowEmoji(false);
 			setMedia({});
 		};
-	}, [selectedContact]);
+	}, [contactId]);

 	const handleChangeInput = e => {
 		setInputMessage(e.target.value);
--- a/frontend/src/pages/Chat/components/MessagesList/MessagesList.js
+++ b/frontend/src/pages/Chat/components/MessagesList/MessagesList.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import { useParams } from "react-router-dom";

 import { makeStyles } from "@material-ui/core/styles";
 import AccessTimeIcon from "@material-ui/icons/AccessTime";
@@ -92,6 +93,7 @@ const useStyles = makeStyles(theme => ({
 	circleLoading: {
 		color: green[500],
 		position: "absolute",
+		opacity: "70%",
 		top: 0,
 		left: "50%",
 		marginTop: 12,
@@ -193,13 +195,14 @@ const useStyles = makeStyles(theme => ({
 	},
 }));

-const MessagesList = ({ selectedContact }) => {
-	const contactId = selectedContact.id;
+const MessagesList = () => {
+	const { contactId } = useParams();
 	const classes = useStyles();

 	const token = localStorage.getItem("token");

 	const [loading, setLoading] = useState(true);
+	const [contact, setContact] = useState({});
 	const [messagesList, setMessagesList] = useState([]);
 	const [hasMore, setHasMore] = useState(false);
 	const [searchParam, setSearchParam] = useState("");
@@ -213,12 +216,12 @@ const MessagesList = ({ selectedContact }) => {
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
-			console.log(searchParam);
 			const fetchMessages = async () => {
 				try {
 					const res = await api.get("/messages/" + contactId, {
 						params: { searchParam, pageNumber },
 					});
+					setContact(res.data.contact);
 					setMessagesList(prevMessages => {
 						return [...res.data.messages, ...prevMessages];
 					});
@@ -444,13 +447,24 @@ const MessagesList = ({ selectedContact }) => {
 	return (
 		<div className={classes.mainWrapper}>
 			<Card variant="outlined" square className={classes.messagesHeader}>
-				<CardHeader
-					titleTypographyProps={{ noWrap: true }}
-					subheaderTypographyProps={{ noWrap: true }}
-					avatar={<Avatar alt="contact_name" src={selectedContact.imageURL} />}
-					title={selectedContact.name}
-					subheader="Contacts Status"
-				/>
+				{!loading ? (
+					<CardHeader
+						titleTypographyProps={{ noWrap: true }}
+						subheaderTypographyProps={{ noWrap: true }}
+						avatar={<Avatar alt="contact_image" src={contact.imageURL} />}
+						title={contact.name}
+						subheader="Contact Status"
+					/>
+				) : (
+					<CardHeader
+						titleTypographyProps={{ noWrap: true }}
+						subheaderTypographyProps={{ noWrap: true }}
+						avatar={<Avatar alt="contact_image" />}
+						title=""
+						subheader=""
+					/>
+				)}
+
 				<div className={classes.messagesSearchInputWrapper}>
 					<SearchIcon className={classes.searchIcon} />
 					<InputBase
@@ -477,10 +491,7 @@ const MessagesList = ({ selectedContact }) => {
 				>
 					{messagesList.length > 0 ? renderMessages() : []}
 				</InfiniteScrollReverse>
-				<MessagesInput
-					selectedContact={selectedContact}
-					searchParam={searchParam}
-				/>
+				<MessagesInput searchParam={searchParam} />
 				{loading ? (
 					<div>
 						<CircularProgress className={classes.circleLoading} />
--- a/frontend/src/pages/WhatsAuth/WhatsAuth.js
+++ b/frontend/src/pages/WhatsAuth/WhatsAuth.js
@@ -1,12 +1,17 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
+import api from "../../util/api";
 import clsx from "clsx";
 import MainDrawer from "../../components/Layout/MainDrawer";
+import openSocket from "socket.io-client";

 import { makeStyles } from "@material-ui/core/styles";

 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
+import Bateryinfo from "./components/Bateryinfo";
+import Qrcode from "./components/Qrcode";

 const useStyles = makeStyles(theme => ({
 	root: {
@@ -41,6 +46,47 @@ const useStyles = makeStyles(theme => ({

 const WhatsAuth = () => {
 	const classes = useStyles();
+	const history = useHistory();
+
+	const [qrCode, setQrCode] = useState("");
+	const [session, setSession] = useState({});
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const res = await api.get("/whatsapp/session");
+				setQrCode(res.data.qrcode);
+				setSession(res.data);
+			} catch (err) {
+				console.log(err);
+			}
+		};
+		fetchSession();
+	}, []);
+
+	useEffect(() => {
+		const socket = openSocket("http://localhost:8080");
+
+		socket.on("qrcode", data => {
+			if (data.action === "update") {
+				setQrCode(data.qr);
+			}
+		});
+
+		socket.on("whats_auth", data => {
+			if (data.action === "authentication") {
+				history.push("/chat");
+				setQrCode("");
+				setSession(data.session);
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	console.log(session);

 	const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);

@@ -52,16 +98,20 @@ const WhatsAuth = () => {
 						<div className={classes.appBarSpacer} />
 						<Container maxWidth="lg" className={classes.container}>
 							<Grid container spacing={3}>
-								<Grid item xs={12}>
-									<Paper className={classes.paper}>
-										<h4>Status da conexão</h4>
-									</Paper>
-								</Grid>
-								<Grid item xs={12}>
-									<Paper className={fixedHeightPaper}>
-										<h1>QR Code</h1>
-									</Paper>
-								</Grid>
+								{session.status === "pending" ? (
+									<Grid item xs={6}>
+										<Paper className={classes.paper}>
+											<Qrcode qrCode={qrCode} />
+										</Paper>
+									</Grid>
+								) : (
+									<Grid item xs={6}>
+										<Paper className={classes.paper}>
+											<Bateryinfo sessio={session} />
+										</Paper>
+									</Grid>
+								)}
+
 								{/* <Grid item xs={12} md={4} lg={3}>
 									<Paper className={fixedHeightPaper}>
 										<h1>paper2</h1>
--- a/frontend/src/pages/WhatsAuth/components/Bateryinfo.js
+++ b/frontend/src/pages/WhatsAuth/components/Bateryinfo.js
@@ -0,0 +1,34 @@
+import React from "react";
+import Link from "@material-ui/core/Link";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+	main: {
+		flex: 1,
+	},
+});
+
+const Bateryinfo = ({ session }) => {
+	const classes = useStyles();
+	return (
+		<React.Fragment>
+			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+				Bateria
+			</Typography>
+			<Typography component="p" variant="h6">
+				{(session && session.baterry) || "Não disponível"}
+			</Typography>
+			<Typography color="textSecondary" className={classes.main}>
+				Carregando: {(session && session.plugged) || "Não disponível"}
+			</Typography>
+			<div>
+				<Link color="primary" href="#">
+					Verificar bateria
+				</Link>
+			</div>
+		</React.Fragment>
+	);
+};
+
+export default Bateryinfo;
--- a/frontend/src/pages/WhatsAuth/components/Qrcode.js
+++ b/frontend/src/pages/WhatsAuth/components/Qrcode.js
@@ -0,0 +1,25 @@
+import React from "react";
+import QRCode from "qrcode.react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+	main: {
+		flex: 1,
+	},
+});
+
+const Qrcode = ({ qrCode }) => {
+	const classes = useStyles();
+
+	return (
+		<div>
+			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+				Leia o QrCode para iniciar a sessão
+			</Typography>
+			<QRCode value={qrCode} size={256} />
+		</div>
+	);
+};
+
+export default Qrcode;
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -57,6 +57,7 @@ const Routes = () => {
 				<Switch>
 					<PrivateRoute exact path="/" component={Dashboard} />
 					<PrivateRoute exact path="/chat" component={Chat} />
+					<PrivateRoute exact path="/chat/:contactId" component={Chat} />
 					<PrivateRoute exact path="/profile" component={Profile} />
 					<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
 					<PublicRoute exact path="/login" component={Login} />