From dfde175c07b70cc1d3f6e1c856376ac13125a9e8 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Wed, 2 Sep 2020 21:01:02 -0300
Subject: [PATCH 01/25] feat: added users page

---
 backend/package.json                          |   4 +-
 backend/src/app.js                            |   1 -
 backend/src/controllers/ContactController.js  |   8 +-
 backend/src/controllers/TicketController.js   |   2 +-
 backend/src/controllers/UserController.js     | 108 +++++-
 ...00901235509-add-profile-column-to-users.js |  15 +
 backend/src/middleware/is-auth.js             |  28 +-
 backend/src/models/User.js                    |   1 +
 backend/src/routes/auth.js                    |   3 +
 backend/src/routes/users.js                   |  23 +-
 backend/src/services/wbotMessageListener.js   |   2 +-
 backend/yarn.lock                             |  65 +++-
 frontend/package.json                         |   3 +-
 frontend/src/App.js                           |  12 +-
 .../src/components/ContactDrawer/index.js     |  20 +-
 frontend/src/components/ContactModal/index.js |  88 ++---
 .../src/components/ContactsSekeleton/index.js | 163 --------
 .../src/components/MainContainer/index.js     |  31 ++
 frontend/src/components/MainHeader/index.js   |  19 +
 .../MainHeaderButtonsWrapper/index.js         |  21 ++
 frontend/src/components/MessagesList/index.js |  10 +-
 .../components/NotificationsPopOver/index.js  |   9 +-
 .../src/components/PaginationActions/index.js |  71 ----
 .../src/components/TableRowSkeleton/index.js  |  78 ++++
 frontend/src/components/TicketsList/index.js  |   9 +-
 frontend/src/components/Title/index.js        |  10 +
 frontend/src/components/UserModal/index.js    | 212 +++++++++++
 .../src/components/_layout/MainListItems.js   |   4 +-
 frontend/src/pages/Contacts/index.js          | 356 ++++++++----------
 frontend/src/pages/Dashboard/Title.js         |   6 +-
 frontend/src/pages/Signup/index.js            | 162 ++++----
 frontend/src/pages/Users/index.js             | 234 ++++++++++++
 frontend/src/routes/index.js                  |   2 +
 33 files changed, 1121 insertions(+), 659 deletions(-)
 create mode 100644 backend/src/database/migrations/20200901235509-add-profile-column-to-users.js
 delete mode 100644 frontend/src/components/ContactsSekeleton/index.js
 create mode 100644 frontend/src/components/MainContainer/index.js
 create mode 100644 frontend/src/components/MainHeader/index.js
 create mode 100644 frontend/src/components/MainHeaderButtonsWrapper/index.js
 delete mode 100644 frontend/src/components/PaginationActions/index.js
 create mode 100644 frontend/src/components/TableRowSkeleton/index.js
 create mode 100644 frontend/src/components/Title/index.js
 create mode 100644 frontend/src/components/UserModal/index.js
 create mode 100644 frontend/src/pages/Users/index.js

diff --git a/backend/package.json b/backend/package.json
index 9bc51aa..cfe437b 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -22,7 +22,6 @@
 		"dotenv": "^8.2.0",
 		"express": "^4.17.1",
 		"express-async-errors": "^3.1.1",
-		"express-validator": "^6.5.0",
 		"jsonwebtoken": "^8.5.1",
 		"multer": "^1.4.2",
 		"mysql2": "^2.1.0",
@@ -30,7 +29,8 @@
 		"sequelize": "^6.3.4",
 		"socket.io": "^2.3.0",
 		"whatsapp-web.js": "^1.8.0",
-		"youch": "^2.0.10"
+		"youch": "^2.0.10",
+		"yup": "^0.29.3"
 	},
 	"devDependencies": {
 		"nodemon": "^2.0.4",
diff --git a/backend/src/app.js b/backend/src/app.js
index 273d65a..f743ec9 100644
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -82,6 +82,5 @@ app.use(async (err, req, res, next) => {
 		console.log(err);
 		return res.status(500).json(errors);
 	}
-	console.log(err);
 	return res.status(500).json({ error: "Internal server error" });
 });
diff --git a/backend/src/controllers/ContactController.js b/backend/src/controllers/ContactController.js
index 2fc503a..3ee343b 100644
--- a/backend/src/controllers/ContactController.js
+++ b/backend/src/controllers/ContactController.js
@@ -8,7 +8,7 @@ const { getIO } = require("../libs/socket");
 const { getWbot } = require("../libs/wbot");
 
 exports.index = async (req, res) => {
-	const { searchParam = "", pageNumber = 1, rowsPerPage = 10 } = req.query;
+	const { searchParam = "", pageNumber = 1 } = req.query;
 
 	const whereCondition = {
 		[Op.or]: [
@@ -23,7 +23,7 @@ exports.index = async (req, res) => {
 		],
 	};
 
-	let limit = +rowsPerPage;
+	let limit = 20;
 	let offset = limit * (pageNumber - 1);
 
 	const { count, rows: contacts } = await Contact.findAndCountAll({
@@ -33,7 +33,9 @@ exports.index = async (req, res) => {
 		order: [["createdAt", "DESC"]],
 	});
 
-	return res.json({ contacts, count });
+	const hasMore = count > offset + contacts.length;
+
+	return res.json({ contacts, count, hasMore });
 };
 
 exports.store = async (req, res) => {
diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js
index 5ae04ab..fa40be8 100644
--- a/backend/src/controllers/TicketController.js
+++ b/backend/src/controllers/TicketController.js
@@ -16,7 +16,7 @@ exports.index = async (req, res) => {
 		showAll,
 	} = req.query;
 
-	const userId = req.userId;
+	const userId = req.user.id;
 
 	const limit = 20;
 	const offset = limit * (pageNumber - 1);
diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index fbbb94b..771d2b2 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -1,34 +1,101 @@
-const { validationResult } = require("express-validator");
+const Sequelize = require("sequelize");
+const Yup = require("yup");
+const { Op } = require("sequelize");
 
 const User = require("../models/User");
 
+const { getIO } = require("../libs/socket");
+
 exports.index = async (req, res) => {
-	// const { searchParam = "", pageNumber = 1 } = req.query;
+	const { searchParam = "", pageNumber = 1, rowsPerPage = 10 } = req.query;
 
-	const users = await User.findAll({ attributes: ["name", "id", "email"] });
+	const whereCondition = {
+		[Op.or]: [
+			{
+				name: Sequelize.where(
+					Sequelize.fn("LOWER", Sequelize.col("name")),
+					"LIKE",
+					"%" + searchParam.toLowerCase() + "%"
+				),
+			},
+			{ email: { [Op.like]: `%${searchParam.toLowerCase()}%` } },
+		],
+	};
 
-	return res.status(200).json(users);
+	let limit = +rowsPerPage;
+	let offset = limit * (pageNumber - 1);
+
+	const { count, rows: users } = await User.findAndCountAll({
+		attributes: ["name", "id", "email", "profile"],
+		where: whereCondition,
+		limit,
+		offset,
+		order: [["createdAt", "DESC"]],
+	});
+
+	return res.status(200).json({ users, count });
 };
 
 exports.store = async (req, res, next) => {
-	const errors = validationResult(req);
+	const schema = Yup.object().shape({
+		name: Yup.string().required().min(2),
+		email: Yup.string()
+			.email()
+			.required()
+			.test(
+				"Check-email",
+				"An user with this email already exists",
+				async value => {
+					const userFound = await User.findOne({ where: { email: value } });
+					return !Boolean(userFound);
+				}
+			),
+		password: Yup.string().required().min(5),
+	});
 
-	if (!errors.isEmpty()) {
-		return res
-			.status(400)
-			.json({ error: "Validation failed", data: errors.array() });
-	}
+	await schema.validate(req.body);
 
-	const { name, id, email } = await User.create(req.body);
+	const io = getIO();
 
-	res.status(201).json({ message: "User created!", userId: id });
+	const { name, id, email, profile } = await User.create(req.body);
+
+	io.emit("user", {
+		action: "create",
+		user: { name, id, email, profile },
+	});
+
+	return res.status(201).json({ message: "User created!", userId: id });
+};
+
+exports.show = async (req, res) => {
+	const { userId } = req.params;
+
+	const { id, name, email, profile } = await User.findByPk(userId);
+
+	return res.status(200).json({
+		id,
+		name,
+		email,
+		profile,
+	});
 };
 
 exports.update = async (req, res) => {
+	const schema = Yup.object().shape({
+		name: Yup.string().min(2),
+		email: Yup.string().email(),
+		password: Yup.string(),
+	});
+
+	console.log("cai aqui");
+
+	await schema.validate(req.body);
+
+	const io = getIO();
 	const { userId } = req.params;
 
 	const user = await User.findByPk(userId, {
-		attributes: ["name", "id", "email"],
+		attributes: ["name", "id", "email", "profile"],
 	});
 
 	if (!user) {
@@ -37,12 +104,16 @@ exports.update = async (req, res) => {
 
 	await user.update(req.body);
 
-	//todo, send socket IO to users channel.
+	io.emit("user", {
+		action: "update",
+		user: user,
+	});
 
-	res.status(200).json(user);
+	return res.status(200).json(user);
 };
 
 exports.delete = async (req, res) => {
+	const io = getIO();
 	const { userId } = req.params;
 
 	const user = await User.findByPk(userId);
@@ -53,5 +124,10 @@ exports.delete = async (req, res) => {
 
 	await user.destroy();
 
-	res.status(200).json({ message: "User deleted" });
+	io.emit("user", {
+		action: "delete",
+		userId: userId,
+	});
+
+	return res.status(200).json({ message: "User deleted" });
 };
diff --git a/backend/src/database/migrations/20200901235509-add-profile-column-to-users.js b/backend/src/database/migrations/20200901235509-add-profile-column-to-users.js
new file mode 100644
index 0000000..cb3e93b
--- /dev/null
+++ b/backend/src/database/migrations/20200901235509-add-profile-column-to-users.js
@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.addColumn("Users", "profile", {
+			type: Sequelize.STRING,
+			allowNull: false,
+			defaultValue: "admin",
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.removeColumn("Users", "profile");
+	},
+};
diff --git a/backend/src/middleware/is-auth.js b/backend/src/middleware/is-auth.js
index 6bfaabc..596d737 100644
--- a/backend/src/middleware/is-auth.js
+++ b/backend/src/middleware/is-auth.js
@@ -1,5 +1,7 @@
 const jwt = require("jsonwebtoken");
+const util = require("util");
 
+const User = require("../models/User");
 const authConfig = require("../config/auth");
 
 module.exports = async (req, res, next) => {
@@ -11,12 +13,24 @@ module.exports = async (req, res, next) => {
 
 	const [, token] = authHeader.split(" ");
 
-	jwt.verify(token, authConfig.secret, (error, result) => {
-		if (error) {
-			return res.status(401).json({ error: "Invalid token" });
+	try {
+		const decoded = await util.promisify(jwt.verify)(token, authConfig.secret);
+
+		const user = await User.findByPk(decoded.userId, {
+			attributes: ["id", "name", "profile", "email"],
+		});
+
+		if (!user) {
+			return res
+				.status(401)
+				.json({ error: "The token corresponding user does not exists." });
 		}
-		req.userId = result.userId;
-		// todo >> find user in DB and store in req.user to use latter, or throw an error if user not exists anymore
-		next();
-	});
+
+		req.user = user;
+
+		return next();
+	} catch (err) {
+		console.log(err);
+		return res.status(401).json({ error: "Invalid Token" });
+	}
 };
diff --git a/backend/src/models/User.js b/backend/src/models/User.js
index d474366..375f129 100644
--- a/backend/src/models/User.js
+++ b/backend/src/models/User.js
@@ -7,6 +7,7 @@ class User extends Sequelize.Model {
 			{
 				name: { type: Sequelize.STRING },
 				password: { type: Sequelize.VIRTUAL },
+				profile: { type: Sequelize.STRING, defaultValue: "admin" },
 				passwordHash: { type: Sequelize.STRING },
 				email: { type: Sequelize.STRING },
 			},
diff --git a/backend/src/routes/auth.js b/backend/src/routes/auth.js
index 7d0e52d..28a944e 100644
--- a/backend/src/routes/auth.js
+++ b/backend/src/routes/auth.js
@@ -1,9 +1,12 @@
 const express = require("express");
 const SessionController = require("../controllers/SessionController");
+const UserController = require("../controllers/UserController");
 const isAuth = require("../middleware/is-auth");
 
 const routes = express.Router();
 
+routes.post("/signup", UserController.store);
+
 routes.post("/login", SessionController.store);
 
 routes.get("/check", isAuth, (req, res) => {
diff --git a/backend/src/routes/users.js b/backend/src/routes/users.js
index 7e6d46d..bbdb0de 100644
--- a/backend/src/routes/users.js
+++ b/backend/src/routes/users.js
@@ -1,5 +1,4 @@
 const express = require("express");
-const { body } = require("express-validator");
 const User = require("../models/User");
 
 const isAuth = require("../middleware/is-auth");
@@ -9,28 +8,12 @@ const routes = express.Router();
 
 routes.get("/users", isAuth, UserController.index);
 
-routes.post(
-	"/users",
-	[
-		body("email")
-			.isEmail()
-			.withMessage("Email inválido")
-			.custom((value, { req }) => {
-				return User.findOne({ where: { email: value } }).then(user => {
-					if (user) {
-						return Promise.reject("An user with this email already exists!");
-					}
-				});
-			})
-			.normalizeEmail(),
-		body("password").trim().isLength({ min: 5 }),
-		body("name").trim().not().isEmpty(),
-	],
-	UserController.store
-);
+routes.post("/users", isAuth, UserController.store);
 
 routes.put("/users/:userId", isAuth, UserController.update);
 
+routes.get("/users/:userId", isAuth, UserController.show);
+
 routes.delete("/users/:userId", isAuth, UserController.delete);
 
 module.exports = routes;
diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js
index 0162838..329640b 100644
--- a/backend/src/services/wbotMessageListener.js
+++ b/backend/src/services/wbotMessageListener.js
@@ -137,7 +137,7 @@ const wbotMessageListener = () => {
 	const io = getIO();
 
 	wbot.on("message_create", async msg => {
-		// console.log(msg);
+		console.log(msg);
 		if (
 			msg.from === "status@broadcast" ||
 			msg.type === "location" ||
diff --git a/backend/yarn.lock b/backend/yarn.lock
index 0deb2e7..be20bb0 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@babel/runtime@^7.10.5":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@pedroslopez/moduleraid@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@pedroslopez/moduleraid/-/moduleraid-4.1.0.tgz#468f7195fddc9f367e672ace9269f0698cf4c404"
@@ -854,14 +861,6 @@ express-async-errors@^3.1.1:
   resolved "https://registry.yarnpkg.com/express-async-errors/-/express-async-errors-3.1.1.tgz#6053236d61d21ddef4892d6bd1d736889fc9da41"
   integrity sha512-h6aK1da4tpqWSbyCa3FxB/V6Ehd4EEB15zyQq9qe75OZBp0krinNKuH4rAY+S/U/2I36vdLAUFSjQJ+TFmODng==
 
-express-validator@^6.5.0:
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/express-validator/-/express-validator-6.6.1.tgz#c53046f615d27fcb78be786e018dcd60bd9c6c5c"
-  integrity sha512-+MrZKJ3eGYXkNF9p9Zf7MS7NkPJFg9MDYATU5c80Cf4F62JdLBIjWxy6481tRC0y1NnC9cgOw8FuN364bWaGhA==
-  dependencies:
-    lodash "^4.17.19"
-    validator "^13.1.1"
-
 express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -950,6 +949,11 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+fn-name@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-3.0.0.tgz#0596707f635929634d791f452309ab41558e3c5c"
+  integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -1382,6 +1386,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.17.11:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@@ -1417,7 +1426,7 @@ lodash.once@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.5:
+lodash@^4.17.15, lodash@^4.17.5:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -1801,6 +1810,11 @@ progress@^2.0.1:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+property-expr@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910"
+  integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -1941,6 +1955,11 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 registry-auth-token@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.0.tgz#1d37dffda72bbecd0f581e4715540213a65eb7da"
@@ -2266,6 +2285,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+synchronous-promise@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.13.tgz#9d8c165ddee69c5a6542862b405bc50095926702"
+  integrity sha512-R9N6uDkVsghHePKh1TEqbnLddO2IY25OcsksyFp/qBe7XYd0PVbKEWxhcdMhpLzE1I6skj5l4aEZ3CRxcbArlA==
+
 tar-fs@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5"
@@ -2332,6 +2356,11 @@ toposort-class@^1.0.1:
   resolved "https://registry.yarnpkg.com/toposort-class/-/toposort-class-1.0.1.tgz#7ffd1f78c8be28c3ba45cd4e1a3f5ee193bd9988"
   integrity sha1-f/0feMi+KMO6Rc1OGj9e4ZO9mYg=
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 touch@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
@@ -2464,11 +2493,6 @@ validator@^10.11.0:
   resolved "https://registry.yarnpkg.com/validator/-/validator-10.11.0.tgz#003108ea6e9a9874d31ccc9e5006856ccd76b228"
   integrity sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw==
 
-validator@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-13.1.1.tgz#f8811368473d2173a9d8611572b58c5783f223bf"
-  integrity sha512-8GfPiwzzRoWTg7OV1zva1KvrSemuMkv07MA9TTl91hfhe+wKrsrgVN4H2QSFd/U/FhiU3iWPYVgvbsOGwhyFWw==
-
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -2614,3 +2638,16 @@ youch@^2.0.10:
     cookie "^0.3.1"
     mustache "^3.0.0"
     stack-trace "0.0.10"
+
+yup@^0.29.3:
+  version "0.29.3"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.29.3.tgz#69a30fd3f1c19f5d9e31b1cf1c2b851ce8045fea"
+  integrity sha512-RNUGiZ/sQ37CkhzKFoedkeMfJM0vNQyaz+wRZJzxdKE7VfDeVKH8bb4rr7XhRLbHJz5hSjoDNwMEIaKhuMZ8gQ==
+  dependencies:
+    "@babel/runtime" "^7.10.5"
+    fn-name "~3.0.0"
+    lodash "^4.17.15"
+    lodash-es "^4.17.11"
+    property-expr "^2.0.2"
+    synchronous-promise "^2.0.13"
+    toposort "^2.0.2"
diff --git a/frontend/package.json b/frontend/package.json
index f49fa02..1102b93 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,7 +25,8 @@
     "react-scripts": "3.4.1",
     "react-toastify": "^6.0.8",
     "recharts": "^1.8.5",
-    "socket.io-client": "^2.3.0"
+    "socket.io-client": "^2.3.0",
+    "yup": "^0.29.3"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index cb42d18..f1dfbde 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -10,8 +10,18 @@ const App = () => {
 
 	const theme = createMuiTheme(
 		{
+			scrollbarStyles: {
+				"&::-webkit-scrollbar": {
+					width: "8px",
+					height: "8px",
+				},
+				"&::-webkit-scrollbar-thumb": {
+					boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+					backgroundColor: "#e8e8e8",
+				},
+			},
 			palette: {
-				primary: { main: "#1976d2" },
+				primary: { main: "#2576d2" },
 			},
 		},
 		locale
diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js
index d0b0b3d..da512bf 100644
--- a/frontend/src/components/ContactDrawer/index.js
+++ b/frontend/src/components/ContactDrawer/index.js
@@ -48,14 +48,7 @@ const useStyles = makeStyles(theme => ({
 		padding: "8px 0px 8px 8px",
 		height: "100%",
 		overflowY: "scroll",
-		"&::-webkit-scrollbar": {
-			width: "8px",
-			height: "8px",
-		},
-		"&::-webkit-scrollbar-thumb": {
-			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-			backgroundColor: "#e8e8e8",
-		},
+		...theme.scrollbarStyles,
 	},
 
 	contactAvatar: {
@@ -80,17 +73,6 @@ const useStyles = makeStyles(theme => ({
 		padding: 8,
 		display: "flex",
 		flexDirection: "column",
-		// overflowX: "scroll",
-		// flex: 1,
-		// "&::-webkit-scrollbar": {
-		// 	width: "8px",
-		// 	height: "8px",
-		// },
-		// "&::-webkit-scrollbar-thumb": {
-		// 	// borderRadius: "2px",
-		// 	boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-		// 	backgroundColor: "#e8e8e8",
-		// },
 	},
 	contactExtraInfo: {
 		marginTop: 4,
diff --git a/frontend/src/components/ContactModal/index.js b/frontend/src/components/ContactModal/index.js
index 1270e71..1d5a0d3 100644
--- a/frontend/src/components/ContactModal/index.js
+++ b/frontend/src/components/ContactModal/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 
-import { Formik, FieldArray } from "formik";
+import * as Yup from "yup";
+import { Formik, FieldArray, Form, Field } from "formik";
 
 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
@@ -52,6 +53,15 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
+const ContactSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+	number: Yup.string().min(8, "Too Short!").max(50, "Too Long!"),
+	email: Yup.string().email("Invalid email"),
+});
+
 const ContactModal = ({ open, onClose, contactId }) => {
 	const classes = useStyles();
 
@@ -86,7 +96,7 @@ const ContactModal = ({ open, onClose, contactId }) => {
 				await api.post("/contacts", values);
 			}
 		} catch (err) {
-			alert(err.response.data.error);
+			alert(JSON.stringify(err.response.data, null, 2));
 			console.log(err);
 		}
 		handleClose();
@@ -94,69 +104,57 @@ const ContactModal = ({ open, onClose, contactId }) => {
 
 	return (
 		<div className={classes.root}>
-			<Dialog
-				open={open}
-				onClose={handleClose}
-				maxWidth="lg"
-				scroll="paper"
-				className={classes.modal}
-			>
+			<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+				<DialogTitle id="form-dialog-title">
+					{contactId
+						? `${i18n.t("contactModal.title.edit")}`
+						: `${i18n.t("contactModal.title.add")}`}
+				</DialogTitle>
 				<Formik
 					initialValues={contact}
 					enableReinitialize={true}
-					onSubmit={(values, { setSubmitting }) => {
+					validationSchema={ContactSchema}
+					onSubmit={(values, actions) => {
 						setTimeout(() => {
 							handleSaveContact(values);
-							setSubmitting(false);
+							actions.setSubmitting(false);
 						}, 400);
 					}}
 				>
-					{({
-						values,
-						errors,
-						touched,
-						handleChange,
-						handleBlur,
-						handleSubmit,
-						isSubmitting,
-					}) => (
-						<form onSubmit={handleSubmit}>
-							<DialogTitle id="form-dialog-title">
-								{contactId
-									? `${i18n.t("contactModal.title.edit")}`
-									: `${i18n.t("contactModal.title.add")}`}
-							</DialogTitle>
+					{({ values, errors, touched, isSubmitting }) => (
+						<Form>
 							<DialogContent dividers>
 								<Typography variant="subtitle1" gutterBottom>
 									{i18n.t("contactModal.form.mainInfo")}
 								</Typography>
-								<TextField
+								<Field
+									as={TextField}
 									label={i18n.t("contactModal.form.name")}
 									name="name"
-									value={values.name || ""}
-									onChange={handleChange}
+									error={touched.name && Boolean(errors.name)}
+									helperText={touched.name && errors.name}
 									variant="outlined"
 									margin="dense"
-									required
 									className={classes.textField}
 								/>
-								<TextField
+								<Field
+									as={TextField}
 									label={i18n.t("contactModal.form.number")}
 									name="number"
-									value={values.number || ""}
-									onChange={handleChange}
+									error={touched.number && Boolean(errors.number)}
+									helperText={touched.number && errors.number}
 									placeholder="5513912344321"
 									variant="outlined"
 									margin="dense"
-									required
 								/>
 								<div>
-									<TextField
+									<Field
+										as={TextField}
 										label={i18n.t("contactModal.form.email")}
 										name="email"
-										value={values.email || ""}
-										onChange={handleChange}
-										placeholder="Endereço de Email"
+										error={touched.email && Boolean(errors.email)}
+										helperText={touched.email && errors.email}
+										placeholder="Email address"
 										fullWidth
 										margin="dense"
 										variant="outlined"
@@ -179,25 +177,21 @@ const ContactModal = ({ open, onClose, contactId }) => {
 														className={classes.extraAttr}
 														key={`${index}-info`}
 													>
-														<TextField
+														<Field
+															as={TextField}
 															label={i18n.t("contactModal.form.extraName")}
 															name={`extraInfo[${index}].name`}
-															value={info.name || ""}
-															onChange={handleChange}
 															variant="outlined"
 															margin="dense"
-															required
 															className={classes.textField}
 														/>
-														<TextField
+														<Field
+															as={TextField}
 															label={i18n.t("contactModal.form.extraValue")}
 															name={`extraInfo[${index}].value`}
-															value={info.value || ""}
-															onChange={handleChange}
 															variant="outlined"
 															margin="dense"
 															className={classes.textField}
-															required
 														/>
 														<IconButton
 															size="small"
@@ -248,7 +242,7 @@ const ContactModal = ({ open, onClose, contactId }) => {
 									)}
 								</Button>
 							</DialogActions>
-						</form>
+						</Form>
 					)}
 				</Formik>
 			</Dialog>
diff --git a/frontend/src/components/ContactsSekeleton/index.js b/frontend/src/components/ContactsSekeleton/index.js
deleted file mode 100644
index fc5ffe6..0000000
--- a/frontend/src/components/ContactsSekeleton/index.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from "react";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import Skeleton from "@material-ui/lab/Skeleton";
-
-const ContactsSekeleton = () => {
-	return (
-		<>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={80} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={70} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={90} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={55} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={60} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={100} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={80} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={70} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={90} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={55} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={60} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={100} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={80} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={70} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={90} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={55} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={60} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={100} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={80} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={70} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={90} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={55} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={60} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={100} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={80} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={70} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={90} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-			<TableRow>
-				<TableCell style={{ paddingRight: 0 }}>
-					<Skeleton animation="wave" variant="circle" width={40} height={40} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={55} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={60} />
-				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={100} />
-				</TableCell>
-				<TableCell align="right"></TableCell>
-			</TableRow>
-		</>
-	);
-};
-
-export default ContactsSekeleton;
diff --git a/frontend/src/components/MainContainer/index.js b/frontend/src/components/MainContainer/index.js
new file mode 100644
index 0000000..24b7b9a
--- /dev/null
+++ b/frontend/src/components/MainContainer/index.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+
+const useStyles = makeStyles(theme => ({
+	mainContainer: {
+		flex: 1,
+		padding: theme.spacing(2),
+		height: `calc(100% - 48px)`,
+	},
+
+	contentWrapper: {
+		height: "100%",
+		overflowY: "hidden",
+		display: "flex",
+		flexDirection: "column",
+	},
+}));
+
+const MainContainer = ({ children }) => {
+	const classes = useStyles();
+
+	return (
+		<Container className={classes.mainContainer}>
+			<div className={classes.contentWrapper}>{children}</div>
+		</Container>
+	);
+};
+
+export default MainContainer;
diff --git a/frontend/src/components/MainHeader/index.js b/frontend/src/components/MainHeader/index.js
new file mode 100644
index 0000000..46fa8ab
--- /dev/null
+++ b/frontend/src/components/MainHeader/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	contactsHeader: {
+		display: "flex",
+		alignItems: "center",
+		padding: "0px 6px 6px 6px",
+	},
+}));
+
+const MainHeader = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.contactsHeader}>{children}</div>;
+};
+
+export default MainHeader;
diff --git a/frontend/src/components/MainHeaderButtonsWrapper/index.js b/frontend/src/components/MainHeaderButtonsWrapper/index.js
new file mode 100644
index 0000000..ed5887c
--- /dev/null
+++ b/frontend/src/components/MainHeaderButtonsWrapper/index.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	MainHeaderButtonsWrapper: {
+		flex: "none",
+		marginLeft: "auto",
+		"& > *": {
+			margin: theme.spacing(1),
+		},
+	},
+}));
+
+const MainHeaderButtonsWrapper = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.MainHeaderButtonsWrapper}>{children}</div>;
+};
+
+export default MainHeaderButtonsWrapper;
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index cd2b2ed..6e04f27 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -101,15 +101,7 @@ const useStyles = makeStyles(theme => ({
 		padding: "20px 20px 20px 20px",
 		// scrollBehavior: "smooth",
 		overflowY: "scroll",
-		"&::-webkit-scrollbar": {
-			width: "8px",
-			height: "8px",
-		},
-		"&::-webkit-scrollbar-thumb": {
-			// borderRadius: "2px",
-			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-			backgroundColor: "#e8e8e8",
-		},
+		...theme.scrollbarStyles,
 	},
 
 	circleLoading: {
diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js
index 5fadd84..a1234f3 100644
--- a/frontend/src/components/NotificationsPopOver/index.js
+++ b/frontend/src/components/NotificationsPopOver/index.js
@@ -24,14 +24,7 @@ const useStyles = makeStyles(theme => ({
 	tabContainer: {
 		overflowY: "auto",
 		maxHeight: 350,
-		"&::-webkit-scrollbar": {
-			width: "8px",
-			height: "8px",
-		},
-		"&::-webkit-scrollbar-thumb": {
-			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-			backgroundColor: "#e8e8e8",
-		},
+		...theme.scrollbarStyles,
 	},
 	popoverPaper: {
 		width: "100%",
diff --git a/frontend/src/components/PaginationActions/index.js b/frontend/src/components/PaginationActions/index.js
deleted file mode 100644
index 854eae7..0000000
--- a/frontend/src/components/PaginationActions/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from "react";
-
-import { makeStyles } from "@material-ui/core/styles";
-
-import FirstPageIcon from "@material-ui/icons/FirstPage";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
-import LastPageIcon from "@material-ui/icons/LastPage";
-import IconButton from "@material-ui/core/IconButton";
-
-const useStyles = makeStyles(theme => ({
-	root: {
-		flexShrink: 0,
-		marginLeft: theme.spacing(2.5),
-	},
-}));
-
-const PaginationActions = ({ count, page, rowsPerPage, onChangePage }) => {
-	const classes = useStyles();
-
-	const handleFirstPageButtonClick = event => {
-		onChangePage(event, 0);
-	};
-
-	const handleBackButtonClick = event => {
-		onChangePage(event, page - 1);
-	};
-
-	const handleNextButtonClick = event => {
-		onChangePage(event, page + 1);
-	};
-
-	const handleLastPageButtonClick = event => {
-		onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-	};
-
-	return (
-		<div className={classes.root}>
-			<IconButton
-				onClick={handleFirstPageButtonClick}
-				disabled={page === 0}
-				aria-label="first page"
-			>
-				{<FirstPageIcon />}
-			</IconButton>
-			<IconButton
-				onClick={handleBackButtonClick}
-				disabled={page === 0}
-				aria-label="previous page"
-			>
-				{<KeyboardArrowLeft />}
-			</IconButton>
-			<IconButton
-				onClick={handleNextButtonClick}
-				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-				aria-label="next page"
-			>
-				{<KeyboardArrowRight />}
-			</IconButton>
-			<IconButton
-				onClick={handleLastPageButtonClick}
-				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-				aria-label="last page"
-			>
-				{<LastPageIcon />}
-			</IconButton>
-		</div>
-	);
-};
-
-export default PaginationActions;
diff --git a/frontend/src/components/TableRowSkeleton/index.js b/frontend/src/components/TableRowSkeleton/index.js
new file mode 100644
index 0000000..e8fc618
--- /dev/null
+++ b/frontend/src/components/TableRowSkeleton/index.js
@@ -0,0 +1,78 @@
+import React from "react";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Skeleton from "@material-ui/lab/Skeleton";
+
+const TableRowSkeleton = () => {
+	return (
+		<>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell></TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell></TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell></TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell></TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell></TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+		</>
+	);
+};
+
+export default TableRowSkeleton;
diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js
index dabd112..d34b9bd 100644
--- a/frontend/src/components/TicketsList/index.js
+++ b/frontend/src/components/TicketsList/index.js
@@ -23,14 +23,7 @@ const useStyles = makeStyles(theme => ({
 	ticketsList: {
 		flex: 1,
 		overflowY: "scroll",
-		"&::-webkit-scrollbar": {
-			width: "8px",
-			height: "8px",
-		},
-		"&::-webkit-scrollbar-thumb": {
-			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-			backgroundColor: "#e8e8e8",
-		},
+		...theme.scrollbarStyles,
 		borderTop: "2px solid rgba(0, 0, 0, 0.12)",
 	},
 
diff --git a/frontend/src/components/Title/index.js b/frontend/src/components/Title/index.js
new file mode 100644
index 0000000..b3fc24c
--- /dev/null
+++ b/frontend/src/components/Title/index.js
@@ -0,0 +1,10 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+
+export default function Title(props) {
+	return (
+		<Typography variant="h5" color="primary" gutterBottom>
+			{props.children}
+		</Typography>
+	);
+}
diff --git a/frontend/src/components/UserModal/index.js b/frontend/src/components/UserModal/index.js
new file mode 100644
index 0000000..f5402bb
--- /dev/null
+++ b/frontend/src/components/UserModal/index.js
@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from "react";
+
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+
+// import { i18n } from "../../translate/i18n";
+
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+	},
+	textField: {
+		// marginLeft: theme.spacing(1),
+		marginRight: theme.spacing(1),
+		// width: "25ch",
+		flex: 1,
+	},
+
+	btnWrapper: {
+		// margin: theme.spacing(1),
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
+	formControl: {
+		margin: theme.spacing(1),
+		minWidth: 120,
+	},
+}));
+
+const UserSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+	password: Yup.string().min(5, "Too Short!").max(50, "Too Long!"),
+	email: Yup.string().email("Invalid email").required("Required"),
+});
+
+const UserModal = ({ open, onClose, userId }) => {
+	const classes = useStyles();
+
+	const initialState = {
+		name: "",
+		email: "",
+		password: "",
+		profile: "user",
+	};
+
+	const [user, setUser] = useState(initialState);
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			if (!userId) return;
+			const { data } = await api.get(`/users/${userId}`);
+			setUser(prevState => {
+				return { ...prevState, ...data };
+			});
+		};
+
+		fetchUser();
+	}, [userId, open]);
+
+	const handleClose = () => {
+		onClose();
+		setUser(initialState);
+	};
+
+	const handleSaveUser = async values => {
+		try {
+			if (userId) {
+				await api.put(`/users/${userId}`, values);
+			} else {
+				await api.post("/users", values);
+			}
+		} catch (err) {
+			alert(JSON.stringify(err.response.data, null, 2));
+			console.log(err);
+		}
+		handleClose();
+	};
+
+	return (
+		<div className={classes.root}>
+			<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+				<DialogTitle id="form-dialog-title">
+					{userId ? `Edit User` : `New User`}
+				</DialogTitle>
+				<Formik
+					initialValues={user}
+					enableReinitialize={true}
+					validationSchema={UserSchema}
+					onSubmit={(values, actions) => {
+						setTimeout(() => {
+							handleSaveUser(values);
+							actions.setSubmitting(false);
+						}, 400);
+					}}
+				>
+					{({ touched, errors, isSubmitting }) => (
+						<Form>
+							<DialogContent dividers>
+								<Field
+									as={TextField}
+									label="Name"
+									name="name"
+									error={touched.name && Boolean(errors.name)}
+									helperText={touched.name && errors.name}
+									variant="outlined"
+									margin="dense"
+									className={classes.textField}
+								/>
+								<Field
+									as={TextField}
+									label="Email"
+									name="email"
+									error={touched.email && Boolean(errors.email)}
+									helperText={touched.email && errors.email}
+									variant="outlined"
+									margin="dense"
+								/>
+								<div>
+									<Field
+										as={TextField}
+										label="New Password"
+										type="password"
+										name="password"
+										error={touched.password && Boolean(errors.password)}
+										helperText={touched.password && errors.password}
+										variant="outlined"
+										margin="dense"
+									/>
+									<FormControl
+										variant="outlined"
+										className={classes.formControl}
+										margin="dense"
+									>
+										<InputLabel id="profile-selection-input-label">
+											Profile
+										</InputLabel>
+										<Field
+											as={Select}
+											label="Profile"
+											name="profile"
+											labelId="profile-selection-label"
+											id="profile-selection"
+											required
+										>
+											<MenuItem value="admin">Admin</MenuItem>
+											<MenuItem value="user">User</MenuItem>
+										</Field>
+									</FormControl>
+								</div>
+							</DialogContent>
+							<DialogActions>
+								<Button
+									onClick={handleClose}
+									color="secondary"
+									disabled={isSubmitting}
+									variant="outlined"
+								>
+									Cancel
+								</Button>
+								<Button
+									type="submit"
+									color="primary"
+									disabled={isSubmitting}
+									variant="contained"
+									className={classes.btnWrapper}
+								>
+									{"Ok"}
+									{isSubmitting && (
+										<CircularProgress
+											size={24}
+											className={classes.buttonProgress}
+										/>
+									)}
+								</Button>
+							</DialogActions>
+						</Form>
+					)}
+				</Formik>
+			</Dialog>
+		</div>
+	);
+};
+
+export default UserModal;
diff --git a/frontend/src/components/_layout/MainListItems.js b/frontend/src/components/_layout/MainListItems.js
index abe5727..79ba541 100644
--- a/frontend/src/components/_layout/MainListItems.js
+++ b/frontend/src/components/_layout/MainListItems.js
@@ -60,12 +60,12 @@ const MainListItems = () => {
 			<Divider />
 			<ListSubheader inset>Administration</ListSubheader>
 			<ListItemLink
-				to="/chat"
+				to="/users"
 				primary={i18n.t("mainDrawer.listItems.users")}
 				icon={<GroupIcon />}
 			/>
 			<ListItemLink
-				to="/chat"
+				to="/settings"
 				primary={i18n.t("mainDrawer.listItems.settings")}
 				icon={<SettingsIcon />}
 			/>
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index 74b882b..e8a7b08 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useReducer } from "react";
 import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -10,93 +10,100 @@ import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import Avatar from "@material-ui/core/Avatar";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
+
 import SearchIcon from "@material-ui/icons/Search";
 import TextField from "@material-ui/core/TextField";
-import Container from "@material-ui/core/Container";
 import InputAdornment from "@material-ui/core/InputAdornment";
-import Typography from "@material-ui/core/Typography";
 
 import IconButton from "@material-ui/core/IconButton";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import EditIcon from "@material-ui/icons/Edit";
 
-import PaginationActions from "../../components/PaginationActions";
 import api from "../../services/api";
-import ContactsSekeleton from "../../components/ContactsSekeleton";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
 import ContactModal from "../../components/ContactModal";
 import ConfirmationModal from "../../components/ConfirmationModal/";
 
 import { i18n } from "../../translate/i18n";
+import MainHeader from "../../components/MainHeader";
+import Title from "../../components/Title";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import MainContainer from "../../components/MainContainer";
+
+const reducer = (state, action) => {
+	if (action.type === "LOAD_CONTACTS") {
+		const contacts = action.payload;
+		const newContacts = [];
+
+		contacts.forEach(contact => {
+			const contactIndex = state.findIndex(c => c.id === contact.id);
+			if (contactIndex !== -1) {
+				state[contactIndex] = contact;
+			} else {
+				newContacts.push(contact);
+			}
+		});
+
+		return [...state, ...newContacts];
+	}
+
+	if (action.type === "UPDATE_CONTACT") {
+		const updatedContact = action.payload;
+		const contactIndex = state.findIndex(c => c.id === updatedContact.id);
+
+		if (contactIndex !== -1) {
+			state[contactIndex] = updatedContact;
+		}
+
+		return [...state];
+	}
+
+	if (action.type === "DELETE_CONTACT") {
+		const contactId = action.payload;
+		console.log("cai aqui", contactId);
+
+		const contactIndex = state.findIndex(c => c.id === contactId);
+		if (contactIndex !== -1) {
+			console.log("cai no if");
+
+			state.splice(contactIndex, 1);
+		}
+		return [...state];
+	}
+};
 
 const useStyles = makeStyles(theme => ({
-	mainContainer: {
-		flex: 1,
-		padding: theme.spacing(2),
-		height: `calc(100% - 48px)`,
-	},
-
-	contentWrapper: {
-		height: "100%",
-		overflowY: "hidden",
-		display: "flex",
-		flexDirection: "column",
-	},
-
-	contactsHeader: {
-		display: "flex",
-		alignItems: "center",
-		padding: "0px 6px 6px 6px",
-	},
-
-	actionButtons: {
-		flex: "none",
-		marginLeft: "auto",
-		"& > *": {
-			margin: theme.spacing(1),
-		},
-	},
-
 	mainPaper: {
 		flex: 1,
-		padding: theme.spacing(2),
+		padding: theme.spacing(1),
 		overflowY: "scroll",
-		"&::-webkit-scrollbar": {
-			width: "8px",
-			height: "8px",
-		},
-		"&::-webkit-scrollbar-thumb": {
-			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-			backgroundColor: "#e8e8e8",
-		},
+		...theme.scrollbarStyles,
 	},
 }));
 
 const Contacts = () => {
 	const classes = useStyles();
 
-	const [loading, setLoading] = useState(true);
-	const [page, setPage] = useState(0);
-	const [rowsPerPage, setRowsPerPage] = useState(10);
-	const [count, setCount] = useState(0);
+	const [loading, setLoading] = useState(false);
+	const [pageNumber, setPageNumber] = useState(1);
 	const [searchParam, setSearchParam] = useState("");
-	const [contacts, setContacts] = useState([]);
+	const [contacts, dispatch] = useReducer(reducer, []);
 	const [selectedContactId, setSelectedContactId] = useState(null);
 	const [contactModalOpen, setContactModalOpen] = useState(false);
 	const [deletingContact, setDeletingContact] = useState(null);
 	const [confirmOpen, setConfirmOpen] = useState(false);
+	const [hasMore, setHasMore] = useState(false);
 
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
 			const fetchContacts = async () => {
 				try {
-					const res = await api.get("/contacts/", {
-						params: { searchParam, pageNumber: page + 1, rowsPerPage },
+					const { data } = await api.get("/contacts/", {
+						params: { searchParam, pageNumber },
 					});
-					setContacts(res.data.contacts);
-					setCount(res.data.count);
+					dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
+					setHasMore(data.hasMore);
 					setLoading(false);
 				} catch (err) {
 					console.log(err);
@@ -106,17 +113,17 @@ const Contacts = () => {
 			fetchContacts();
 		}, 500);
 		return () => clearTimeout(delayDebounceFn);
-	}, [searchParam, page, rowsPerPage]);
+	}, [searchParam, pageNumber]);
 
 	useEffect(() => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.on("contact", data => {
 			if (data.action === "update" || data.action === "create") {
-				updateContacts(data.contact);
+				dispatch({ type: "UPDATE_CONTACT", payload: data.contact });
 			}
 
 			if (data.action === "delete") {
-				deleteContact(data.contactId);
+				dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
 			}
 		});
 
@@ -125,40 +132,6 @@ const Contacts = () => {
 		};
 	}, []);
 
-	const updateContacts = contact => {
-		setContacts(prevState => {
-			const contactIndex = prevState.findIndex(c => c.id === contact.id);
-
-			if (contactIndex === -1) {
-				return [contact, ...prevState];
-			}
-			const aux = [...prevState];
-			aux[contactIndex] = contact;
-			return aux;
-		});
-	};
-
-	const deleteContact = contactId => {
-		setContacts(prevState => {
-			const contactIndex = prevState.findIndex(c => c.id === +contactId);
-
-			if (contactIndex === -1) return prevState;
-
-			const aux = [...prevState];
-			aux.splice(contactIndex, 1);
-			return aux;
-		});
-	};
-
-	const handleChangePage = (event, newPage) => {
-		setPage(newPage);
-	};
-
-	const handleChangeRowsPerPage = event => {
-		setRowsPerPage(+event.target.value);
-		setPage(0);
-	};
-
 	const handleSearch = event => {
 		setSearchParam(event.target.value.toLowerCase());
 	};
@@ -186,7 +159,7 @@ const Contacts = () => {
 		}
 		setDeletingContact(null);
 		setSearchParam("");
-		setPage(0);
+		setPageNumber(1);
 	};
 
 	const handleimportContact = async () => {
@@ -197,8 +170,20 @@ const Contacts = () => {
 		}
 	};
 
+	const loadMore = () => {
+		setPageNumber(prevState => prevState + 1);
+	};
+
+	const handleScroll = e => {
+		if (!hasMore || loading) return;
+		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+		if (scrollHeight - (scrollTop + 100) < clientHeight) {
+			loadMore();
+		}
+	};
+
 	return (
-		<Container className={classes.mainContainer}>
+		<MainContainer className={classes.mainContainer}>
 			<ContactModal
 				open={contactModalOpen}
 				onClose={handleCloseContactModal}
@@ -225,112 +210,91 @@ const Contacts = () => {
 					? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
 					: `${i18n.t("contacts.confirmationModal.importMessage")}`}
 			</ConfirmationModal>
-			<div className={classes.contentWrapper}>
-				<div className={classes.contactsHeader}>
-					<Typography variant="h5" gutterBottom>
-						{i18n.t("contacts.title")}
-					</Typography>
+			<MainHeader>
+				<Title>{i18n.t("contacts.title")}</Title>
+				<MainHeaderButtonsWrapper>
+					<TextField
+						placeholder={i18n.t("contacts.searchPlaceholder")}
+						type="search"
+						value={searchParam}
+						onChange={handleSearch}
+						InputProps={{
+							startAdornment: (
+								<InputAdornment position="start">
+									<SearchIcon style={{ color: "gray" }} />
+								</InputAdornment>
+							),
+						}}
+					/>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={e => setConfirmOpen(true)}
+					>
+						{i18n.t("contacts.buttons.import")}
+					</Button>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleOpenContactModal}
+					>
+						{i18n.t("contacts.buttons.add")}
+					</Button>
+				</MainHeaderButtonsWrapper>
+			</MainHeader>
+			<Paper
+				className={classes.mainPaper}
+				variant="outlined"
+				onScroll={handleScroll}
+			>
+				<Table size="small">
+					<TableHead>
+						<TableRow>
+							<TableCell padding="checkbox" />
+							<TableCell>{i18n.t("contacts.table.name")}</TableCell>
+							<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
+							<TableCell>{i18n.t("contacts.table.email")}</TableCell>
+							<TableCell align="right">
+								{i18n.t("contacts.table.actions")}
+							</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						<>
+							{contacts.map(contact => (
+								<TableRow key={contact.id}>
+									<TableCell style={{ paddingRight: 0 }}>
+										{<Avatar src={contact.profilePicUrl} />}
+									</TableCell>
+									<TableCell>{contact.name}</TableCell>
+									<TableCell>{contact.number}</TableCell>
+									<TableCell>{contact.email}</TableCell>
+									<TableCell align="right">
+										<IconButton
+											size="small"
+											onClick={() => hadleEditContact(contact.id)}
+										>
+											<EditIcon />
+										</IconButton>
 
-					<div className={classes.actionButtons}>
-						<TextField
-							placeholder={i18n.t("contacts.searchPlaceholder")}
-							type="search"
-							value={searchParam}
-							onChange={handleSearch}
-							InputProps={{
-								startAdornment: (
-									<InputAdornment position="start">
-										<SearchIcon style={{ color: "gray" }} />
-									</InputAdornment>
-								),
-							}}
-						/>
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={e => setConfirmOpen(true)}
-						>
-							{i18n.t("contacts.buttons.import")}
-						</Button>
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={handleOpenContactModal}
-						>
-							{i18n.t("contacts.buttons.add")}
-						</Button>
-					</div>
-				</div>
-				<Paper className={classes.mainPaper} variant="outlined">
-					<Table size="small">
-						<TableHead>
-							<TableRow>
-								<TableCell padding="checkbox" />
-								<TableCell>{i18n.t("contacts.table.name")}</TableCell>
-								<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
-								<TableCell>{i18n.t("contacts.table.email")}</TableCell>
-								<TableCell align="right">
-									{i18n.t("contacts.table.actions")}
-								</TableCell>
-							</TableRow>
-						</TableHead>
-						<TableBody>
-							{loading ? (
-								<ContactsSekeleton />
-							) : (
-								<>
-									{contacts.map(contact => (
-										<TableRow key={contact.id}>
-											<TableCell style={{ paddingRight: 0 }}>
-												{<Avatar src={contact.profilePicUrl} />}
-											</TableCell>
-											<TableCell>{contact.name}</TableCell>
-											<TableCell>{contact.number}</TableCell>
-											<TableCell>{contact.email}</TableCell>
-											<TableCell align="right">
-												<IconButton
-													size="small"
-													onClick={() => hadleEditContact(contact.id)}
-												>
-													<EditIcon />
-												</IconButton>
-
-												<IconButton
-													size="small"
-													onClick={e => {
-														setConfirmOpen(true);
-														setDeletingContact(contact);
-													}}
-												>
-													<DeleteOutlineIcon />
-												</IconButton>
-											</TableCell>
-										</TableRow>
-									))}
-								</>
-							)}
-						</TableBody>
-						<TableFooter>
-							<TableRow>
-								<TablePagination
-									colSpan={5}
-									count={count}
-									rowsPerPage={rowsPerPage}
-									page={page}
-									SelectProps={{
-										inputProps: { "aria-label": "rows per page" },
-										native: true,
-									}}
-									onChangePage={handleChangePage}
-									onChangeRowsPerPage={handleChangeRowsPerPage}
-									ActionsComponent={PaginationActions}
-								/>
-							</TableRow>
-						</TableFooter>
-					</Table>
-				</Paper>
-			</div>
-		</Container>
+										<IconButton
+											size="small"
+											onClick={e => {
+												setConfirmOpen(true);
+												setDeletingContact(contact);
+											}}
+										>
+											<DeleteOutlineIcon />
+										</IconButton>
+									</TableCell>
+								</TableRow>
+							))}
+							{loading && <TableRowSkeleton />}
+						</>
+					</TableBody>
+				</Table>
+			</Paper>
+		</MainContainer>
 	);
 };
 
diff --git a/frontend/src/pages/Dashboard/Title.js b/frontend/src/pages/Dashboard/Title.js
index cd59203..8fa5dad 100644
--- a/frontend/src/pages/Dashboard/Title.js
+++ b/frontend/src/pages/Dashboard/Title.js
@@ -1,10 +1,12 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 
-export default function Title(props) {
+const Title = props => {
 	return (
 		<Typography component="h2" variant="h6" color="primary" gutterBottom>
 			{props.children}
 		</Typography>
 	);
-}
+};
+
+export default Title;
diff --git a/frontend/src/pages/Signup/index.js b/frontend/src/pages/Signup/index.js
index c02e995..9823670 100644
--- a/frontend/src/pages/Signup/index.js
+++ b/frontend/src/pages/Signup/index.js
@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 
+import * as Yup from "yup";
 import { useHistory } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { toast } from "react-toastify";
+import { Formik, Form, Field } from "formik";
 
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
@@ -53,20 +55,26 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
+const UserSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+	password: Yup.string().min(5, "Too Short!").max(50, "Too Long!"),
+	email: Yup.string().email("Invalid email").required("Required"),
+});
+
 const SignUp = () => {
 	const classes = useStyles();
 	const history = useHistory();
 
-	const [user, setUser] = useState({ name: "", email: "", password: "" });
+	const initialState = { name: "", email: "", password: "" };
 
-	const handleChangeInput = e => {
-		setUser({ ...user, [e.target.name]: e.target.value });
-	};
+	const [user] = useState(initialState);
 
-	const handleSignUp = async e => {
-		e.preventDefault();
+	const handleSignUp = async values => {
 		try {
-			await api.post("/users", user);
+			await api.post("/auth/signup", values);
 			toast.success(i18n.t("signup.toasts.success"));
 			history.push("/login");
 		} catch (err) {
@@ -84,68 +92,88 @@ const SignUp = () => {
 				<Typography component="h1" variant="h5">
 					{i18n.t("signup.title")}
 				</Typography>
-				<form className={classes.form} noValidate onSubmit={handleSignUp}>
-					<Grid container spacing={2}>
-						<Grid item xs={12}>
-							<TextField
-								autoComplete="name"
-								name="name"
-								variant="outlined"
-								required
-								fullWidth
-								id="name"
-								label={i18n.t("signup.form.name")}
-								value={user.name}
-								onChange={handleChangeInput}
-								autoFocus
-							/>
-						</Grid>
+				{/* <form className={classes.form} noValidate onSubmit={handleSignUp}> */}
+				<Formik
+					initialValues={user}
+					enableReinitialize={true}
+					validationSchema={UserSchema}
+					onSubmit={(values, actions) => {
+						setTimeout(() => {
+							handleSignUp(values);
+							actions.setSubmitting(false);
+						}, 400);
+					}}
+				>
+					{({ touched, errors, isSubmitting }) => (
+						<Form className={classes.form}>
+							<Grid container spacing={2}>
+								<Grid item xs={12}>
+									<Field
+										as={TextField}
+										autoComplete="name"
+										name="name"
+										error={touched.name && Boolean(errors.name)}
+										helperText={touched.name && errors.name}
+										variant="outlined"
+										fullWidth
+										id="name"
+										label={i18n.t("signup.form.name")}
+										autoFocus
+									/>
+								</Grid>
 
-						<Grid item xs={12}>
-							<TextField
-								variant="outlined"
-								required
+								<Grid item xs={12}>
+									<Field
+										as={TextField}
+										variant="outlined"
+										fullWidth
+										id="email"
+										label={i18n.t("signup.form.email")}
+										name="email"
+										error={touched.email && Boolean(errors.email)}
+										helperText={touched.email && errors.email}
+										autoComplete="email"
+									/>
+								</Grid>
+								<Grid item xs={12}>
+									<Field
+										as={TextField}
+										variant="outlined"
+										fullWidth
+										name="password"
+										error={touched.password && Boolean(errors.password)}
+										helperText={touched.password && errors.password}
+										label={i18n.t("signup.form.password")}
+										type="password"
+										id="password"
+										autoComplete="current-password"
+									/>
+								</Grid>
+							</Grid>
+							<Button
+								type="submit"
 								fullWidth
-								id="email"
-								label={i18n.t("signup.form.email")}
-								name="email"
-								autoComplete="email"
-								value={user.email}
-								onChange={handleChangeInput}
-							/>
-						</Grid>
-						<Grid item xs={12}>
-							<TextField
-								variant="outlined"
-								required
-								fullWidth
-								name="password"
-								label={i18n.t("signup.form.password")}
-								type="password"
-								id="password"
-								autoComplete="current-password"
-								value={user.password}
-								onChange={handleChangeInput}
-							/>
-						</Grid>
-					</Grid>
-					<Button
-						type="submit"
-						fullWidth
-						variant="contained"
-						color="primary"
-						className={classes.submit}
-					>
-						{i18n.t("signup.buttons.submit")}
-					</Button>
-					<Grid container justify="flex-end">
-						<Grid item>
-							<Link href="#" variant="body2" component={RouterLink} to="/login">
-								{i18n.t("signup.buttons.login")}
-							</Link>
-						</Grid>
-					</Grid>
-				</form>
+								variant="contained"
+								color="primary"
+								className={classes.submit}
+							>
+								{i18n.t("signup.buttons.submit")}
+							</Button>
+							<Grid container justify="flex-end">
+								<Grid item>
+									<Link
+										href="#"
+										variant="body2"
+										component={RouterLink}
+										to="/login"
+									>
+										{i18n.t("signup.buttons.login")}
+									</Link>
+								</Grid>
+							</Grid>
+						</Form>
+					)}
+				</Formik>
 			</div>
 			<Box mt={5}>
 				<Copyright />
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
new file mode 100644
index 0000000..faa76c9
--- /dev/null
+++ b/frontend/src/pages/Users/index.js
@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from "react";
+
+import openSocket from "socket.io-client";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import IconButton from "@material-ui/core/IconButton";
+import SearchIcon from "@material-ui/icons/Search";
+import TextField from "@material-ui/core/TextField";
+import InputAdornment from "@material-ui/core/InputAdornment";
+
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import EditIcon from "@material-ui/icons/Edit";
+
+import MainContainer from "../../components/MainContainer";
+import MainHeader from "../../components/MainHeader";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import Title from "../../components/Title";
+
+import api from "../../services/api";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
+import UserModal from "../../components/UserModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
+
+const useStyles = makeStyles(theme => ({
+	mainPaper: {
+		flex: 1,
+		padding: theme.spacing(1),
+		overflowY: "scroll",
+		...theme.scrollbarStyles,
+	},
+}));
+
+const Users = () => {
+	const classes = useStyles();
+
+	const [loading, setLoading] = useState(false);
+	const [pageNumber, setPageNumber] = useState(1);
+	const [selectedUserId, setSelectedUserId] = useState(null);
+	const [userModalOpen, setUserModalOpen] = useState(false);
+	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+	const [deletingUser, setDeletingUser] = useState(null);
+	const [searchParam, setSearchParam] = useState("");
+	const [users, setUsers] = useState([]);
+
+	useEffect(() => {
+		setLoading(true);
+		const delayDebounceFn = setTimeout(() => {
+			const fetchUsers = async () => {
+				try {
+					const res = await api.get("/users/", {
+						params: { searchParam, pageNumber },
+					});
+					setUsers(res.data.users);
+					setLoading(false);
+				} catch (err) {
+					console.log(err);
+					alert(err);
+				}
+			};
+			fetchUsers();
+		}, 500);
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchParam, pageNumber]);
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		socket.on("user", data => {
+			if (data.action === "update" || data.action === "create") {
+				updateUsers(data.user);
+			}
+
+			if (data.action === "delete") {
+				deleteUser(data.userId);
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	const updateUsers = user => {
+		setUsers(prevState => {
+			const userIndex = prevState.findIndex(c => c.id === user.id);
+
+			if (userIndex === -1) {
+				return [user, ...prevState];
+			}
+			const aux = [...prevState];
+			aux[userIndex] = user;
+			return aux;
+		});
+	};
+
+	const deleteUser = userId => {
+		setUsers(prevState => {
+			const userIndex = prevState.findIndex(c => c.id === +userId);
+
+			if (userIndex === -1) return prevState;
+
+			const aux = [...prevState];
+			aux.splice(userIndex, 1);
+			return aux;
+		});
+	};
+
+	const handleOpenUserModal = () => {
+		setSelectedUserId(null);
+		setUserModalOpen(true);
+	};
+
+	const handleCloseUserModal = () => {
+		setSelectedUserId(null);
+		setUserModalOpen(false);
+	};
+
+	const handleSearch = event => {
+		setSearchParam(event.target.value.toLowerCase());
+	};
+
+	const handleEditUser = userId => {
+		setSelectedUserId(userId);
+		setUserModalOpen(true);
+	};
+
+	const handleDeleteUser = async userId => {
+		try {
+			await api.delete(`/users/${userId}`);
+		} catch (err) {
+			alert(err);
+		}
+		setDeletingUser(null);
+		setSearchParam("");
+		setPageNumber(1);
+	};
+
+	return (
+		<MainContainer>
+			<ConfirmationModal
+				title={deletingUser && `Delete ${deletingUser.name}?`}
+				open={confirmModalOpen}
+				setOpen={setConfirmModalOpen}
+				onConfirm={e => handleDeleteUser(deletingUser.id)}
+			>
+				Are you sure? It canoot be reverted.
+			</ConfirmationModal>
+			<UserModal
+				open={userModalOpen}
+				onClose={handleCloseUserModal}
+				aria-labelledby="form-dialog-title"
+				userId={selectedUserId}
+			/>
+			<MainHeader>
+				<Title>Usuários</Title>
+				<MainHeaderButtonsWrapper>
+					<TextField
+						placeholder="Search..."
+						type="search"
+						value={searchParam}
+						onChange={handleSearch}
+						InputProps={{
+							startAdornment: (
+								<InputAdornment position="start">
+									<SearchIcon style={{ color: "gray" }} />
+								</InputAdornment>
+							),
+						}}
+					/>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleOpenUserModal}
+					>
+						Novo Usuário
+					</Button>
+				</MainHeaderButtonsWrapper>
+			</MainHeader>
+			<Paper className={classes.mainPaper} variant="outlined">
+				<Table size="small">
+					<TableHead>
+						<TableRow>
+							<TableCell>Name</TableCell>
+							<TableCell>Email</TableCell>
+							<TableCell>Profile</TableCell>
+							<TableCell align="right">Actions</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{loading ? (
+							<TableRowSkeleton />
+						) : (
+							<>
+								{users.map(user => (
+									<TableRow key={user.id}>
+										<TableCell>{user.name}</TableCell>
+										<TableCell>{user.email}</TableCell>
+										<TableCell>{user.profile}</TableCell>
+										<TableCell align="right">
+											<IconButton
+												size="small"
+												onClick={() => handleEditUser(user.id)}
+											>
+												<EditIcon />
+											</IconButton>
+
+											<IconButton
+												size="small"
+												onClick={e => {
+													setConfirmModalOpen(true);
+													setDeletingUser(user);
+												}}
+											>
+												<DeleteOutlineIcon />
+											</IconButton>
+										</TableCell>
+									</TableRow>
+								))}
+							</>
+						)}
+					</TableBody>
+				</Table>
+			</Paper>
+		</MainContainer>
+	);
+};
+
+export default Users;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index bd55707..4042e26 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -8,6 +8,7 @@ import Chat from "../pages/Chat/";
 import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
 import WhatsAuth from "../pages/WhatsAuth/WhatsAuth";
+import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
 import { AuthProvider } from "../context/Auth/AuthContext";
 import Route from "./Route";
@@ -24,6 +25,7 @@ const Routes = () => {
 						<Route exact path="/chat/:ticketId?" component={Chat} isPrivate />
 						<Route exact path="/whats-auth" component={WhatsAuth} isPrivate />
 						<Route exact path="/contacts" component={Contacts} isPrivate />
+						<Route exact path="/users" component={Users} isPrivate />
 					</MainDrawer>
 				</Switch>
 				<ToastContainer autoClose={3000} />

From 514f1c3b753789e542d590b5cedd6f192d2eb045 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Thu, 3 Sep 2020 17:43:04 -0300
Subject: [PATCH 02/25] improvement: adopted infinity scroll in users and
 contacts

---
 backend/src/controllers/UserController.js |  8 +-
 frontend/src/pages/Contacts/index.js      | 15 ++--
 frontend/src/pages/Users/index.js         | 96 +++++++++++++++--------
 3 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index 771d2b2..0a88394 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -7,7 +7,7 @@ const User = require("../models/User");
 const { getIO } = require("../libs/socket");
 
 exports.index = async (req, res) => {
-	const { searchParam = "", pageNumber = 1, rowsPerPage = 10 } = req.query;
+	const { searchParam = "", pageNumber = 1 } = req.query;
 
 	const whereCondition = {
 		[Op.or]: [
@@ -22,7 +22,7 @@ exports.index = async (req, res) => {
 		],
 	};
 
-	let limit = +rowsPerPage;
+	let limit = 20;
 	let offset = limit * (pageNumber - 1);
 
 	const { count, rows: users } = await User.findAndCountAll({
@@ -33,7 +33,9 @@ exports.index = async (req, res) => {
 		order: [["createdAt", "DESC"]],
 	});
 
-	return res.status(200).json({ users, count });
+	const hasMore = count > offset + users.length;
+
+	return res.status(200).json({ users, count, hasMore });
 };
 
 exports.store = async (req, res, next) => {
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index e8a7b08..ab6bb4b 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -47,25 +47,22 @@ const reducer = (state, action) => {
 		return [...state, ...newContacts];
 	}
 
-	if (action.type === "UPDATE_CONTACT") {
-		const updatedContact = action.payload;
-		const contactIndex = state.findIndex(c => c.id === updatedContact.id);
+	if (action.type === "UPDATE_CONTACTS") {
+		const contact = action.payload;
+		const contactIndex = state.findIndex(c => c.id === contact.id);
 
 		if (contactIndex !== -1) {
-			state[contactIndex] = updatedContact;
+			state[contactIndex] = contact;
 		}
 
-		return [...state];
+		return [contact, ...state];
 	}
 
 	if (action.type === "DELETE_CONTACT") {
 		const contactId = action.payload;
-		console.log("cai aqui", contactId);
 
 		const contactIndex = state.findIndex(c => c.id === contactId);
 		if (contactIndex !== -1) {
-			console.log("cai no if");
-
 			state.splice(contactIndex, 1);
 		}
 		return [...state];
@@ -119,7 +116,7 @@ const Contacts = () => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.on("contact", data => {
 			if (data.action === "update" || data.action === "create") {
-				dispatch({ type: "UPDATE_CONTACT", payload: data.contact });
+				dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
 			}
 
 			if (data.action === "delete") {
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
index faa76c9..45c3476 100644
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useReducer } from "react";
 
 import openSocket from "socket.io-client";
 
@@ -28,6 +28,45 @@ import TableRowSkeleton from "../../components/TableRowSkeleton";
 import UserModal from "../../components/UserModal";
 import ConfirmationModal from "../../components/ConfirmationModal";
 
+const reducer = (state, action) => {
+	if (action.type === "LOAD_USERS") {
+		const users = action.payload;
+		const newUsers = [];
+
+		users.forEach(user => {
+			const userIndex = state.findIndex(u => u.id === user.id);
+			if (userIndex !== -1) {
+				state[userIndex] = user;
+			} else {
+				newUsers.push(user);
+			}
+		});
+
+		return [...state, ...newUsers];
+	}
+
+	if (action.type === "UPDATE_USERS") {
+		const user = action.payload;
+		const userIndex = state.findIndex(u => u.id === user.id);
+
+		if (userIndex !== -1) {
+			state[userIndex] = user;
+		}
+
+		return [user, ...state];
+	}
+
+	if (action.type === "DELETE_USER") {
+		const userId = action.payload;
+
+		const userIndex = state.findIndex(u => u.id === userId);
+		if (userIndex !== -1) {
+			state.splice(userIndex, 1);
+		}
+		return [...state];
+	}
+};
+
 const useStyles = makeStyles(theme => ({
 	mainPaper: {
 		flex: 1,
@@ -42,22 +81,24 @@ const Users = () => {
 
 	const [loading, setLoading] = useState(false);
 	const [pageNumber, setPageNumber] = useState(1);
+	const [hasMore, setHasMore] = useState(false);
 	const [selectedUserId, setSelectedUserId] = useState(null);
 	const [userModalOpen, setUserModalOpen] = useState(false);
 	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
 	const [deletingUser, setDeletingUser] = useState(null);
 	const [searchParam, setSearchParam] = useState("");
-	const [users, setUsers] = useState([]);
+	const [users, dispatch] = useReducer(reducer, []);
 
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
 			const fetchUsers = async () => {
 				try {
-					const res = await api.get("/users/", {
+					const { data } = await api.get("/users/", {
 						params: { searchParam, pageNumber },
 					});
-					setUsers(res.data.users);
+					dispatch({ type: "LOAD_USERS", payload: data.users });
+					setHasMore(data.hasMore);
 					setLoading(false);
 				} catch (err) {
 					console.log(err);
@@ -73,11 +114,11 @@ const Users = () => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.on("user", data => {
 			if (data.action === "update" || data.action === "create") {
-				updateUsers(data.user);
+				dispatch({ type: "UPDATE_USERS", payload: data.user });
 			}
 
 			if (data.action === "delete") {
-				deleteUser(data.userId);
+				dispatch({ type: "DELETE_USER", payload: +data.userId });
 			}
 		});
 
@@ -86,31 +127,6 @@ const Users = () => {
 		};
 	}, []);
 
-	const updateUsers = user => {
-		setUsers(prevState => {
-			const userIndex = prevState.findIndex(c => c.id === user.id);
-
-			if (userIndex === -1) {
-				return [user, ...prevState];
-			}
-			const aux = [...prevState];
-			aux[userIndex] = user;
-			return aux;
-		});
-	};
-
-	const deleteUser = userId => {
-		setUsers(prevState => {
-			const userIndex = prevState.findIndex(c => c.id === +userId);
-
-			if (userIndex === -1) return prevState;
-
-			const aux = [...prevState];
-			aux.splice(userIndex, 1);
-			return aux;
-		});
-	};
-
 	const handleOpenUserModal = () => {
 		setSelectedUserId(null);
 		setUserModalOpen(true);
@@ -141,6 +157,18 @@ const Users = () => {
 		setPageNumber(1);
 	};
 
+	const loadMore = () => {
+		setPageNumber(prevState => prevState + 1);
+	};
+
+	const handleScroll = e => {
+		if (!hasMore || loading) return;
+		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+		if (scrollHeight - (scrollTop + 100) < clientHeight) {
+			loadMore();
+		}
+	};
+
 	return (
 		<MainContainer>
 			<ConfirmationModal
@@ -182,7 +210,11 @@ const Users = () => {
 					</Button>
 				</MainHeaderButtonsWrapper>
 			</MainHeader>
-			<Paper className={classes.mainPaper} variant="outlined">
+			<Paper
+				className={classes.mainPaper}
+				variant="outlined"
+				onScroll={handleScroll}
+			>
 				<Table size="small">
 					<TableHead>
 						<TableRow>

From c032ec309a52090c1bdd82ee6b565cbbced3676d Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Thu, 3 Sep 2020 18:31:12 -0300
Subject: [PATCH 03/25] improvement: better names in pages, folders and routes

---
 README.md                                           |  2 +-
 frontend/src/components/MessagesList/index.js       |  4 ++--
 frontend/src/components/NewTicketModal/index.js     |  2 +-
 .../src/components/NotificationsPopOver/index.js    |  4 ++--
 frontend/src/components/TicketListItem/index.js     |  4 ++--
 frontend/src/components/TicketOptionsMenu/index.js  |  2 +-
 frontend/src/components/_layout/MainListItems.js    |  4 ++--
 frontend/src/context/Auth/useAuth.js                |  2 +-
 .../{WhatsAuth/WhatsAuth.js => Connection/index.js} |  2 +-
 frontend/src/pages/Settings/index.js                |  0
 frontend/src/pages/{Chat => Tickets}/index.js       |  0
 frontend/src/routes/index.js                        | 13 +++++++++----
 12 files changed, 22 insertions(+), 17 deletions(-)
 rename frontend/src/pages/{WhatsAuth/WhatsAuth.js => Connection/index.js} (94%)
 create mode 100644 frontend/src/pages/Settings/index.js
 rename frontend/src/pages/{Chat => Tickets}/index.js (100%)

diff --git a/README.md b/README.md
index bcf2b33..d0487b6 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ If a contact sent a new message in less than 2 hours interval, and there is no t
 
 ## Screenshots
 
-<img src="https://raw.githubusercontent.com/canove/whaticket/master/images/chat2.png" width="350"> <img src="https://raw.githubusercontent.com/canove/whaticket/master/images/chat3.png" width="350">
+<img src="https://raw.githubusercontent.com/canove/whaticket/master/images/tickets2.png" width="350"> <img src="https://raw.githubusercontent.com/canove/whaticket/master/images/tickets3.png" width="350">
 
 ## Demo
 
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index 6e04f27..16f16a0 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -304,7 +304,7 @@ const MessagesList = () => {
 				} catch (err) {
 					console.log(err);
 					toast.error("Ticket não encontrado");
-					history.push("/chat");
+					history.push("/tickets");
 				}
 			};
 			fetchMessages();
@@ -418,7 +418,7 @@ const MessagesList = () => {
 		} catch (err) {
 			console.log(err);
 		}
-		history.push("/chat");
+		history.push("/tickets");
 	};
 
 	const handleDrawerOpen = () => {
diff --git a/frontend/src/components/NewTicketModal/index.js b/frontend/src/components/NewTicketModal/index.js
index 0f273b9..83769e2 100644
--- a/frontend/src/components/NewTicketModal/index.js
+++ b/frontend/src/components/NewTicketModal/index.js
@@ -85,7 +85,7 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 				userId: userId,
 				status: "open",
 			});
-			history.push(`/chat/${ticket.id}`);
+			history.push(`/tickets/${ticket.id}`);
 		} catch (err) {
 			alert(err);
 		}
diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js
index a1234f3..34917c1 100644
--- a/frontend/src/components/NotificationsPopOver/index.js
+++ b/frontend/src/components/NotificationsPopOver/index.js
@@ -116,7 +116,7 @@ const NotificationsPopOver = () => {
 
 		notification.onclick = function (event) {
 			event.preventDefault(); //
-			window.open(`/chat/${ticket.id}`, "_self");
+			window.open(`/tickets/${ticket.id}`, "_self");
 		};
 
 		document.addEventListener("visibilitychange", () => {
@@ -137,7 +137,7 @@ const NotificationsPopOver = () => {
 	}, [setIsOpen]);
 
 	const handleSelectTicket = (e, ticket) => {
-		history.push(`/chat/${ticket.id}`);
+		history.push(`/tickets/${ticket.id}`);
 		handleClickAway();
 	};
 
diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/TicketListItem/index.js
index 04f3720..8494f4d 100644
--- a/frontend/src/components/TicketListItem/index.js
+++ b/frontend/src/components/TicketListItem/index.js
@@ -100,11 +100,11 @@ const TicketListItem = ({ ticket }) => {
 		} catch (err) {
 			alert(err);
 		}
-		history.push(`/chat/${ticketId}`);
+		history.push(`/tickets/${ticketId}`);
 	};
 
 	const handleSelectTicket = (e, ticket) => {
-		history.push(`/chat/${ticket.id}`);
+		history.push(`/tickets/${ticket.id}`);
 	};
 
 	return (
diff --git a/frontend/src/components/TicketOptionsMenu/index.js b/frontend/src/components/TicketOptionsMenu/index.js
index a3f7a5c..fc92752 100644
--- a/frontend/src/components/TicketOptionsMenu/index.js
+++ b/frontend/src/components/TicketOptionsMenu/index.js
@@ -18,7 +18,7 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 		try {
 			await api.delete(`/tickets/${ticket.id}`);
 			toast.success("Ticket deletado com sucesso.");
-			history.push("/chat");
+			history.push("/tickets");
 		} catch (err) {
 			toast.error("Erro ao deletar o ticket");
 		}
diff --git a/frontend/src/components/_layout/MainListItems.js b/frontend/src/components/_layout/MainListItems.js
index 79ba541..ebfa195 100644
--- a/frontend/src/components/_layout/MainListItems.js
+++ b/frontend/src/components/_layout/MainListItems.js
@@ -42,12 +42,12 @@ const MainListItems = () => {
 		<div>
 			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
 			<ListItemLink
-				to="/whats-auth"
+				to="/connection"
 				primary={i18n.t("mainDrawer.listItems.connection")}
 				icon={<SyncAltIcon />}
 			/>
 			<ListItemLink
-				to="/chat"
+				to="/tickets"
 				primary={i18n.t("mainDrawer.listItems.tickets")}
 				icon={<WhatsAppIcon />}
 			/>
diff --git a/frontend/src/context/Auth/useAuth.js b/frontend/src/context/Auth/useAuth.js
index e7611ea..995c10b 100644
--- a/frontend/src/context/Auth/useAuth.js
+++ b/frontend/src/context/Auth/useAuth.js
@@ -51,7 +51,7 @@ const useAuth = () => {
 			api.defaults.headers.Authorization = `Bearer ${res.data.token}`;
 			setIsAuth(true);
 			toast.success(i18n.t("auth.toasts.success"));
-			history.push("/chat");
+			history.push("/tickets");
 		} catch (err) {
 			toast.error(i18n.t("auth.toasts.fail"));
 		}
diff --git a/frontend/src/pages/WhatsAuth/WhatsAuth.js b/frontend/src/pages/Connection/index.js
similarity index 94%
rename from frontend/src/pages/WhatsAuth/WhatsAuth.js
rename to frontend/src/pages/Connection/index.js
index 3773159..9fa4a15 100644
--- a/frontend/src/pages/WhatsAuth/WhatsAuth.js
+++ b/frontend/src/pages/Connection/index.js
@@ -71,7 +71,7 @@ const WhatsAuth = () => {
 			if (data.action === "authentication") {
 				setQrCode("");
 				setSession(data.session);
-				history.push("/chat");
+				history.push("/tickets");
 			}
 		});
 
diff --git a/frontend/src/pages/Settings/index.js b/frontend/src/pages/Settings/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/pages/Chat/index.js b/frontend/src/pages/Tickets/index.js
similarity index 100%
rename from frontend/src/pages/Chat/index.js
rename to frontend/src/pages/Tickets/index.js
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 4042e26..3932021 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -4,10 +4,10 @@ import { ToastContainer } from "react-toastify";
 
 import MainDrawer from "../components/_layout";
 import Dashboard from "../pages/Dashboard/";
-import Chat from "../pages/Chat/";
+import Tickets from "../pages/Tickets/";
 import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
-import WhatsAuth from "../pages/WhatsAuth/WhatsAuth";
+import Connection from "../pages/Connection/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
 import { AuthProvider } from "../context/Auth/AuthContext";
@@ -22,8 +22,13 @@ const Routes = () => {
 					<Route exact path="/signup" component={Signup} />
 					<MainDrawer>
 						<Route exact path="/" component={Dashboard} isPrivate />
-						<Route exact path="/chat/:ticketId?" component={Chat} isPrivate />
-						<Route exact path="/whats-auth" component={WhatsAuth} isPrivate />
+						<Route
+							exact
+							path="/tickets/:ticketId?"
+							component={Tickets}
+							isPrivate
+						/>
+						<Route exact path="/connection" component={Connection} isPrivate />
 						<Route exact path="/contacts" component={Contacts} isPrivate />
 						<Route exact path="/users" component={Users} isPrivate />
 					</MainDrawer>

From f52e7a667c6ad383b58a958469c4f30f604b80b4 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Thu, 3 Sep 2020 18:59:10 -0300
Subject: [PATCH 04/25] feat: started settings style

---
 frontend/src/pages/Settings/index.js | 73 ++++++++++++++++++++++++++++
 frontend/src/routes/index.js         |  2 +
 2 files changed, 75 insertions(+)

diff --git a/frontend/src/pages/Settings/index.js b/frontend/src/pages/Settings/index.js
index e69de29..c4b1d32 100644
--- a/frontend/src/pages/Settings/index.js
+++ b/frontend/src/pages/Settings/index.js
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
+import api from "../../services/api";
+import openSocket from "socket.io-client";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+import Paper from "@material-ui/core/Paper";
+
+import Switch from "@material-ui/core/Switch";
+import Typography from "@material-ui/core/Typography";
+import Container from "@material-ui/core/Container";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		padding: theme.spacing(4),
+	},
+
+	paper: {
+		padding: theme.spacing(2),
+		display: "flex",
+		alignItems: "center",
+	},
+
+	switch: {
+		marginLeft: "auto",
+	},
+}));
+
+const WhatsAuth = () => {
+	const classes = useStyles();
+	// const history = useHistory();
+
+	const [settings, setSettings] = useState([]);
+
+	// useEffect(() => {
+	// 	const fetchSession = async () => {
+	// 		try {
+	// 			const { data } = await api.get("/whatsapp/session/1");
+	// 			setQrCode(data.qrcode);
+	// 			setSession(data);
+	// 		} catch (err) {
+	// 			console.log(err);
+	// 		}
+	// 	};
+	// 	fetchSession();
+	// }, []);
+
+	return (
+		<div className={classes.root}>
+			<Container className={classes.container} maxWidth="sm">
+				<Typography variant="subtitle1" gutterBottom>
+					Settings
+				</Typography>
+				<Paper className={classes.paper}>
+					<Typography variant="body2">Enable user creation</Typography>
+					<Switch
+						size="small"
+						className={classes.switch}
+						checked={true}
+						// onChange={() => setShowAllTickets(prevState => !prevState)}
+						name="showAllTickets"
+						color="primary"
+					/>
+				</Paper>
+			</Container>
+		</div>
+	);
+};
+
+export default WhatsAuth;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 3932021..b48a030 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -8,6 +8,7 @@ import Tickets from "../pages/Tickets/";
 import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
 import Connection from "../pages/Connection/";
+import Settings from "../pages/Settings/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
 import { AuthProvider } from "../context/Auth/AuthContext";
@@ -31,6 +32,7 @@ const Routes = () => {
 						<Route exact path="/connection" component={Connection} isPrivate />
 						<Route exact path="/contacts" component={Contacts} isPrivate />
 						<Route exact path="/users" component={Users} isPrivate />
+						<Route exact path="/Settings" component={Settings} isPrivate />
 					</MainDrawer>
 				</Switch>
 				<ToastContainer autoClose={3000} />

From bc376e2b1cfa5ef7a6f0208ac9a51390d24a23dc Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Fri, 4 Sep 2020 05:08:30 -0300
Subject: [PATCH 05/25] feat: added settings api on beackend

---
 backend/src/app.js                            | 15 ++--------
 backend/src/config/database.js                |  1 +
 backend/src/controllers/SettingController.js  | 23 +++++++++++++++
 backend/src/database/index.js                 | 11 ++++++-
 .../20200903215941-create-settings.js         | 29 +++++++++++++++++++
 .../20200904070004-create-default-settings.js | 22 ++++++++++++++
 backend/src/models/Setting.js                 | 24 +++++++++++++++
 backend/src/router/index.js                   | 21 ++++++++++++++
 backend/src/{ => router}/routes/auth.js       |  6 ++--
 backend/src/{ => router}/routes/contacts.js   |  6 ++--
 backend/src/{ => router}/routes/messages.js   |  4 +--
 backend/src/router/routes/settings.js         | 14 +++++++++
 backend/src/{ => router}/routes/tickets.js    |  4 +--
 backend/src/{ => router}/routes/users.js      |  5 ++--
 backend/src/{ => router}/routes/whatsapp.js   |  4 +--
 15 files changed, 160 insertions(+), 29 deletions(-)
 create mode 100644 backend/src/controllers/SettingController.js
 create mode 100644 backend/src/database/migrations/20200903215941-create-settings.js
 create mode 100644 backend/src/database/seeds/20200904070004-create-default-settings.js
 create mode 100644 backend/src/models/Setting.js
 create mode 100644 backend/src/router/index.js
 rename backend/src/{ => router}/routes/auth.js (58%)
 rename backend/src/{ => router}/routes/contacts.js (67%)
 rename backend/src/{ => router}/routes/messages.js (63%)
 create mode 100644 backend/src/router/routes/settings.js
 rename backend/src/{ => router}/routes/tickets.js (73%)
 rename backend/src/{ => router}/routes/users.js (71%)
 rename backend/src/{ => router}/routes/whatsapp.js (71%)

diff --git a/backend/src/app.js b/backend/src/app.js
index f743ec9..98f1607 100644
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -11,12 +11,7 @@ const wBot = require("./libs/wbot");
 const wbotMessageListener = require("./services/wbotMessageListener");
 const wbotMonitor = require("./services/wbotMonitor");
 
-const MessagesRoutes = require("./routes/messages");
-const ContactsRoutes = require("./routes/contacts");
-const AuthRoutes = require("./routes/auth");
-const TicketsRoutes = require("./routes/tickets");
-const WhatsRoutes = require("./routes/whatsapp");
-const UsersRoutes = require("./routes/users");
+const Router = require("./router");
 
 const app = express();
 
@@ -40,13 +35,7 @@ app.use(cors());
 app.use(express.json());
 app.use(multer({ storage: fileStorage }).single("media"));
 app.use("/public", express.static(path.join(__dirname, "..", "public")));
-
-app.use("/auth", AuthRoutes);
-app.use(ContactsRoutes);
-app.use(TicketsRoutes);
-app.use(MessagesRoutes);
-app.use(WhatsRoutes);
-app.use(UsersRoutes);
+app.use(Router);
 
 const io = require("./libs/socket").init(server);
 io.on("connection", socket => {
diff --git a/backend/src/config/database.js b/backend/src/config/database.js
index 654fd21..5fae881 100644
--- a/backend/src/config/database.js
+++ b/backend/src/config/database.js
@@ -12,4 +12,5 @@ module.exports = {
 	username: process.env.DB_USER,
 	password: process.env.DB_PASS,
 	logging: false,
+	seederStorage: "sequelize",
 };
diff --git a/backend/src/controllers/SettingController.js b/backend/src/controllers/SettingController.js
new file mode 100644
index 0000000..0c1362d
--- /dev/null
+++ b/backend/src/controllers/SettingController.js
@@ -0,0 +1,23 @@
+const Sequelize = require("sequelize");
+
+const Setting = require("../models/Setting");
+
+exports.index = async (req, res) => {
+	const settings = await Setting.findAll();
+
+	return res.status(200).json(settings);
+};
+
+exports.update = async (req, res) => {
+	const { settingKey } = req.params;
+
+	const setting = await Setting.findByPk(settingKey);
+
+	if (!setting) {
+		return res.status(400).json({ error: "No setting found with this ID" });
+	}
+
+	await setting.update(req.body);
+
+	return res.status(200).json(setting);
+};
diff --git a/backend/src/database/index.js b/backend/src/database/index.js
index 4f2eef4..fe9956c 100644
--- a/backend/src/database/index.js
+++ b/backend/src/database/index.js
@@ -7,8 +7,17 @@ const Ticket = require("../models/Ticket");
 const Message = require("../models/Message");
 const Whatsapp = require("../models/Whatsapp");
 const ContactCustomField = require("../models/ContactCustomField");
+const Setting = require("../models/Setting");
 
-const models = [User, Contact, Ticket, Message, Whatsapp, ContactCustomField];
+const models = [
+	User,
+	Contact,
+	Ticket,
+	Message,
+	Whatsapp,
+	ContactCustomField,
+	Setting,
+];
 
 class Database {
 	constructor() {
diff --git a/backend/src/database/migrations/20200903215941-create-settings.js b/backend/src/database/migrations/20200903215941-create-settings.js
new file mode 100644
index 0000000..ad82017
--- /dev/null
+++ b/backend/src/database/migrations/20200903215941-create-settings.js
@@ -0,0 +1,29 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.createTable("Settings", {
+			key: {
+				type: Sequelize.STRING,
+				primaryKey: true,
+				allowNull: false,
+			},
+			value: {
+				type: Sequelize.TEXT,
+				allowNull: false,
+			},
+			createdAt: {
+				type: Sequelize.DATE,
+				allowNull: false,
+			},
+			updatedAt: {
+				type: Sequelize.DATE,
+				allowNull: false,
+			},
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.dropTable("Settings");
+	},
+};
diff --git a/backend/src/database/seeds/20200904070004-create-default-settings.js b/backend/src/database/seeds/20200904070004-create-default-settings.js
new file mode 100644
index 0000000..73dfccb
--- /dev/null
+++ b/backend/src/database/seeds/20200904070004-create-default-settings.js
@@ -0,0 +1,22 @@
+"use strict";
+
+module.exports = {
+	up: queryInterface => {
+		return queryInterface.bulkInsert(
+			"Settings",
+			[
+				{
+					key: "userCreation",
+					value: "enabled",
+					createdAt: new Date(),
+					updatedAt: new Date(),
+				},
+			],
+			{}
+		);
+	},
+
+	down: queryInterface => {
+		return queryInterface.bulkDelete("Settings", null, {});
+	},
+};
diff --git a/backend/src/models/Setting.js b/backend/src/models/Setting.js
new file mode 100644
index 0000000..fe4168a
--- /dev/null
+++ b/backend/src/models/Setting.js
@@ -0,0 +1,24 @@
+const Sequelize = require("sequelize");
+
+class Setting extends Sequelize.Model {
+	static init(sequelize) {
+		super.init(
+			{
+				key: {
+					type: Sequelize.STRING,
+					primaryKey: true,
+					allowNull: false,
+					unique: true,
+				},
+				value: { type: Sequelize.TEXT, allowNull: false },
+			},
+			{
+				sequelize,
+			}
+		);
+
+		return this;
+	}
+}
+
+module.exports = Setting;
diff --git a/backend/src/router/index.js b/backend/src/router/index.js
new file mode 100644
index 0000000..094ceb3
--- /dev/null
+++ b/backend/src/router/index.js
@@ -0,0 +1,21 @@
+const express = require("express");
+
+const AuthRoutes = require("./routes/auth");
+const TicketsRoutes = require("./routes/tickets");
+const MessagesRoutes = require("./routes/messages");
+const ContactsRoutes = require("./routes/contacts");
+const WhatsRoutes = require("./routes/whatsapp");
+const UsersRoutes = require("./routes/users");
+const SettingsRoutes = require("./routes/settings");
+
+const routes = express.Router();
+
+routes.use("/auth", AuthRoutes);
+routes.use(TicketsRoutes);
+routes.use(MessagesRoutes);
+routes.use(ContactsRoutes);
+routes.use(WhatsRoutes);
+routes.use(UsersRoutes);
+routes.use(SettingsRoutes);
+
+module.exports = routes;
diff --git a/backend/src/routes/auth.js b/backend/src/router/routes/auth.js
similarity index 58%
rename from backend/src/routes/auth.js
rename to backend/src/router/routes/auth.js
index 28a944e..930d1e6 100644
--- a/backend/src/routes/auth.js
+++ b/backend/src/router/routes/auth.js
@@ -1,7 +1,7 @@
 const express = require("express");
-const SessionController = require("../controllers/SessionController");
-const UserController = require("../controllers/UserController");
-const isAuth = require("../middleware/is-auth");
+const SessionController = require("../../controllers/SessionController");
+const UserController = require("../../controllers/UserController");
+const isAuth = require("../../middleware/is-auth");
 
 const routes = express.Router();
 
diff --git a/backend/src/routes/contacts.js b/backend/src/router/routes/contacts.js
similarity index 67%
rename from backend/src/routes/contacts.js
rename to backend/src/router/routes/contacts.js
index 6b22706..1d9bfa2 100644
--- a/backend/src/routes/contacts.js
+++ b/backend/src/router/routes/contacts.js
@@ -1,8 +1,8 @@
 const express = require("express");
-const isAuth = require("../middleware/is-auth");
+const isAuth = require("../../middleware/is-auth");
 
-const ContactController = require("../controllers/ContactController");
-const ImportPhoneContactsController = require("../controllers/ImportPhoneContactsController");
+const ContactController = require("../../controllers/ContactController");
+const ImportPhoneContactsController = require("../../controllers/ImportPhoneContactsController");
 
 const routes = express.Router();
 
diff --git a/backend/src/routes/messages.js b/backend/src/router/routes/messages.js
similarity index 63%
rename from backend/src/routes/messages.js
rename to backend/src/router/routes/messages.js
index 0a88edc..e48298b 100644
--- a/backend/src/routes/messages.js
+++ b/backend/src/router/routes/messages.js
@@ -1,7 +1,7 @@
 const express = require("express");
-const isAuth = require("../middleware/is-auth");
+const isAuth = require("../../middleware/is-auth");
 
-const MessageController = require("../controllers/MessageController");
+const MessageController = require("../../controllers/MessageController");
 
 const routes = express.Router();
 
diff --git a/backend/src/router/routes/settings.js b/backend/src/router/routes/settings.js
new file mode 100644
index 0000000..fc0fe65
--- /dev/null
+++ b/backend/src/router/routes/settings.js
@@ -0,0 +1,14 @@
+const express = require("express");
+const isAuth = require("../../middleware/is-auth");
+
+const SettingController = require("../../controllers/SettingController");
+
+const routes = express.Router();
+
+routes.get("/settings", isAuth, SettingController.index);
+
+// routes.get("/settings/:settingKey", isAuth, SettingsController.show);
+
+routes.put("/settings/:settingKey", isAuth, SettingController.update);
+
+module.exports = routes;
diff --git a/backend/src/routes/tickets.js b/backend/src/router/routes/tickets.js
similarity index 73%
rename from backend/src/routes/tickets.js
rename to backend/src/router/routes/tickets.js
index 5bf490f..201e3e8 100644
--- a/backend/src/routes/tickets.js
+++ b/backend/src/router/routes/tickets.js
@@ -1,7 +1,7 @@
 const express = require("express");
-const isAuth = require("../middleware/is-auth");
+const isAuth = require("../../middleware/is-auth");
 
-const TicketController = require("../controllers/TicketController");
+const TicketController = require("../../controllers/TicketController");
 
 const routes = express.Router();
 
diff --git a/backend/src/routes/users.js b/backend/src/router/routes/users.js
similarity index 71%
rename from backend/src/routes/users.js
rename to backend/src/router/routes/users.js
index bbdb0de..8a50e61 100644
--- a/backend/src/routes/users.js
+++ b/backend/src/router/routes/users.js
@@ -1,8 +1,7 @@
 const express = require("express");
-const User = require("../models/User");
 
-const isAuth = require("../middleware/is-auth");
-const UserController = require("../controllers/UserController");
+const isAuth = require("../../middleware/is-auth");
+const UserController = require("../../controllers/UserController");
 
 const routes = express.Router();
 
diff --git a/backend/src/routes/whatsapp.js b/backend/src/router/routes/whatsapp.js
similarity index 71%
rename from backend/src/routes/whatsapp.js
rename to backend/src/router/routes/whatsapp.js
index 7d27526..4eb8758 100644
--- a/backend/src/routes/whatsapp.js
+++ b/backend/src/router/routes/whatsapp.js
@@ -1,7 +1,7 @@
 const express = require("express");
-const isAuth = require("../middleware/is-auth");
+const isAuth = require("../../middleware/is-auth");
 
-const WhatsAppSessionController = require("../controllers/WhatsAppSessionController");
+const WhatsAppSessionController = require("../../controllers/WhatsAppSessionController");
 
 const routes = express.Router();
 

From e4e918ab90105369d9e7aae0a287e5ee06906d8c Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Fri, 4 Sep 2020 10:35:34 -0300
Subject: [PATCH 06/25] feat: finished settings page

---
 backend/src/controllers/SettingController.js |  10 +-
 backend/src/controllers/TicketController.js  |   6 +-
 frontend/src/pages/Contacts/index.js         |  14 ++-
 frontend/src/pages/Settings/index.js         | 108 +++++++++++++------
 frontend/src/pages/Users/index.js            |  14 ++-
 5 files changed, 111 insertions(+), 41 deletions(-)

diff --git a/backend/src/controllers/SettingController.js b/backend/src/controllers/SettingController.js
index 0c1362d..322e8c9 100644
--- a/backend/src/controllers/SettingController.js
+++ b/backend/src/controllers/SettingController.js
@@ -1,6 +1,5 @@
-const Sequelize = require("sequelize");
-
 const Setting = require("../models/Setting");
+const { getIO } = require("../libs/socket");
 
 exports.index = async (req, res) => {
 	const settings = await Setting.findAll();
@@ -9,8 +8,8 @@ exports.index = async (req, res) => {
 };
 
 exports.update = async (req, res) => {
+	const io = getIO();
 	const { settingKey } = req.params;
-
 	const setting = await Setting.findByPk(settingKey);
 
 	if (!setting) {
@@ -19,5 +18,10 @@ exports.update = async (req, res) => {
 
 	await setting.update(req.body);
 
+	io.emit("settings", {
+		action: "update",
+		setting,
+	});
+
 	return res.status(200).json(setting);
 };
diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js
index fa40be8..3e42513 100644
--- a/backend/src/controllers/TicketController.js
+++ b/backend/src/controllers/TicketController.js
@@ -121,7 +121,7 @@ exports.store = async (req, res) => {
 		ticket: serializaedTicket,
 	});
 
-	res.status(200).json(ticket);
+	return res.status(200).json(ticket);
 };
 
 exports.update = async (req, res) => {
@@ -149,7 +149,7 @@ exports.update = async (req, res) => {
 		ticket: ticket,
 	});
 
-	res.status(200).json(ticket);
+	return res.status(200).json(ticket);
 };
 
 exports.delete = async (req, res) => {
@@ -169,5 +169,5 @@ exports.delete = async (req, res) => {
 		ticketId: ticket.id,
 	});
 
-	res.status(200).json({ message: "ticket deleted" });
+	return res.status(200).json({ message: "ticket deleted" });
 };
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index ab6bb4b..e46365f 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -53,9 +53,10 @@ const reducer = (state, action) => {
 
 		if (contactIndex !== -1) {
 			state[contactIndex] = contact;
+			return [...state];
+		} else {
+			return [contact, ...state];
 		}
-
-		return [contact, ...state];
 	}
 
 	if (action.type === "DELETE_CONTACT") {
@@ -67,6 +68,10 @@ const reducer = (state, action) => {
 		}
 		return [...state];
 	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
 };
 
 const useStyles = makeStyles(theme => ({
@@ -91,6 +96,11 @@ const Contacts = () => {
 	const [confirmOpen, setConfirmOpen] = useState(false);
 	const [hasMore, setHasMore] = useState(false);
 
+	useEffect(() => {
+		dispatch({ type: "RESET" });
+		setPageNumber(1);
+	}, [searchParam]);
+
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
diff --git a/frontend/src/pages/Settings/index.js b/frontend/src/pages/Settings/index.js
index c4b1d32..418eebf 100644
--- a/frontend/src/pages/Settings/index.js
+++ b/frontend/src/pages/Settings/index.js
@@ -1,15 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { useHistory } from "react-router-dom";
-import api from "../../services/api";
 import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
-
 import Paper from "@material-ui/core/Paper";
-
-import Switch from "@material-ui/core/Switch";
 import Typography from "@material-ui/core/Typography";
 import Container from "@material-ui/core/Container";
+import Select from "@material-ui/core/Select";
+import { toast } from "react-toastify";
+
+import api from "../../services/api";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -24,50 +23,97 @@ const useStyles = makeStyles(theme => ({
 		alignItems: "center",
 	},
 
-	switch: {
+	settingOption: {
 		marginLeft: "auto",
 	},
+	margin: {
+		margin: theme.spacing(1),
+	},
 }));
 
-const WhatsAuth = () => {
+const Settings = () => {
 	const classes = useStyles();
-	// const history = useHistory();
 
 	const [settings, setSettings] = useState([]);
 
-	// useEffect(() => {
-	// 	const fetchSession = async () => {
-	// 		try {
-	// 			const { data } = await api.get("/whatsapp/session/1");
-	// 			setQrCode(data.qrcode);
-	// 			setSession(data);
-	// 		} catch (err) {
-	// 			console.log(err);
-	// 		}
-	// 	};
-	// 	fetchSession();
-	// }, []);
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const { data } = await api.get("/settings");
+				setSettings(data);
+			} catch (err) {
+				console.log(err);
+			}
+		};
+		fetchSession();
+	}, []);
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		socket.on("settings", data => {
+			if (data.action === "update") {
+				// dispatch({ type: "UPDATE_USERS", payload: data.user });
+				setSettings(prevState => {
+					const aux = [...prevState];
+					const settingIndex = aux.findIndex(s => s.key === data.setting.key);
+					aux[settingIndex].value = data.setting.value;
+					return aux;
+				});
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	const handleChangeSetting = async e => {
+		const selectedValue = e.target.value;
+		const settingKey = e.target.name;
+
+		try {
+			await api.put(`/settings/${settingKey}`, {
+				value: selectedValue,
+			});
+			toast.success("Setting updated");
+		} catch (err) {
+			alert(err);
+			console.log(err);
+		}
+	};
+
+	const getSettingValue = key => {
+		const setting = settings.find(s => s.key === key);
+		return setting.value;
+	};
 
 	return (
 		<div className={classes.root}>
 			<Container className={classes.container} maxWidth="sm">
-				<Typography variant="subtitle1" gutterBottom>
+				<Typography variant="body2" gutterBottom>
 					Settings
 				</Typography>
 				<Paper className={classes.paper}>
-					<Typography variant="body2">Enable user creation</Typography>
-					<Switch
-						size="small"
-						className={classes.switch}
-						checked={true}
-						// onChange={() => setShowAllTickets(prevState => !prevState)}
-						name="showAllTickets"
-						color="primary"
-					/>
+					<Typography variant="body1">User creation</Typography>
+					<Select
+						margin="dense"
+						variant="outlined"
+						native
+						id="userCreation-setting"
+						name="userCreation"
+						value={
+							settings && settings.length > 0 && getSettingValue("userCreation")
+						}
+						className={classes.settingOption}
+						onChange={handleChangeSetting}
+					>
+						<option value="enabled">Enabled</option>
+						<option value="disabled">Disabled</option>
+					</Select>
 				</Paper>
 			</Container>
 		</div>
 	);
 };
 
-export default WhatsAuth;
+export default Settings;
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
index 45c3476..de554f8 100644
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -51,9 +51,10 @@ const reducer = (state, action) => {
 
 		if (userIndex !== -1) {
 			state[userIndex] = user;
+			return [...state];
+		} else {
+			return [user, ...state];
 		}
-
-		return [user, ...state];
 	}
 
 	if (action.type === "DELETE_USER") {
@@ -65,6 +66,10 @@ const reducer = (state, action) => {
 		}
 		return [...state];
 	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
 };
 
 const useStyles = makeStyles(theme => ({
@@ -89,6 +94,11 @@ const Users = () => {
 	const [searchParam, setSearchParam] = useState("");
 	const [users, dispatch] = useReducer(reducer, []);
 
+	useEffect(() => {
+		dispatch({ type: "RESET" });
+		setPageNumber(1);
+	}, [searchParam]);
+
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {

From 364b94c8abd1d5cc43ae759ddd19eb8d2e741994 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Fri, 4 Sep 2020 10:56:47 -0300
Subject: [PATCH 07/25] feat: block user creation if userCreation setting is
 disabled

---
 backend/src/controllers/UserController.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index 0a88394..359cdf3 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -3,6 +3,7 @@ const Yup = require("yup");
 const { Op } = require("sequelize");
 
 const User = require("../models/User");
+const Setting = require("../models/Setting");
 
 const { getIO } = require("../libs/socket");
 
@@ -55,6 +56,14 @@ exports.store = async (req, res, next) => {
 		password: Yup.string().required().min(5),
 	});
 
+	const { value: userCreation } = await Setting.findByPk("userCreation");
+
+	if (userCreation === "disabled") {
+		return res
+			.status(403)
+			.json({ error: "User creation is disabled by administrator" });
+	}
+
 	await schema.validate(req.body);
 
 	const io = getIO();

From 3cb3fc1a20bbe070859968bd624761ac4660105a Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Fri, 4 Sep 2020 11:22:53 -0300
Subject: [PATCH 08/25] feat: allowing user editing only to admins

---
 backend/src/controllers/UserController.js | 35 ++++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index 359cdf3..710d433 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -40,6 +40,7 @@ exports.index = async (req, res) => {
 };
 
 exports.store = async (req, res, next) => {
+	console.log(req.url);
 	const schema = Yup.object().shape({
 		name: Yup.string().required().min(2),
 		email: Yup.string()
@@ -56,12 +57,18 @@ exports.store = async (req, res, next) => {
 		password: Yup.string().required().min(5),
 	});
 
-	const { value: userCreation } = await Setting.findByPk("userCreation");
+	if (req.url === "/signup") {
+		const { value: userCreation } = await Setting.findByPk("userCreation");
 
-	if (userCreation === "disabled") {
+		if (userCreation === "disabled") {
+			return res
+				.status(403)
+				.json({ error: "User creation is disabled by administrator." });
+		}
+	} else if (req.user.profile !== "admin") {
 		return res
 			.status(403)
-			.json({ error: "User creation is disabled by administrator" });
+			.json({ error: "Only administrators can create users." });
 	}
 
 	await schema.validate(req.body);
@@ -98,7 +105,11 @@ exports.update = async (req, res) => {
 		password: Yup.string(),
 	});
 
-	console.log("cai aqui");
+	if (req.user.profile !== "admin") {
+		return res
+			.status(403)
+			.json({ error: "Only administrators can edit users." });
+	}
 
 	await schema.validate(req.body);
 
@@ -113,6 +124,16 @@ exports.update = async (req, res) => {
 		res.status(400).json({ error: "No user found with this id." });
 	}
 
+	if (user.profile === "admin" && req.body.profile === "user") {
+		const adminUsers = await User.count({ where: { profile: "admin" } });
+		if (adminUsers <= 1) {
+			return res
+				.status(403)
+				.json({ error: "There must be at leat one admin user." });
+		}
+		console.log("found", adminUsers);
+	}
+
 	await user.update(req.body);
 
 	io.emit("user", {
@@ -133,6 +154,12 @@ exports.delete = async (req, res) => {
 		res.status(400).json({ error: "No user found with this id." });
 	}
 
+	if (req.user.profile !== "admin") {
+		return res
+			.status(403)
+			.json({ error: "Only administrators can edit users." });
+	}
+
 	await user.destroy();
 
 	io.emit("user", {

From f7fe3286b84919dd0493b9fc4b1733180fdbd538 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Fri, 4 Sep 2020 17:09:39 -0300
Subject: [PATCH 09/25] improvement: better error handling

---
 backend/src/controllers/ContactController.js  |  51 ++--
 .../ImportPhoneContactsController.js          |  11 +-
 backend/src/controllers/MessageController.js  |   7 +-
 backend/src/controllers/SessionController.js  |   2 +-
 backend/src/controllers/SettingController.js  |   2 +-
 backend/src/controllers/TicketController.js   |   4 +-
 backend/src/controllers/UserController.js     |  23 +-
 .../controllers/WhatsAppSessionController.js  |   2 +-
 .../seeds/20200824172424-create-contacts.js   |  48 ----
 .../seeds/20200824173654-create-tickets.js    | 261 ------------------
 .../seeds/20200824174824-create-messages.js   | 148 ----------
 frontend/src/components/ContactModal/index.js |  18 +-
 frontend/src/components/MessageInput/index.js |  13 +-
 frontend/src/components/MessagesList/index.js |  11 +-
 .../src/components/NewTicketModal/index.js    |  24 +-
 frontend/src/components/SessionInfo/index.js  |   4 +
 frontend/src/components/UserModal/index.js    |  22 +-
 frontend/src/context/Auth/useAuth.js          |  10 +-
 frontend/src/hooks/useTickets/index.js        |   4 +
 frontend/src/pages/Connection/index.js        |   4 +
 frontend/src/pages/Contacts/index.js          |  13 +-
 frontend/src/pages/Settings/index.js          |  11 +-
 frontend/src/pages/Signup/index.js            |   5 +-
 23 files changed, 166 insertions(+), 532 deletions(-)
 delete mode 100644 backend/src/database/seeds/20200824172424-create-contacts.js
 delete mode 100644 backend/src/database/seeds/20200824173654-create-tickets.js
 delete mode 100644 backend/src/database/seeds/20200824174824-create-messages.js

diff --git a/backend/src/controllers/ContactController.js b/backend/src/controllers/ContactController.js
index 3ee343b..2b0072f 100644
--- a/backend/src/controllers/ContactController.js
+++ b/backend/src/controllers/ContactController.js
@@ -43,23 +43,22 @@ exports.store = async (req, res) => {
 	const io = getIO();
 	const newContact = req.body;
 
-	let isValidNumber;
-
 	try {
-		isValidNumber = await wbot.isRegisteredUser(`${newContact.number}@c.us`);
+		const isValidNumber = await wbot.isRegisteredUser(
+			`${newContact.number}@c.us`
+		);
+		if (!isValidNumber) {
+			return res
+				.status(400)
+				.json({ error: "The suplied number is not a valid Whatsapp number" });
+		}
 	} catch (err) {
-		console.log("Could not check whatsapp contact. Is session details valid?");
+		console.log(err);
 		return res.status(500).json({
 			error: "Could not check whatsapp contact. Check connection page.",
 		});
 	}
 
-	if (!isValidNumber) {
-		return res
-			.status(400)
-			.json({ error: "The suplied number is not a valid Whatsapp number" });
-	}
-
 	const profilePicUrl = await wbot.getProfilePicUrl(
 		`${newContact.number}@c.us`
 	);
@@ -76,26 +75,22 @@ exports.store = async (req, res) => {
 		contact: contact,
 	});
 
-	res.status(200).json(contact);
+	return res.status(200).json(contact);
 };
 
 exports.show = async (req, res) => {
 	const { contactId } = req.params;
 
-	const { id, name, number, email, extraInfo } = await Contact.findByPk(
-		contactId,
-		{
-			include: "extraInfo",
-		}
-	);
-
-	res.status(200).json({
-		id,
-		name,
-		number,
-		email,
-		extraInfo,
+	const contact = await Contact.findByPk(contactId, {
+		include: "extraInfo",
+		attributes: ["id", "name", "number", "email"],
 	});
+
+	if (!contact) {
+		return res.status(404).json({ error: "No contact found with this id." });
+	}
+
+	return res.status(200).json(contact);
 };
 
 exports.update = async (req, res) => {
@@ -110,7 +105,7 @@ exports.update = async (req, res) => {
 	});
 
 	if (!contact) {
-		return res.status(400).json({ error: "No contact found with this ID" });
+		return res.status(404).json({ error: "No contact found with this ID" });
 	}
 
 	if (updatedContact.extraInfo) {
@@ -140,7 +135,7 @@ exports.update = async (req, res) => {
 		contact: contact,
 	});
 
-	res.status(200).json(contact);
+	return res.status(200).json(contact);
 };
 
 exports.delete = async (req, res) => {
@@ -150,7 +145,7 @@ exports.delete = async (req, res) => {
 	const contact = await Contact.findByPk(contactId);
 
 	if (!contact) {
-		return res.status(400).json({ error: "No contact found with this ID" });
+		return res.status(404).json({ error: "No contact found with this ID" });
 	}
 
 	await contact.destroy();
@@ -160,5 +155,5 @@ exports.delete = async (req, res) => {
 		contactId: contactId,
 	});
 
-	res.status(200).json({ message: "Contact deleted" });
+	return res.status(200).json({ message: "Contact deleted" });
 };
diff --git a/backend/src/controllers/ImportPhoneContactsController.js b/backend/src/controllers/ImportPhoneContactsController.js
index b410c08..19b5537 100644
--- a/backend/src/controllers/ImportPhoneContactsController.js
+++ b/backend/src/controllers/ImportPhoneContactsController.js
@@ -6,7 +6,16 @@ exports.store = async (req, res, next) => {
 	const io = getIO();
 	const wbot = getWbot();
 
-	const phoneContacts = await wbot.getContacts();
+	let phoneContacts;
+
+	try {
+		phoneContacts = await wbot.getContacts();
+	} catch (err) {
+		console.log(err);
+		return res.status(500).json({
+			error: "Could not check whatsapp contact. Check connection page.",
+		});
+	}
 
 	await Promise.all(
 		phoneContacts.map(async ({ number, name }) => {
diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js
index 62d9afc..2639b55 100644
--- a/backend/src/controllers/MessageController.js
+++ b/backend/src/controllers/MessageController.js
@@ -38,9 +38,6 @@ const setMessagesAsRead = async ticket => {
 };
 
 exports.index = async (req, res, next) => {
-	// const wbot = getWbot();
-	// const io = getIO();
-
 	const { ticketId } = req.params;
 	const { searchParam = "", pageNumber = 1 } = req.query;
 
@@ -125,6 +122,10 @@ exports.store = async (req, res, next) => {
 		],
 	});
 
+	if (!ticket) {
+		return res.status(404).json({ error: "No ticket found with this ID" });
+	}
+
 	try {
 		if (media) {
 			const newMedia = MessageMedia.fromFilePath(req.file.path);
diff --git a/backend/src/controllers/SessionController.js b/backend/src/controllers/SessionController.js
index f8d22ff..2f19dca 100644
--- a/backend/src/controllers/SessionController.js
+++ b/backend/src/controllers/SessionController.js
@@ -8,7 +8,7 @@ exports.store = async (req, res, next) => {
 
 	const user = await User.findOne({ where: { email: email } });
 	if (!user) {
-		return res.status(401).json({ error: "No user found with this email" });
+		return res.status(404).json({ error: "No user found with this email" });
 	}
 
 	if (!(await user.checkPassword(password))) {
diff --git a/backend/src/controllers/SettingController.js b/backend/src/controllers/SettingController.js
index 322e8c9..15e4203 100644
--- a/backend/src/controllers/SettingController.js
+++ b/backend/src/controllers/SettingController.js
@@ -13,7 +13,7 @@ exports.update = async (req, res) => {
 	const setting = await Setting.findByPk(settingKey);
 
 	if (!setting) {
-		return res.status(400).json({ error: "No setting found with this ID" });
+		return res.status(404).json({ error: "No setting found with this ID" });
 	}
 
 	await setting.update(req.body);
diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js
index 3e42513..825203e 100644
--- a/backend/src/controllers/TicketController.js
+++ b/backend/src/controllers/TicketController.js
@@ -105,7 +105,7 @@ exports.index = async (req, res) => {
 
 	const hasMore = count > offset + tickets.length;
 
-	return res.json({ count, tickets, hasMore });
+	return res.status(200).json({ count, tickets, hasMore });
 };
 
 exports.store = async (req, res) => {
@@ -139,7 +139,7 @@ exports.update = async (req, res) => {
 	});
 
 	if (!ticket) {
-		return res.status(400).json({ error: "No ticket found with this ID" });
+		return res.status(404).json({ error: "No ticket found with this ID" });
 	}
 
 	await ticket.update(req.body);
diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index 710d433..a77da49 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -71,7 +71,11 @@ exports.store = async (req, res, next) => {
 			.json({ error: "Only administrators can create users." });
 	}
 
-	await schema.validate(req.body);
+	try {
+		await schema.validate(req.body);
+	} catch (err) {
+		return res.status(400).json({ error: err.message });
+	}
 
 	const io = getIO();
 
@@ -88,14 +92,15 @@ exports.store = async (req, res, next) => {
 exports.show = async (req, res) => {
 	const { userId } = req.params;
 
-	const { id, name, email, profile } = await User.findByPk(userId);
-
-	return res.status(200).json({
-		id,
-		name,
-		email,
-		profile,
+	const user = await User.findByPk(userId, {
+		attributes: ["id", "name", "email", "profile"],
 	});
+
+	if (!user) {
+		res.status(400).json({ error: "No user found with this id." });
+	}
+
+	return res.status(200).json(user);
 };
 
 exports.update = async (req, res) => {
@@ -121,7 +126,7 @@ exports.update = async (req, res) => {
 	});
 
 	if (!user) {
-		res.status(400).json({ error: "No user found with this id." });
+		res.status(404).json({ error: "No user found with this id." });
 	}
 
 	if (user.profile === "admin" && req.body.profile === "user") {
diff --git a/backend/src/controllers/WhatsAppSessionController.js b/backend/src/controllers/WhatsAppSessionController.js
index 643d330..882f2b1 100644
--- a/backend/src/controllers/WhatsAppSessionController.js
+++ b/backend/src/controllers/WhatsAppSessionController.js
@@ -21,7 +21,7 @@ exports.delete = async (req, res) => {
 	const dbSession = await Whatsapp.findByPk(sessionId);
 
 	if (!dbSession) {
-		return res.status(200).json({ message: "Session not found" });
+		return res.status(404).json({ message: "Session not found" });
 	}
 
 	await dbSession.update({ session: "", status: "pending" });
diff --git a/backend/src/database/seeds/20200824172424-create-contacts.js b/backend/src/database/seeds/20200824172424-create-contacts.js
deleted file mode 100644
index 54a55cd..0000000
--- a/backend/src/database/seeds/20200824172424-create-contacts.js
+++ /dev/null
@@ -1,48 +0,0 @@
-"use strict";
-
-module.exports = {
-	up: (queryInterface, Sequelize) => {
-		return queryInterface.bulkInsert(
-			"Contacts",
-			[
-				{
-					name: "Joana Doe",
-					profilePicUrl:
-						"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80",
-					number: 5512345678,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					name: "John Rulles",
-					profilePicUrl:
-						"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
-					number: 5512345679,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					name: "Jonas Jhones",
-					profilePicUrl:
-						"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
-					number: 5512345680,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					name: "Julie June",
-					profilePicUrl:
-						"https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
-					number: 5512345681,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-			],
-			{}
-		);
-	},
-
-	down: (queryInterface, Sequelize) => {
-		return queryInterface.bulkDelete("Contacts", null, {});
-	},
-};
diff --git a/backend/src/database/seeds/20200824173654-create-tickets.js b/backend/src/database/seeds/20200824173654-create-tickets.js
deleted file mode 100644
index 83fd634..0000000
--- a/backend/src/database/seeds/20200824173654-create-tickets.js
+++ /dev/null
@@ -1,261 +0,0 @@
-"use strict";
-
-module.exports = {
-	up: (queryInterface, Sequelize) => {
-		return queryInterface.bulkInsert(
-			"Tickets",
-			[
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 3,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 4,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 2,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					status: "pending",
-					lastMessage: "hello!",
-					contactId: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-			],
-			{}
-		);
-	},
-
-	down: (queryInterface, Sequelize) => {
-		return queryInterface.bulkDelete("Tickets", null, {});
-	},
-};
diff --git a/backend/src/database/seeds/20200824174824-create-messages.js b/backend/src/database/seeds/20200824174824-create-messages.js
deleted file mode 100644
index 0037136..0000000
--- a/backend/src/database/seeds/20200824174824-create-messages.js
+++ /dev/null
@@ -1,148 +0,0 @@
-"use strict";
-
-module.exports = {
-	up: (queryInterface, Sequelize) => {
-		return queryInterface.bulkInsert(
-			"Messages",
-			[
-				{
-					id: "12312321342",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 0,
-					ticketId: 1,
-					fromMe: false,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321313",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 3,
-					ticketId: 1,
-					fromMe: true,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321314",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 3,
-					ticketId: 1,
-					fromMe: true,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321315",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 0,
-					ticketId: 1,
-					fromMe: false,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321316",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 0,
-					ticketId: 5,
-					fromMe: false,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321355",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 3,
-					ticketId: 5,
-					fromMe: true,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321318",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 3,
-					ticketId: 5,
-					fromMe: true,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321319",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 0,
-					ticketId: 5,
-					fromMe: false,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321399",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 0,
-					ticketId: 11,
-					fromMe: false,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321391",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 3,
-					ticketId: 11,
-					fromMe: true,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321392",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 3,
-					ticketId: 11,
-					fromMe: true,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-				{
-					id: "12312321393",
-					body:
-						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-					ack: 0,
-					ticketId: 11,
-					fromMe: false,
-					read: 1,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-			],
-			{}
-		);
-	},
-
-	down: (queryInterface, Sequelize) => {
-		return queryInterface.bulkDelete("Messages", null, {});
-	},
-};
diff --git a/frontend/src/components/ContactModal/index.js b/frontend/src/components/ContactModal/index.js
index 1d5a0d3..326837d 100644
--- a/frontend/src/components/ContactModal/index.js
+++ b/frontend/src/components/ContactModal/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 
 import * as Yup from "yup";
 import { Formik, FieldArray, Form, Field } from "formik";
+import { toast } from "react-toastify";
 
 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
@@ -76,8 +77,15 @@ const ContactModal = ({ open, onClose, contactId }) => {
 	useEffect(() => {
 		const fetchContact = async () => {
 			if (!contactId) return;
-			const res = await api.get(`/contacts/${contactId}`);
-			setContact(res.data);
+			try {
+				const { data } = await api.get(`/contacts/${contactId}`);
+				setContact(data);
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
 		};
 
 		fetchContact();
@@ -95,9 +103,12 @@ const ContactModal = ({ open, onClose, contactId }) => {
 			} else {
 				await api.post("/contacts", values);
 			}
+			toast.success("Contact saved sucessfully!");
 		} catch (err) {
-			alert(JSON.stringify(err.response.data, null, 2));
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		handleClose();
 	};
@@ -131,6 +142,7 @@ const ContactModal = ({ open, onClose, contactId }) => {
 									as={TextField}
 									label={i18n.t("contactModal.form.name")}
 									name="name"
+									autoFocus
 									error={touched.name && Boolean(errors.name)}
 									helperText={touched.name && errors.name}
 									variant="outlined"
diff --git a/frontend/src/components/MessageInput/index.js b/frontend/src/components/MessageInput/index.js
index 14d3373..20dc358 100644
--- a/frontend/src/components/MessageInput/index.js
+++ b/frontend/src/components/MessageInput/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import "emoji-mart/css/emoji-mart.css";
 import { useParams } from "react-router-dom";
 import { Picker } from "emoji-mart";
+import { toast } from "react-toastify";
 import MicRecorder from "mic-recorder-to-mp3";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -163,8 +164,10 @@ const MessageInput = () => {
 		try {
 			await api.post(`/messages/${ticketId}`, formData);
 		} catch (err) {
-			alert(err.response.data.error);
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		setLoading(false);
 		setMedia(mediaInitialState);
@@ -182,8 +185,10 @@ const MessageInput = () => {
 		try {
 			await api.post(`/messages/${ticketId}`, message);
 		} catch (err) {
-			alert(err.response.data.error);
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		setInputMessage("");
 		setShowEmoji(false);
@@ -224,8 +229,10 @@ const MessageInput = () => {
 				try {
 					await api.post(`/messages/${ticketId}`, formData);
 				} catch (err) {
-					alert(err.response.data.error);
 					console.log(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
 				}
 				setRecording(false);
 				setLoading(false);
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index 16f16a0..00b4e55 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -303,8 +303,12 @@ const MessagesList = () => {
 					}
 				} catch (err) {
 					console.log(err);
-					toast.error("Ticket não encontrado");
-					history.push("/tickets");
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+						if (err.response.status === 404) {
+							history.push("/tickets");
+						}
+					}
 				}
 			};
 			fetchMessages();
@@ -417,6 +421,9 @@ const MessagesList = () => {
 			});
 		} catch (err) {
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		history.push("/tickets");
 	};
diff --git a/frontend/src/components/NewTicketModal/index.js b/frontend/src/components/NewTicketModal/index.js
index 83769e2..1a6a4a8 100644
--- a/frontend/src/components/NewTicketModal/index.js
+++ b/frontend/src/components/NewTicketModal/index.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
+import { toast } from "react-toastify";
 
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
@@ -38,7 +39,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
+const NewTicketModal = ({ modalOpen, onClose }) => {
 	const history = useHistory();
 	const classes = useStyles();
 	const userId = +localStorage.getItem("userId");
@@ -54,18 +55,21 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 		const delayDebounceFn = setTimeout(() => {
 			const fetchContacts = async () => {
 				try {
-					const res = await api.get("contacts", {
-						params: { searchParam, rowsPerPage: 20 },
+					const { data } = await api.get("contacts", {
+						params: { searchParam },
 					});
-					setOptions(res.data.contacts);
+					setOptions(data.contacts);
 					setLoading(false);
 				} catch (err) {
-					alert(err);
+					console.log(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
 				}
 			};
 
 			fetchContacts();
-		}, 1000);
+		}, 500);
 		return () => clearTimeout(delayDebounceFn);
 	}, [searchParam, modalOpen]);
 
@@ -87,7 +91,10 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 			});
 			history.push(`/tickets/${ticket.id}`);
 		} catch (err) {
-			alert(err);
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		setLoading(false);
 		handleClose();
@@ -107,13 +114,14 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 					</DialogTitle>
 					<DialogContent dividers>
 						<Autocomplete
-							id="asynchronous-demo"
+							id="contacts-finder"
 							style={{ width: 300 }}
 							getOptionLabel={option => `${option.name} - ${option.number}`}
 							onChange={(e, newValue) => {
 								setSelectedContact(newValue);
 							}}
 							options={options}
+							noOptionsText="No contacts found. Try another term."
 							loading={loading}
 							renderInput={params => (
 								<TextField
diff --git a/frontend/src/components/SessionInfo/index.js b/frontend/src/components/SessionInfo/index.js
index 1fe4900..b43af32 100644
--- a/frontend/src/components/SessionInfo/index.js
+++ b/frontend/src/components/SessionInfo/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import { format, parseISO } from "date-fns";
+import { toast } from "react-toastify";
 
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
@@ -12,6 +13,9 @@ const SessionInfo = ({ session }) => {
 			await api.delete("/whatsapp/session/1");
 		} catch (err) {
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
diff --git a/frontend/src/components/UserModal/index.js b/frontend/src/components/UserModal/index.js
index f5402bb..52a33e7 100644
--- a/frontend/src/components/UserModal/index.js
+++ b/frontend/src/components/UserModal/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 
 import * as Yup from "yup";
 import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
 
 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
@@ -76,10 +77,17 @@ const UserModal = ({ open, onClose, userId }) => {
 	useEffect(() => {
 		const fetchUser = async () => {
 			if (!userId) return;
-			const { data } = await api.get(`/users/${userId}`);
-			setUser(prevState => {
-				return { ...prevState, ...data };
-			});
+			try {
+				const { data } = await api.get(`/users/${userId}`);
+				setUser(prevState => {
+					return { ...prevState, ...data };
+				});
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
 		};
 
 		fetchUser();
@@ -97,9 +105,12 @@ const UserModal = ({ open, onClose, userId }) => {
 			} else {
 				await api.post("/users", values);
 			}
+			toast.success("Success!");
 		} catch (err) {
-			alert(JSON.stringify(err.response.data, null, 2));
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		handleClose();
 	};
@@ -127,6 +138,7 @@ const UserModal = ({ open, onClose, userId }) => {
 								<Field
 									as={TextField}
 									label="Name"
+									autoFocus
 									name="name"
 									error={touched.name && Boolean(errors.name)}
 									helperText={touched.name && errors.name}
diff --git a/frontend/src/context/Auth/useAuth.js b/frontend/src/context/Auth/useAuth.js
index 995c10b..4396d6f 100644
--- a/frontend/src/context/Auth/useAuth.js
+++ b/frontend/src/context/Auth/useAuth.js
@@ -35,7 +35,10 @@ const useAuth = () => {
 			} catch (err) {
 				setLoading(false);
 				setIsAuth(false);
-				toast.error(i18n.t("auth.toasts.fail"));
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
 			}
 		};
 		checkAuth();
@@ -53,7 +56,10 @@ const useAuth = () => {
 			toast.success(i18n.t("auth.toasts.success"));
 			history.push("/tickets");
 		} catch (err) {
-			toast.error(i18n.t("auth.toasts.fail"));
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
diff --git a/frontend/src/hooks/useTickets/index.js b/frontend/src/hooks/useTickets/index.js
index 2bd2b36..535f4ca 100644
--- a/frontend/src/hooks/useTickets/index.js
+++ b/frontend/src/hooks/useTickets/index.js
@@ -1,5 +1,6 @@
 import { useState, useEffect, useReducer } from "react";
 import openSocket from "socket.io-client";
+import { toast } from "react-toastify";
 
 import api from "../../services/api";
 
@@ -97,6 +98,9 @@ const useTickets = ({ searchParam, pageNumber, status, date, showAll }) => {
 					setLoading(false);
 				} catch (err) {
 					console.log(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
 				}
 			};
 			fetchTickets();
diff --git a/frontend/src/pages/Connection/index.js b/frontend/src/pages/Connection/index.js
index 9fa4a15..84ca425 100644
--- a/frontend/src/pages/Connection/index.js
+++ b/frontend/src/pages/Connection/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import api from "../../services/api";
 import openSocket from "socket.io-client";
+import { toast } from "react-toastify";
 
 import { makeStyles } from "@material-ui/core/styles";
 
@@ -46,6 +47,9 @@ const WhatsAuth = () => {
 				setSession(data);
 			} catch (err) {
 				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
 			}
 		};
 		fetchSession();
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index e46365f..5f916a2 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useReducer } from "react";
 import openSocket from "socket.io-client";
+import { toast } from "react-toastify";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -114,7 +115,9 @@ const Contacts = () => {
 					setLoading(false);
 				} catch (err) {
 					console.log(err);
-					alert(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
 				}
 			};
 			fetchContacts();
@@ -161,8 +164,12 @@ const Contacts = () => {
 	const handleDeleteContact = async contactId => {
 		try {
 			await api.delete(`/contacts/${contactId}`);
+			toast.success("Contact deleted sucessfully!");
 		} catch (err) {
-			alert(err);
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 		setDeletingContact(null);
 		setSearchParam("");
@@ -172,8 +179,10 @@ const Contacts = () => {
 	const handleimportContact = async () => {
 		try {
 			await api.post("/contacts/import");
+			window.location.reload(false);
 		} catch (err) {
 			console.log(err);
+			window.location.reload(false);
 		}
 	};
 
diff --git a/frontend/src/pages/Settings/index.js b/frontend/src/pages/Settings/index.js
index 418eebf..a1dc40d 100644
--- a/frontend/src/pages/Settings/index.js
+++ b/frontend/src/pages/Settings/index.js
@@ -43,6 +43,9 @@ const Settings = () => {
 				setSettings(data);
 			} catch (err) {
 				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
 			}
 		};
 		fetchSession();
@@ -77,14 +80,16 @@ const Settings = () => {
 			});
 			toast.success("Setting updated");
 		} catch (err) {
-			alert(err);
 			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
 	const getSettingValue = key => {
-		const setting = settings.find(s => s.key === key);
-		return setting.value;
+		const { value } = settings.find(s => s.key === key);
+		return value;
 	};
 
 	return (
diff --git a/frontend/src/pages/Signup/index.js b/frontend/src/pages/Signup/index.js
index 9823670..65680c4 100644
--- a/frontend/src/pages/Signup/index.js
+++ b/frontend/src/pages/Signup/index.js
@@ -78,7 +78,10 @@ const SignUp = () => {
 			toast.success(i18n.t("signup.toasts.success"));
 			history.push("/login");
 		} catch (err) {
-			toast.error(i18n.t("signup.toasts.fail"));
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 

From 8786c7ca5ef11d221cab18e2a890e5b5e2a3b262 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Fri, 4 Sep 2020 20:18:11 -0300
Subject: [PATCH 10/25] feat: started multiple whatsapps support

---
 backend/src/app.js                            | 32 +++++++++---
 .../20200904220257-add-name-to-whatsapp.js    | 15 ++++++
 backend/src/libs/wbot.js                      | 49 ++++++++++---------
 backend/src/models/Whatsapp.js                |  1 +
 backend/src/services/wbotMessageListener.js   |  5 +-
 backend/src/services/wbotMonitor.js           |  6 +--
 6 files changed, 72 insertions(+), 36 deletions(-)
 create mode 100644 backend/src/database/migrations/20200904220257-add-name-to-whatsapp.js

diff --git a/backend/src/app.js b/backend/src/app.js
index 98f1607..ba664b9 100644
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -10,6 +10,7 @@ const Sentry = require("@sentry/node");
 const wBot = require("./libs/wbot");
 const wbotMessageListener = require("./services/wbotMessageListener");
 const wbotMonitor = require("./services/wbotMonitor");
+const Whatsapp = require("./models/Whatsapp");
 
 const Router = require("./router");
 
@@ -55,13 +56,30 @@ io.on("connection", socket => {
 	});
 });
 
-wBot
-	.init()
-	.then(({ dbSession }) => {
-		wbotMessageListener();
-		wbotMonitor(dbSession);
-	})
-	.catch(err => console.log(err));
+const startWhatsAppSessions = async () => {
+	const whatsapps = await Whatsapp.findAll();
+
+	if (whatsapps.length > 0) {
+		whatsapps.forEach(dbSession => {
+			wBot
+				.init(dbSession)
+				.then(() => {
+					wbotMessageListener(dbSession);
+					wbotMonitor(dbSession);
+				})
+				.catch(err => console.log(err));
+		});
+	}
+};
+startWhatsAppSessions();
+
+// wBot
+// 	.init()
+// 	.then(({ dbSession }) => {
+// 		wbotMessageListener();
+// 		wbotMonitor(dbSession);
+// 	})
+// 	.catch(err => console.log(err));
 
 app.use(Sentry.Handlers.errorHandler());
 
diff --git a/backend/src/database/migrations/20200904220257-add-name-to-whatsapp.js b/backend/src/database/migrations/20200904220257-add-name-to-whatsapp.js
new file mode 100644
index 0000000..b2fefc2
--- /dev/null
+++ b/backend/src/database/migrations/20200904220257-add-name-to-whatsapp.js
@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.addColumn("Whatsapps", "name", {
+			type: Sequelize.STRING,
+			allowNull: false,
+			unique: true,
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.removeColumn("Whatsapps", "name");
+	},
+};
diff --git a/backend/src/libs/wbot.js b/backend/src/libs/wbot.js
index ff62ade..ee98d2f 100644
--- a/backend/src/libs/wbot.js
+++ b/backend/src/libs/wbot.js
@@ -3,28 +3,24 @@ const { Client } = require("whatsapp-web.js");
 const Whatsapp = require("../models/Whatsapp");
 const { getIO } = require("../libs/socket");
 
-let wbot;
+let sessions = [];
 
 module.exports = {
-	init: async () => {
+	init: async dbSession => {
+		const sessionName = dbSession.name;
 		let sessionCfg;
 
-		const [dbSession] = await Whatsapp.findOrCreate({
-			where: { id: 1 },
-			defaults: {
-				id: 1,
-			},
-		});
 		if (dbSession && dbSession.session) {
 			sessionCfg = JSON.parse(dbSession.session);
 		}
 
-		wbot = new Client({
+		const wbot = new Client({
 			session: sessionCfg,
 			restartOnAuthFail: true,
 		});
 		wbot.initialize();
 		wbot.on("qr", async qr => {
+			console.log("Session:", sessionName);
 			qrCode.generate(qr, { small: true });
 			await dbSession.update({ id: 1, qrcode: qr, status: "disconnected" });
 			getIO().emit("session", {
@@ -34,9 +30,8 @@ module.exports = {
 			});
 		});
 		wbot.on("authenticated", async session => {
-			console.log("AUTHENTICATED");
+			console.log("Session:", sessionName, "AUTHENTICATED");
 			await dbSession.update({
-				id: 1,
 				session: JSON.stringify(session),
 				status: "authenticated",
 			});
@@ -46,15 +41,16 @@ module.exports = {
 			});
 		});
 		wbot.on("auth_failure", async msg => {
-			console.error("AUTHENTICATION FAILURE", msg);
-			await Whatsapp.update({ session: "" }, { where: { id: 1 } });
+			console.error("Session:", sessionName, "AUTHENTICATION FAILURE", msg);
+			await dbSession.update({ session: "" });
 		});
 		wbot.on("ready", async () => {
-			console.log("READY");
-			await dbSession.update(
-				{ status: "CONNECTED", qrcode: "" },
-				{ where: { id: 1 } }
-			);
+			console.log("Session:", sessionName, "READY");
+			await dbSession.update({
+				status: "CONNECTED",
+				qrcode: "",
+			});
+
 			// 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) {
@@ -66,15 +62,20 @@ module.exports = {
 			// }
 
 			// console.log(unreadMessages);
-			wbot.sendPresenceAvailable();
+			// wbot.sendPresenceAvailable();
 		});
-		return { wbot, dbSession };
+
+		wbot.name = sessionName;
+		sessions.push(wbot);
+		return null;
 	},
 
-	getWbot: () => {
-		if (!wbot) {
-			throw new Error("Wbot not initialized");
+	getWbot: sessionName => {
+		const sessionIndex = sessions.findIndex(s => s.name === sessionName);
+
+		if (sessionIndex === -1) {
+			throw new Error("This Wbot session is not initialized");
 		}
-		return wbot;
+		return sessions[sessionIndex];
 	},
 };
diff --git a/backend/src/models/Whatsapp.js b/backend/src/models/Whatsapp.js
index d60604a..05b57a3 100644
--- a/backend/src/models/Whatsapp.js
+++ b/backend/src/models/Whatsapp.js
@@ -6,6 +6,7 @@ class Whatsapp extends Sequelize.Model {
 			{
 				session: { type: Sequelize.TEXT },
 				qrcode: { type: Sequelize.TEXT },
+				name: { type: Sequelize.STRING, unique: true, allowNull: false },
 				status: { type: Sequelize.STRING },
 				battery: { type: Sequelize.STRING },
 				plugged: { type: Sequelize.BOOLEAN },
diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js
index 329640b..b6dcb32 100644
--- a/backend/src/services/wbotMessageListener.js
+++ b/backend/src/services/wbotMessageListener.js
@@ -132,12 +132,13 @@ const handleMessage = async (msg, ticket, contact) => {
 	});
 };
 
-const wbotMessageListener = () => {
-	const wbot = getWbot();
+const wbotMessageListener = dbSession => {
+	const wbot = getWbot(dbSession.name);
 	const io = getIO();
 
 	wbot.on("message_create", async msg => {
 		console.log(msg);
+
 		if (
 			msg.from === "status@broadcast" ||
 			msg.type === "location" ||
diff --git a/backend/src/services/wbotMonitor.js b/backend/src/services/wbotMonitor.js
index b8e4145..b49b8a1 100644
--- a/backend/src/services/wbotMonitor.js
+++ b/backend/src/services/wbotMonitor.js
@@ -7,7 +7,7 @@ const { getWbot, init } = require("../libs/wbot");
 
 const wbotMonitor = dbSession => {
 	const io = getIO();
-	const wbot = getWbot();
+	const wbot = getWbot(dbSession.name);
 
 	try {
 		wbot.on("change_state", async newState => {
@@ -58,8 +58,8 @@ const wbotMonitor = dbSession => {
 
 			setTimeout(
 				() =>
-					init()
-						.then(({ dbSession }) => {
+					init(dbSession)
+						.then(() => {
 							wbotMessageListener();
 							wbotMonitor(dbSession);
 						})

From b8ff993e6f21dc18b09a3897cc8a4455f778b619 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sat, 5 Sep 2020 14:41:55 -0300
Subject: [PATCH 11/25] feat: new connections page to handle multiple whats

---
 .../controllers/WhatsAppSessionController.js  |  28 +-
 backend/src/libs/wbot.js                      |  43 ++-
 backend/src/router/routes/whatsapp.js         |   9 +-
 backend/src/services/wbotMessageListener.js   |   2 +-
 backend/src/services/wbotMonitor.js           |  15 +-
 frontend/src/components/Qrcode/index.js       |  18 --
 frontend/src/components/QrcodeModal/index.js  |  37 +++
 frontend/src/components/SessionInfo/index.js  |   4 +-
 frontend/src/pages/Connection/index.js        | 298 ++++++++++++++----
 9 files changed, 335 insertions(+), 119 deletions(-)
 delete mode 100644 frontend/src/components/Qrcode/index.js
 create mode 100644 frontend/src/components/QrcodeModal/index.js

diff --git a/backend/src/controllers/WhatsAppSessionController.js b/backend/src/controllers/WhatsAppSessionController.js
index 882f2b1..67c5f16 100644
--- a/backend/src/controllers/WhatsAppSessionController.js
+++ b/backend/src/controllers/WhatsAppSessionController.js
@@ -2,6 +2,12 @@ const Whatsapp = require("../models/Whatsapp");
 const { getIO } = require("../libs/socket");
 const { getWbot } = require("../libs/wbot");
 
+exports.index = async (req, res) => {
+	const dbSession = await Whatsapp.findAll();
+
+	return res.status(200).json(dbSession);
+};
+
 exports.show = async (req, res) => {
 	const { sessionId } = req.params;
 	const dbSession = await Whatsapp.findByPk(sessionId);
@@ -13,33 +19,25 @@ exports.show = async (req, res) => {
 	return res.status(200).json(dbSession);
 };
 
-exports.delete = async (req, res) => {
-	const wbot = getWbot();
-	const io = getIO();
-
+exports.update = async (req, res) => {
 	const { sessionId } = req.params;
+
 	const dbSession = await Whatsapp.findByPk(sessionId);
 
 	if (!dbSession) {
 		return res.status(404).json({ message: "Session not found" });
 	}
 
-	await dbSession.update({ session: "", status: "pending" });
+	const wbot = getWbot(dbSession.id);
+	const io = getIO();
+
+	await dbSession.update(req.body);
 	wbot.logout();
 
 	io.emit("session", {
-		action: "logout",
+		action: "update",
 		session: dbSession,
 	});
 
 	return res.status(200).json({ message: "session disconnected" });
 };
-
-// exports.getContacts = async (req, res, next) => {
-// 	const io = getIO();
-// 	const wbot = getWbot();
-
-// 	const phoneContacts = await wbot.getContacts();
-
-// 	return res.status(200).json(phoneContacts);
-// };
diff --git a/backend/src/libs/wbot.js b/backend/src/libs/wbot.js
index ee98d2f..2651db5 100644
--- a/backend/src/libs/wbot.js
+++ b/backend/src/libs/wbot.js
@@ -7,6 +7,7 @@ let sessions = [];
 
 module.exports = {
 	init: async dbSession => {
+		const io = getIO();
 		const sessionName = dbSession.name;
 		let sessionCfg;
 
@@ -14,43 +15,64 @@ module.exports = {
 			sessionCfg = JSON.parse(dbSession.session);
 		}
 
+		const sessionIndex = sessions.findIndex(s => s.id === dbSession.id);
+		if (sessionIndex !== -1) {
+			sessions[sessionIndex].destroy();
+			sessions.splice(sessionIndex, 1);
+		}
+
 		const wbot = new Client({
 			session: sessionCfg,
 			restartOnAuthFail: true,
 		});
 		wbot.initialize();
+
 		wbot.on("qr", async qr => {
 			console.log("Session:", sessionName);
+
 			qrCode.generate(qr, { small: true });
-			await dbSession.update({ id: 1, qrcode: qr, status: "disconnected" });
-			getIO().emit("session", {
+
+			await dbSession.update({ id: 1, qrcode: qr, status: "qrcode" });
+
+			io.emit("session", {
 				action: "update",
-				qr: qr,
 				session: dbSession,
 			});
 		});
+
 		wbot.on("authenticated", async session => {
 			console.log("Session:", sessionName, "AUTHENTICATED");
+
 			await dbSession.update({
 				session: JSON.stringify(session),
 				status: "authenticated",
 			});
-			getIO().emit("session", {
-				action: "authentication",
+
+			io.emit("session", {
+				action: "update",
 				session: dbSession,
 			});
 		});
+
 		wbot.on("auth_failure", async msg => {
 			console.error("Session:", sessionName, "AUTHENTICATION FAILURE", msg);
+
 			await dbSession.update({ session: "" });
 		});
+
 		wbot.on("ready", async () => {
 			console.log("Session:", sessionName, "READY");
+
 			await dbSession.update({
 				status: "CONNECTED",
 				qrcode: "",
 			});
 
+			io.emit("session", {
+				action: "update",
+				session: dbSession,
+			});
+
 			// 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) {
@@ -62,16 +84,19 @@ module.exports = {
 			// }
 
 			// console.log(unreadMessages);
-			// wbot.sendPresenceAvailable();
+			wbot.sendPresenceAvailable();
 		});
 
-		wbot.name = sessionName;
+		wbot.id = dbSession.id;
 		sessions.push(wbot);
+
 		return null;
 	},
 
-	getWbot: sessionName => {
-		const sessionIndex = sessions.findIndex(s => s.name === sessionName);
+	getWbot: sessionId => {
+		console.log(sessionId);
+		console.log(sessions.map(session => session.id));
+		const sessionIndex = sessions.findIndex(s => s.id === sessionId);
 
 		if (sessionIndex === -1) {
 			throw new Error("This Wbot session is not initialized");
diff --git a/backend/src/router/routes/whatsapp.js b/backend/src/router/routes/whatsapp.js
index 4eb8758..97f792c 100644
--- a/backend/src/router/routes/whatsapp.js
+++ b/backend/src/router/routes/whatsapp.js
@@ -5,19 +5,18 @@ const WhatsAppSessionController = require("../../controllers/WhatsAppSessionCont
 
 const routes = express.Router();
 
+routes.get("/whatsapp/session/", isAuth, WhatsAppSessionController.index);
+
 routes.get(
 	"/whatsapp/session/:sessionId",
 	isAuth,
 	WhatsAppSessionController.show
 );
 
-routes.delete(
+routes.put(
 	"/whatsapp/session/:sessionId",
 	isAuth,
-	WhatsAppSessionController.delete
+	WhatsAppSessionController.update
 );
 
-// fetch contacts in user cellphone, not in use
-// routes.get("/whatsapp/contacts", isAuth, WhatsappController.getContacts);
-
 module.exports = routes;
diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js
index b6dcb32..cc5f013 100644
--- a/backend/src/services/wbotMessageListener.js
+++ b/backend/src/services/wbotMessageListener.js
@@ -133,7 +133,7 @@ const handleMessage = async (msg, ticket, contact) => {
 };
 
 const wbotMessageListener = dbSession => {
-	const wbot = getWbot(dbSession.name);
+	const wbot = getWbot(dbSession.id);
 	const io = getIO();
 
 	wbot.on("message_create", async msg => {
diff --git a/backend/src/services/wbotMonitor.js b/backend/src/services/wbotMonitor.js
index b49b8a1..e6715d8 100644
--- a/backend/src/services/wbotMonitor.js
+++ b/backend/src/services/wbotMonitor.js
@@ -7,11 +7,12 @@ const { getWbot, init } = require("../libs/wbot");
 
 const wbotMonitor = dbSession => {
 	const io = getIO();
-	const wbot = getWbot(dbSession.name);
+	const sessionName = dbSession.name;
+	const wbot = getWbot(dbSession.id);
 
 	try {
 		wbot.on("change_state", async newState => {
-			console.log("monitor", newState);
+			console.log("Monitor session:", sessionName, newState);
 			try {
 				await dbSession.update({ status: newState });
 			} catch (err) {
@@ -27,7 +28,9 @@ const wbotMonitor = dbSession => {
 
 		wbot.on("change_battery", async batteryInfo => {
 			const { battery, plugged } = batteryInfo;
-			console.log(`Battery: ${battery}% - Charging? ${plugged}`);
+			console.log(
+				`Battery session: ${sessionName} ${battery}% - Charging? ${plugged}`
+			);
 
 			try {
 				await dbSession.update({ battery, plugged });
@@ -43,7 +46,7 @@ const wbotMonitor = dbSession => {
 		});
 
 		wbot.on("disconnected", async reason => {
-			console.log("disconnected", reason);
+			console.log("Disconnected session:", sessionName, reason);
 			try {
 				await dbSession.update({ status: "disconnected" });
 			} catch (err) {
@@ -52,7 +55,7 @@ const wbotMonitor = dbSession => {
 			}
 
 			io.emit("session", {
-				action: "logout",
+				action: "update",
 				session: dbSession,
 			});
 
@@ -60,7 +63,7 @@ const wbotMonitor = dbSession => {
 				() =>
 					init(dbSession)
 						.then(() => {
-							wbotMessageListener();
+							wbotMessageListener(dbSession);
 							wbotMonitor(dbSession);
 						})
 						.catch(err => {
diff --git a/frontend/src/components/Qrcode/index.js b/frontend/src/components/Qrcode/index.js
deleted file mode 100644
index c73daf1..0000000
--- a/frontend/src/components/Qrcode/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import QRCode from "qrcode.react";
-import Typography from "@material-ui/core/Typography";
-
-import { i18n } from "../../translate/i18n";
-
-const Qrcode = ({ qrCode }) => {
-	return (
-		<div>
-			<Typography color="primary" gutterBottom>
-				{i18n.t("qrCode.message")}
-			</Typography>
-			{qrCode ? <QRCode value={qrCode} size={256} /> : <span>loading</span>}
-		</div>
-	);
-};
-
-export default Qrcode;
diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js
new file mode 100644
index 0000000..de80025
--- /dev/null
+++ b/frontend/src/components/QrcodeModal/index.js
@@ -0,0 +1,37 @@
+import React from "react";
+import QRCode from "qrcode.react";
+
+import {
+	Dialog,
+	DialogContent,
+	Paper,
+	Typography,
+	DialogTitle,
+} from "@material-ui/core";
+import { i18n } from "../../translate/i18n";
+
+const QrcodeModal = ({ open, onClose, session }) => {
+	if (session) {
+		return (
+			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
+				<DialogTitle>{session.name}</DialogTitle>
+				<DialogContent>
+					<Paper elevation={0}>
+						<Typography color="primary" gutterBottom>
+							{i18n.t("qrCode.message")}
+						</Typography>
+						{session.qrcode ? (
+							<QRCode value={session.qrcode} size={256} />
+						) : (
+							<span>loading</span>
+						)}
+					</Paper>
+				</DialogContent>
+			</Dialog>
+		);
+	} else {
+		return null;
+	}
+};
+
+export default QrcodeModal;
diff --git a/frontend/src/components/SessionInfo/index.js b/frontend/src/components/SessionInfo/index.js
index b43af32..bb048cc 100644
--- a/frontend/src/components/SessionInfo/index.js
+++ b/frontend/src/components/SessionInfo/index.js
@@ -10,7 +10,7 @@ import api from "../../services/api";
 const SessionInfo = ({ session }) => {
 	const handleDisconectSession = async () => {
 		try {
-			await api.delete("/whatsapp/session/1");
+			await api.put(`/whatsapp/session/${session.id}`);
 		} catch (err) {
 			console.log(err);
 			if (err.response && err.response.data && err.response.data.error) {
@@ -27,7 +27,7 @@ const SessionInfo = ({ session }) => {
 			<Typography variant="body2" gutterBottom>
 				{`${i18n.t("sessionInfo.updatedAt")}`}{" "}
 				{session.updatedAt &&
-					format(parseISO(session.updatedAt), "dd/mm/yy HH:mm")}
+					format(parseISO(session.updatedAt), "dd/MM/yy HH:mm")}
 			</Typography>
 			<Button
 				color="primary"
diff --git a/frontend/src/pages/Connection/index.js b/frontend/src/pages/Connection/index.js
index 84ca425..c8946a9 100644
--- a/frontend/src/pages/Connection/index.js
+++ b/frontend/src/pages/Connection/index.js
@@ -1,50 +1,109 @@
-import React, { useState, useEffect } from "react";
-import { useHistory } from "react-router-dom";
-import api from "../../services/api";
+import React, { useState, useEffect, useReducer } from "react";
 import openSocket from "socket.io-client";
 import { toast } from "react-toastify";
+import { format, parseISO } from "date-fns";
 
 import { makeStyles } from "@material-ui/core/styles";
+import {
+	Button,
+	TableBody,
+	TableRow,
+	TableCell,
+	IconButton,
+	Table,
+	TableHead,
+	Paper,
+} from "@material-ui/core";
+import { WifiOff, DeleteOutline } from "@material-ui/icons";
 
-import Paper from "@material-ui/core/Paper";
-import SessionInfo from "../../components/SessionInfo";
-import Qrcode from "../../components/Qrcode";
+import MainContainer from "../../components/MainContainer";
+import MainHeader from "../../components/MainHeader";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import Title from "../../components/Title";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
+
+import api from "../../services/api";
+import QrcodeModal from "../../components/QrcodeModal";
+
+const reducer = (state, action) => {
+	if (action.type === "LOAD_SESSIONS") {
+		const sessions = action.payload;
+
+		return [...sessions];
+	}
+
+	if (action.type === "UPDATE_SESSIONS") {
+		const session = action.payload;
+		const sessionIndex = state.findIndex(s => s.id === session.id);
+
+		if (sessionIndex !== -1) {
+			state[sessionIndex] = session;
+			return [...state];
+		} else {
+			return [session, ...state];
+		}
+	}
+
+	if (action.type === "DELETE_SESSION") {
+		const sessionId = action.payload;
+
+		const sessionIndex = state.findIndex(s => s.id === sessionId);
+		if (sessionIndex !== -1) {
+			state.splice(sessionIndex, 1);
+		}
+		return [...state];
+	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
+};
 
 const useStyles = makeStyles(theme => ({
-	root: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.spacing(4),
+	// root: {
+	// 	display: "flex",
+	// 	alignItems: "center",
+	// 	justifyContent: "center",
+	// 	padding: theme.spacing(4),
+	// },
+
+	mainPaper: {
+		flex: 1,
+		padding: theme.spacing(1),
+		overflowY: "scroll",
+		...theme.scrollbarStyles,
 	},
 
-	paper: {
-		padding: theme.spacing(2),
-		display: "flex",
-		width: 400,
-		overflow: "auto",
-		flexDirection: "column",
-		alignItems: "center",
-		justifyContent: "center",
-	},
-	fixedHeight: {
-		height: 640,
-	},
+	// paper: {
+	// 	padding: theme.spacing(2),
+	// 	margin: theme.spacing(1),
+	// 	display: "flex",
+	// 	width: 400,
+	// 	height: 270,
+	// 	overflow: "auto",
+	// 	flexDirection: "column",
+	// 	alignItems: "center",
+	// 	justifyContent: "center",
+	// },
+
+	// fixedHeight: {
+	// 	height: 640,
+	// },
 }));
 
 const WhatsAuth = () => {
 	const classes = useStyles();
-	const history = useHistory();
 
-	const [qrCode, setQrCode] = useState("");
-	const [session, setSession] = useState({});
+	const [sessions, dispatch] = useReducer(reducer, []);
+
+	const [qrModalOpen, setQrModalOpen] = useState(false);
+	const [selectedSession, setSelectedSession] = useState(null);
 
 	useEffect(() => {
 		const fetchSession = async () => {
 			try {
-				const { data } = await api.get("/whatsapp/session/1");
-				setQrCode(data.qrcode);
-				setSession(data);
+				const { data } = await api.get("/whatsapp/session/");
+				dispatch({ type: "LOAD_SESSIONS", payload: data });
 			} catch (err) {
 				console.log(err);
 				if (err.response && err.response.data && err.response.data.error) {
@@ -60,48 +119,161 @@ const WhatsAuth = () => {
 
 		socket.on("session", data => {
 			if (data.action === "update") {
-				setQrCode(data.qr);
-				setSession(data.session);
-			}
-		});
-
-		socket.on("session", data => {
-			if (data.action === "update") {
-				setSession(data.session);
-			}
-		});
-
-		socket.on("session", data => {
-			if (data.action === "authentication") {
-				setQrCode("");
-				setSession(data.session);
-				history.push("/tickets");
-			}
-		});
-
-		socket.on("session", data => {
-			if (data.action === "logout") {
-				setSession(data.session);
+				dispatch({ type: "UPDATE_SESSIONS", payload: data.session });
 			}
 		});
 
 		return () => {
 			socket.disconnect();
 		};
-	}, [history]);
+	}, []);
+
+	const handleDisconnectSession = async sessionId => {
+		try {
+			await api.put(`/whatsapp/session/${sessionId}`, {
+				session: "",
+				status: "pending",
+			});
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+	};
+
+	console.log(sessions);
+
+	const handleOpenQrMoral = session => {
+		setQrModalOpen(true);
+		setSelectedSession(session);
+	};
+
+	const handleCloseQrModal = () => {
+		setQrModalOpen(false);
+		setSelectedSession(null);
+	};
 
 	return (
-		<div className={classes.root}>
-			{session && session.status === "disconnected" ? (
-				<Paper className={classes.paper}>
-					<Qrcode qrCode={qrCode} />
-				</Paper>
-			) : (
-				<Paper className={classes.paper}>
-					<SessionInfo session={session} />
-				</Paper>
-			)}
-		</div>
+		<MainContainer>
+			<QrcodeModal
+				open={qrModalOpen}
+				onClose={handleCloseQrModal}
+				aria-labelledby="form-dialog-title"
+				session={selectedSession}
+			/>
+			{/* <Dialog
+				open={qrModalOpen}
+				onClose={handleCloseQrModal}
+				maxWidth="lg"
+				scroll="paper"
+			>
+				<DialogTitle>Qr Code</DialogTitle>
+				<DialogContent>
+					<Paper className={classes.paper}>
+						<Qrcode qrCode={selectedSession && selectedSession.qrcode} />
+					</Paper>
+				</DialogContent>
+			</Dialog> */}
+			<MainHeader>
+				<Title>Connections</Title>
+				<MainHeaderButtonsWrapper>
+					<Button
+						variant="contained"
+						color="primary"
+						// onClick={handleOpenUserModal}
+					>
+						Add Whatsapp
+					</Button>
+				</MainHeaderButtonsWrapper>
+			</MainHeader>
+			<Paper
+				className={classes.mainPaper}
+				variant="outlined"
+				// onScroll={handleScroll}
+			>
+				<Table size="small">
+					<TableHead>
+						<TableRow>
+							<TableCell align="center">Name</TableCell>
+							<TableCell align="center">Status</TableCell>
+							<TableCell align="center">Last update</TableCell>
+							<TableCell align="center">Actions</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{false ? (
+							<TableRowSkeleton />
+						) : (
+							<>
+								{sessions &&
+									sessions.length > 0 &&
+									sessions.map(session => (
+										<TableRow key={session.id}>
+											<TableCell align="center">{session.name}</TableCell>
+											<TableCell align="center">
+												{session.status === "qrcode" ? (
+													<Button
+														size="small"
+														variant="contained"
+														color="primary"
+														onClick={() => handleOpenQrMoral(session)}
+													>
+														QR CODE
+													</Button>
+												) : (
+													session.status
+												)}
+											</TableCell>
+											<TableCell align="center">
+												{format(parseISO(session.updatedAt), "dd/MM/yy HH:mm")}
+											</TableCell>
+											<TableCell align="center">
+												<IconButton
+													size="small"
+													onClick={() => handleDisconnectSession(session.id)}
+												>
+													<WifiOff />
+												</IconButton>
+
+												<IconButton
+													size="small"
+													onClick={e => {
+														// setConfirmModalOpen(true);
+														// setDeletingUser(user);
+													}}
+												>
+													<DeleteOutline />
+												</IconButton>
+											</TableCell>
+										</TableRow>
+									))}
+							</>
+						)}
+					</TableBody>
+				</Table>
+			</Paper>
+
+			{/* <div className={classes.root}>
+				{sessions &&
+					sessions.length > 0 &&
+					sessions.map(session => {
+						if (session.status === "disconnected")
+							return (
+								<Paper className={classes.paper}>
+									<Qrcode qrCode={qrCode} />
+								</Paper>
+							);
+						else {
+							return (
+								<Paper className={classes.paper}>
+									<SessionInfo session={session} />
+								</Paper>
+							);
+						}
+					})}
+			</div> */}
+		</MainContainer>
 	);
 };
 

From 40e2e5e8a625f9dd9510d83df53dd0110d830650 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sat, 5 Sep 2020 15:43:52 -0300
Subject: [PATCH 12/25] improvement: better names on wbot methods

---
 backend/src/app.js                            |   5 +-
 .../ImportPhoneContactsController.js          |   2 +-
 .../controllers/WhatsAppSessionController.js  |  56 +++++-
 backend/src/libs/wbot.js                      | 167 +++++++++---------
 backend/src/router/routes/whatsapp.js         |   8 +
 backend/src/services/wbotMessageListener.js   |   2 +-
 backend/src/services/wbotMonitor.js           |   4 +-
 frontend/src/pages/Connection/index.js        |   8 +
 8 files changed, 160 insertions(+), 92 deletions(-)

diff --git a/backend/src/app.js b/backend/src/app.js
index ba664b9..73e8dcd 100644
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -7,7 +7,7 @@ const cors = require("cors");
 const multer = require("multer");
 const Sentry = require("@sentry/node");
 
-const wBot = require("./libs/wbot");
+const { initWbot } = require("./libs/wbot");
 const wbotMessageListener = require("./services/wbotMessageListener");
 const wbotMonitor = require("./services/wbotMonitor");
 const Whatsapp = require("./models/Whatsapp");
@@ -61,8 +61,7 @@ const startWhatsAppSessions = async () => {
 
 	if (whatsapps.length > 0) {
 		whatsapps.forEach(dbSession => {
-			wBot
-				.init(dbSession)
+			initWbot(dbSession)
 				.then(() => {
 					wbotMessageListener(dbSession);
 					wbotMonitor(dbSession);
diff --git a/backend/src/controllers/ImportPhoneContactsController.js b/backend/src/controllers/ImportPhoneContactsController.js
index 19b5537..c9b79b0 100644
--- a/backend/src/controllers/ImportPhoneContactsController.js
+++ b/backend/src/controllers/ImportPhoneContactsController.js
@@ -1,6 +1,6 @@
 const Contact = require("../models/Contact");
 const { getIO } = require("../libs/socket");
-const { getWbot, init } = require("../libs/wbot");
+const { getWbot, initWbot } = require("../libs/wbot");
 
 exports.store = async (req, res, next) => {
 	const io = getIO();
diff --git a/backend/src/controllers/WhatsAppSessionController.js b/backend/src/controllers/WhatsAppSessionController.js
index 67c5f16..94937ca 100644
--- a/backend/src/controllers/WhatsAppSessionController.js
+++ b/backend/src/controllers/WhatsAppSessionController.js
@@ -1,6 +1,8 @@
 const Whatsapp = require("../models/Whatsapp");
 const { getIO } = require("../libs/socket");
-const { getWbot } = require("../libs/wbot");
+const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
+const wbotMessageListener = require("../services/wbotMessageListener");
+const wbotMonitor = require("../services/wbotMonitor");
 
 exports.index = async (req, res) => {
 	const dbSession = await Whatsapp.findAll();
@@ -8,6 +10,29 @@ exports.index = async (req, res) => {
 	return res.status(200).json(dbSession);
 };
 
+exports.store = async (req, res) => {
+	const io = getIO();
+	const dbSession = await Whatsapp.create(req.body);
+
+	if (!dbSession) {
+		return res.status(400).json({ error: "Cannot create whatsapp session." });
+	}
+
+	initWbot(dbSession)
+		.then(() => {
+			wbotMessageListener(dbSession);
+			wbotMonitor(dbSession);
+		})
+		.catch(err => console.log(err));
+
+	io.emit("session", {
+		action: "update",
+		session: dbSession,
+	});
+
+	return res.status(200).json({ message: "Session created sucessfully." });
+};
+
 exports.show = async (req, res) => {
 	const { sessionId } = req.params;
 	const dbSession = await Whatsapp.findByPk(sessionId);
@@ -20,6 +45,7 @@ exports.show = async (req, res) => {
 };
 
 exports.update = async (req, res) => {
+	const io = getIO();
 	const { sessionId } = req.params;
 
 	const dbSession = await Whatsapp.findByPk(sessionId);
@@ -29,15 +55,37 @@ exports.update = async (req, res) => {
 	}
 
 	const wbot = getWbot(dbSession.id);
-	const io = getIO();
+	wbot.logout();
 
 	await dbSession.update(req.body);
-	wbot.logout();
 
 	io.emit("session", {
 		action: "update",
 		session: dbSession,
 	});
 
-	return res.status(200).json({ message: "session disconnected" });
+	return res.status(200).json({ message: "Session updated" });
+};
+
+exports.delete = async (req, res) => {
+	const io = getIO();
+	const { sessionId } = req.params;
+
+	const dbSession = await Whatsapp.findByPk(sessionId);
+
+	if (!dbSession) {
+		return res.status(404).json({ message: "Session not found" });
+	}
+
+	const wbot = getWbot(dbSession.id);
+	await dbSession.destroy();
+
+	removeWbot(dbSession.id);
+
+	io.emit("session", {
+		action: "delete",
+		sessionId: dbSession.id,
+	});
+
+	return res.status(200).json({ message: "Session deleted." });
 };
diff --git a/backend/src/libs/wbot.js b/backend/src/libs/wbot.js
index 2651db5..39c76ba 100644
--- a/backend/src/libs/wbot.js
+++ b/backend/src/libs/wbot.js
@@ -6,90 +6,83 @@ const { getIO } = require("../libs/socket");
 let sessions = [];
 
 module.exports = {
-	init: async dbSession => {
-		const io = getIO();
-		const sessionName = dbSession.name;
-		let sessionCfg;
+	initWbot: async dbSession => {
+		try {
+			const io = getIO();
+			const sessionName = dbSession.name;
+			let sessionCfg;
 
-		if (dbSession && dbSession.session) {
-			sessionCfg = JSON.parse(dbSession.session);
+			if (dbSession && dbSession.session) {
+				sessionCfg = JSON.parse(dbSession.session);
+			}
+
+			const sessionIndex = sessions.findIndex(s => s.id === dbSession.id);
+			if (sessionIndex !== -1) {
+				sessions[sessionIndex].destroy();
+				sessions.splice(sessionIndex, 1);
+			}
+
+			const wbot = new Client({
+				session: sessionCfg,
+				restartOnAuthFail: true,
+			});
+			wbot.initialize();
+
+			wbot.on("qr", async qr => {
+				console.log("Session:", sessionName);
+
+				qrCode.generate(qr, { small: true });
+
+				await dbSession.update({ id: 1, qrcode: qr, status: "qrcode" });
+
+				io.emit("session", {
+					action: "update",
+					session: dbSession,
+				});
+			});
+
+			wbot.on("authenticated", async session => {
+				console.log("Session:", sessionName, "AUTHENTICATED");
+
+				await dbSession.update({
+					session: JSON.stringify(session),
+					status: "authenticated",
+				});
+
+				io.emit("session", {
+					action: "update",
+					session: dbSession,
+				});
+			});
+
+			wbot.on("auth_failure", async msg => {
+				console.error("Session:", sessionName, "AUTHENTICATION FAILURE", msg);
+
+				await dbSession.update({ session: "" });
+			});
+
+			wbot.on("ready", async () => {
+				console.log("Session:", sessionName, "READY");
+
+				await dbSession.update({
+					status: "CONNECTED",
+					qrcode: "",
+				});
+
+				io.emit("session", {
+					action: "update",
+					session: dbSession,
+				});
+
+				wbot.sendPresenceAvailable();
+			});
+
+			wbot.id = dbSession.id;
+			sessions.push(wbot);
+		} catch (err) {
+			console.log(err);
 		}
 
-		const sessionIndex = sessions.findIndex(s => s.id === dbSession.id);
-		if (sessionIndex !== -1) {
-			sessions[sessionIndex].destroy();
-			sessions.splice(sessionIndex, 1);
-		}
-
-		const wbot = new Client({
-			session: sessionCfg,
-			restartOnAuthFail: true,
-		});
-		wbot.initialize();
-
-		wbot.on("qr", async qr => {
-			console.log("Session:", sessionName);
-
-			qrCode.generate(qr, { small: true });
-
-			await dbSession.update({ id: 1, qrcode: qr, status: "qrcode" });
-
-			io.emit("session", {
-				action: "update",
-				session: dbSession,
-			});
-		});
-
-		wbot.on("authenticated", async session => {
-			console.log("Session:", sessionName, "AUTHENTICATED");
-
-			await dbSession.update({
-				session: JSON.stringify(session),
-				status: "authenticated",
-			});
-
-			io.emit("session", {
-				action: "update",
-				session: dbSession,
-			});
-		});
-
-		wbot.on("auth_failure", async msg => {
-			console.error("Session:", sessionName, "AUTHENTICATION FAILURE", msg);
-
-			await dbSession.update({ session: "" });
-		});
-
-		wbot.on("ready", async () => {
-			console.log("Session:", sessionName, "READY");
-
-			await dbSession.update({
-				status: "CONNECTED",
-				qrcode: "",
-			});
-
-			io.emit("session", {
-				action: "update",
-				session: dbSession,
-			});
-
-			// 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();
-		});
-
-		wbot.id = dbSession.id;
-		sessions.push(wbot);
-
 		return null;
 	},
 
@@ -103,4 +96,16 @@ module.exports = {
 		}
 		return sessions[sessionIndex];
 	},
+
+	removeWbot: sessionId => {
+		try {
+			const sessionIndex = sessions.findIndex(s => s.id === sessionId);
+			if (sessionIndex !== -1) {
+				sessions[sessionIndex].destroy();
+				sessions.splice(sessionIndex, 1);
+			}
+		} catch (err) {
+			console.log(err);
+		}
+	},
 };
diff --git a/backend/src/router/routes/whatsapp.js b/backend/src/router/routes/whatsapp.js
index 97f792c..5c6125f 100644
--- a/backend/src/router/routes/whatsapp.js
+++ b/backend/src/router/routes/whatsapp.js
@@ -7,6 +7,8 @@ const routes = express.Router();
 
 routes.get("/whatsapp/session/", isAuth, WhatsAppSessionController.index);
 
+routes.post("/whatsapp/session", isAuth, WhatsAppSessionController.store);
+
 routes.get(
 	"/whatsapp/session/:sessionId",
 	isAuth,
@@ -19,4 +21,10 @@ routes.put(
 	WhatsAppSessionController.update
 );
 
+routes.delete(
+	"/whatsapp/session/:sessionId",
+	isAuth,
+	WhatsAppSessionController.delete
+);
+
 module.exports = routes;
diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js
index cc5f013..9056caa 100644
--- a/backend/src/services/wbotMessageListener.js
+++ b/backend/src/services/wbotMessageListener.js
@@ -9,7 +9,7 @@ const Ticket = require("../models/Ticket");
 const Message = require("../models/Message");
 
 const { getIO } = require("../libs/socket");
-const { getWbot, init } = require("../libs/wbot");
+const { getWbot, initWbot } = require("../libs/wbot");
 
 const verifyContact = async (msgContact, profilePicUrl) => {
 	let contact = await Contact.findOne({
diff --git a/backend/src/services/wbotMonitor.js b/backend/src/services/wbotMonitor.js
index e6715d8..3bd286d 100644
--- a/backend/src/services/wbotMonitor.js
+++ b/backend/src/services/wbotMonitor.js
@@ -3,7 +3,7 @@ const Sentry = require("@sentry/node");
 const wbotMessageListener = require("./wbotMessageListener");
 
 const { getIO } = require("../libs/socket");
-const { getWbot, init } = require("../libs/wbot");
+const { getWbot, initWbot } = require("../libs/wbot");
 
 const wbotMonitor = dbSession => {
 	const io = getIO();
@@ -61,7 +61,7 @@ const wbotMonitor = dbSession => {
 
 			setTimeout(
 				() =>
-					init(dbSession)
+					initWbot(dbSession)
 						.then(() => {
 							wbotMessageListener(dbSession);
 							wbotMonitor(dbSession);
diff --git a/frontend/src/pages/Connection/index.js b/frontend/src/pages/Connection/index.js
index c8946a9..e3eb62d 100644
--- a/frontend/src/pages/Connection/index.js
+++ b/frontend/src/pages/Connection/index.js
@@ -47,6 +47,8 @@ const reducer = (state, action) => {
 	if (action.type === "DELETE_SESSION") {
 		const sessionId = action.payload;
 
+		console.log("cai aqui", sessionId);
+
 		const sessionIndex = state.findIndex(s => s.id === sessionId);
 		if (sessionIndex !== -1) {
 			state.splice(sessionIndex, 1);
@@ -123,6 +125,12 @@ const WhatsAuth = () => {
 			}
 		});
 
+		socket.on("session", data => {
+			if (data.action === "delete") {
+				dispatch({ type: "DELETE_SESSION", payload: data.sessionId });
+			}
+		});
+
 		return () => {
 			socket.disconnect();
 		};

From f423dd60bc73d61c0d44fe70657244f1e2b61f85 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sat, 5 Sep 2020 17:43:09 -0300
Subject: [PATCH 13/25] feat: continue session handle in frontend

---
 .../controllers/WhatsAppSessionController.js  |   2 +-
 frontend/src/components/QrcodeModal/index.js  |  74 ++++----
 frontend/src/components/SessionModal/index.js | 168 ++++++++++++++++++
 frontend/src/pages/Connection/index.js        |  79 ++++----
 frontend/src/pages/Users/index.js             |  35 ++--
 5 files changed, 271 insertions(+), 87 deletions(-)
 create mode 100644 frontend/src/components/SessionModal/index.js

diff --git a/backend/src/controllers/WhatsAppSessionController.js b/backend/src/controllers/WhatsAppSessionController.js
index 94937ca..2eca860 100644
--- a/backend/src/controllers/WhatsAppSessionController.js
+++ b/backend/src/controllers/WhatsAppSessionController.js
@@ -30,7 +30,7 @@ exports.store = async (req, res) => {
 		session: dbSession,
 	});
 
-	return res.status(200).json({ message: "Session created sucessfully." });
+	return res.status(200).json(dbSession);
 };
 
 exports.show = async (req, res) => {
diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js
index de80025..09a4d39 100644
--- a/frontend/src/components/QrcodeModal/index.js
+++ b/frontend/src/components/QrcodeModal/index.js
@@ -1,37 +1,37 @@
-import React from "react";
-import QRCode from "qrcode.react";
-
-import {
-	Dialog,
-	DialogContent,
-	Paper,
-	Typography,
-	DialogTitle,
-} from "@material-ui/core";
-import { i18n } from "../../translate/i18n";
-
-const QrcodeModal = ({ open, onClose, session }) => {
-	if (session) {
-		return (
-			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
-				<DialogTitle>{session.name}</DialogTitle>
-				<DialogContent>
-					<Paper elevation={0}>
-						<Typography color="primary" gutterBottom>
-							{i18n.t("qrCode.message")}
-						</Typography>
-						{session.qrcode ? (
-							<QRCode value={session.qrcode} size={256} />
-						) : (
-							<span>loading</span>
-						)}
-					</Paper>
-				</DialogContent>
-			</Dialog>
-		);
-	} else {
-		return null;
-	}
-};
-
-export default QrcodeModal;
+import React from "react";
+import QRCode from "qrcode.react";
+
+import {
+	Dialog,
+	DialogContent,
+	Paper,
+	Typography,
+	DialogTitle,
+} from "@material-ui/core";
+import { i18n } from "../../translate/i18n";
+
+const QrcodeModal = ({ open, onClose, session }) => {
+	if (session) {
+		return (
+			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
+				<DialogTitle>{session.name}</DialogTitle>
+				<DialogContent>
+					<Paper elevation={0}>
+						<Typography color="primary" gutterBottom>
+							{i18n.t("qrCode.message")}
+						</Typography>
+						{session.qrcode ? (
+							<QRCode value={session.qrcode} size={256} />
+						) : (
+							<span>Waiting for QR Code</span>
+						)}
+					</Paper>
+				</DialogContent>
+			</Dialog>
+		);
+	} else {
+		return null;
+	}
+};
+
+export default QrcodeModal;
diff --git a/frontend/src/components/SessionModal/index.js b/frontend/src/components/SessionModal/index.js
new file mode 100644
index 0000000..fc7c0a8
--- /dev/null
+++ b/frontend/src/components/SessionModal/index.js
@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from "react";
+import QRCode from "qrcode.react";
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
+
+import {
+	Dialog,
+	DialogContent,
+	Paper,
+	Typography,
+	DialogTitle,
+	Button,
+	DialogActions,
+	CircularProgress,
+	TextField,
+} from "@material-ui/core";
+
+import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	textField: {
+		marginRight: theme.spacing(1),
+		flex: 1,
+	},
+
+	btnWrapper: {
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
+}));
+
+const SessionSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+});
+
+const SessionModal = ({ open, onClose, sessionId }) => {
+	const classes = useStyles();
+	const initialState = {
+		name: "",
+		status: "",
+	};
+	const [session, setSession] = useState(initialState);
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			if (!sessionId) return;
+
+			try {
+				const { data } = await api.get(`whatsapp/session/${sessionId}`);
+				setSession(data);
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
+		};
+		fetchSession();
+	}, [sessionId]);
+
+	const handleSaveSession = async values => {
+		try {
+			if (sessionId) {
+				await api.put(`/whatsapp/session/${sessionId}`, values);
+			} else {
+				await api.post("/whatsapp/session", values);
+			}
+			toast.success("Session created!");
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+		handleClose();
+	};
+
+	const handleClose = () => {
+		onClose();
+		setSession(initialState);
+	};
+
+	return (
+		<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+			<DialogTitle>Edit Session</DialogTitle>
+			<Formik
+				initialValues={session}
+				enableReinitialize={true}
+				validationSchema={SessionSchema}
+				onSubmit={(values, actions) => {
+					setTimeout(() => {
+						handleSaveSession(values);
+						actions.setSubmitting(false);
+					}, 400);
+				}}
+			>
+				{({ touched, errors, isSubmitting }) => (
+					<Form>
+						<DialogContent dividers>
+							<Field
+								as={TextField}
+								label="Name"
+								autoFocus
+								name="name"
+								error={touched.name && Boolean(errors.name)}
+								helperText={touched.name && errors.name}
+								variant="outlined"
+								margin="dense"
+								className={classes.textField}
+							/>
+							<Field
+								as={TextField}
+								label="Status"
+								name="status"
+								disabled
+								variant="outlined"
+								margin="dense"
+							/>
+						</DialogContent>
+						<DialogActions>
+							<Button
+								onClick={handleClose}
+								color="secondary"
+								disabled={isSubmitting}
+								variant="outlined"
+							>
+								Cancel
+							</Button>
+							<Button
+								type="submit"
+								color="primary"
+								disabled={isSubmitting}
+								variant="contained"
+								className={classes.btnWrapper}
+							>
+								Save
+								{isSubmitting && (
+									<CircularProgress
+										size={24}
+										className={classes.buttonProgress}
+									/>
+								)}
+							</Button>
+						</DialogActions>
+					</Form>
+				)}
+			</Formik>
+		</Dialog>
+	);
+};
+
+export default SessionModal;
diff --git a/frontend/src/pages/Connection/index.js b/frontend/src/pages/Connection/index.js
index e3eb62d..c8e573c 100644
--- a/frontend/src/pages/Connection/index.js
+++ b/frontend/src/pages/Connection/index.js
@@ -23,7 +23,8 @@ import Title from "../../components/Title";
 import TableRowSkeleton from "../../components/TableRowSkeleton";
 
 import api from "../../services/api";
-import QrcodeModal from "../../components/QrcodeModal";
+import SessionModal from "../../components/SessionModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
 
 const reducer = (state, action) => {
 	if (action.type === "LOAD_SESSIONS") {
@@ -47,8 +48,6 @@ const reducer = (state, action) => {
 	if (action.type === "DELETE_SESSION") {
 		const sessionId = action.payload;
 
-		console.log("cai aqui", sessionId);
-
 		const sessionIndex = state.findIndex(s => s.id === sessionId);
 		if (sessionIndex !== -1) {
 			state.splice(sessionIndex, 1);
@@ -98,8 +97,11 @@ const WhatsAuth = () => {
 
 	const [sessions, dispatch] = useReducer(reducer, []);
 
-	const [qrModalOpen, setQrModalOpen] = useState(false);
+	const [sessionModalOpen, setSessionModalOpen] = useState(false);
+	// const [sessionModalOpen, setSessionModalOpen] = useState(false);
 	const [selectedSession, setSelectedSession] = useState(null);
+	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+	// const [deletingSession, setDeletingSession] = useState(null);
 
 	useEffect(() => {
 		const fetchSession = async () => {
@@ -150,46 +152,55 @@ const WhatsAuth = () => {
 		}
 	};
 
-	console.log(sessions);
-
-	const handleOpenQrMoral = session => {
-		setQrModalOpen(true);
-		setSelectedSession(session);
+	const handleOpenSessionModal = session => {
+		setSelectedSession(null);
+		setSessionModalOpen(true);
 	};
 
-	const handleCloseQrModal = () => {
-		setQrModalOpen(false);
+	const handleCloseSessionModal = () => {
+		setSessionModalOpen(false);
 		setSelectedSession(null);
 	};
 
+	const handleEditUser = session => {
+		setSelectedSession(session);
+		setSessionModalOpen(true);
+	};
+
+	const handleDeleteSession = async sessionId => {
+		try {
+			await api.delete(`/whatsapp/session/${sessionId}`);
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+	};
+
 	return (
 		<MainContainer>
-			<QrcodeModal
-				open={qrModalOpen}
-				onClose={handleCloseQrModal}
-				aria-labelledby="form-dialog-title"
-				session={selectedSession}
-			/>
-			{/* <Dialog
-				open={qrModalOpen}
-				onClose={handleCloseQrModal}
-				maxWidth="lg"
-				scroll="paper"
+			<ConfirmationModal
+				title={selectedSession && `Delete ${selectedSession.name}?`}
+				open={confirmModalOpen}
+				setOpen={setConfirmModalOpen}
+				onConfirm={e => handleDeleteSession(selectedSession.id)}
 			>
-				<DialogTitle>Qr Code</DialogTitle>
-				<DialogContent>
-					<Paper className={classes.paper}>
-						<Qrcode qrCode={selectedSession && selectedSession.qrcode} />
-					</Paper>
-				</DialogContent>
-			</Dialog> */}
+				Are you sure? It cannot be reverted.
+			</ConfirmationModal>
+			<SessionModal
+				open={sessionModalOpen}
+				onClose={handleCloseSessionModal}
+				aria-labelledby="form-dialog-title"
+				sessionId={selectedSession && selectedSession.id}
+			/>
 			<MainHeader>
 				<Title>Connections</Title>
 				<MainHeaderButtonsWrapper>
 					<Button
 						variant="contained"
 						color="primary"
-						// onClick={handleOpenUserModal}
+						onClick={handleOpenSessionModal}
 					>
 						Add Whatsapp
 					</Button>
@@ -216,7 +227,7 @@ const WhatsAuth = () => {
 							<>
 								{sessions &&
 									sessions.length > 0 &&
-									sessions.map(session => (
+									sessions.map((session, index) => (
 										<TableRow key={session.id}>
 											<TableCell align="center">{session.name}</TableCell>
 											<TableCell align="center">
@@ -225,7 +236,7 @@ const WhatsAuth = () => {
 														size="small"
 														variant="contained"
 														color="primary"
-														onClick={() => handleOpenQrMoral(session)}
+														onClick={() => handleEditUser(session)}
 													>
 														QR CODE
 													</Button>
@@ -247,8 +258,8 @@ const WhatsAuth = () => {
 												<IconButton
 													size="small"
 													onClick={e => {
-														// setConfirmModalOpen(true);
-														// setDeletingUser(user);
+														setConfirmModalOpen(true);
+														setSelectedSession(session);
 													}}
 												>
 													<DeleteOutline />
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
index de554f8..0b5a615 100644
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useReducer } from "react";
-
+import { toast } from "react-toastify";
 import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -87,10 +87,9 @@ const Users = () => {
 	const [loading, setLoading] = useState(false);
 	const [pageNumber, setPageNumber] = useState(1);
 	const [hasMore, setHasMore] = useState(false);
-	const [selectedUserId, setSelectedUserId] = useState(null);
+	const [selectedUser, setSelectedUser] = useState(null);
 	const [userModalOpen, setUserModalOpen] = useState(false);
 	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-	const [deletingUser, setDeletingUser] = useState(null);
 	const [searchParam, setSearchParam] = useState("");
 	const [users, dispatch] = useReducer(reducer, []);
 
@@ -112,7 +111,9 @@ const Users = () => {
 					setLoading(false);
 				} catch (err) {
 					console.log(err);
-					alert(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
 				}
 			};
 			fetchUsers();
@@ -138,12 +139,12 @@ const Users = () => {
 	}, []);
 
 	const handleOpenUserModal = () => {
-		setSelectedUserId(null);
+		setSelectedUser(null);
 		setUserModalOpen(true);
 	};
 
 	const handleCloseUserModal = () => {
-		setSelectedUserId(null);
+		setSelectedUser(null);
 		setUserModalOpen(false);
 	};
 
@@ -151,18 +152,22 @@ const Users = () => {
 		setSearchParam(event.target.value.toLowerCase());
 	};
 
-	const handleEditUser = userId => {
-		setSelectedUserId(userId);
+	const handleEditUser = user => {
+		setSelectedUser(user);
 		setUserModalOpen(true);
 	};
 
 	const handleDeleteUser = async userId => {
 		try {
 			await api.delete(`/users/${userId}`);
+			toast.success("User deleted!");
 		} catch (err) {
-			alert(err);
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
-		setDeletingUser(null);
+		setSelectedUser(null);
 		setSearchParam("");
 		setPageNumber(1);
 	};
@@ -182,10 +187,10 @@ const Users = () => {
 	return (
 		<MainContainer>
 			<ConfirmationModal
-				title={deletingUser && `Delete ${deletingUser.name}?`}
+				title={selectedUser && `Delete ${selectedUser.name}?`}
 				open={confirmModalOpen}
 				setOpen={setConfirmModalOpen}
-				onConfirm={e => handleDeleteUser(deletingUser.id)}
+				onConfirm={e => handleDeleteUser(selectedUser.id)}
 			>
 				Are you sure? It canoot be reverted.
 			</ConfirmationModal>
@@ -193,7 +198,7 @@ const Users = () => {
 				open={userModalOpen}
 				onClose={handleCloseUserModal}
 				aria-labelledby="form-dialog-title"
-				userId={selectedUserId}
+				userId={selectedUser && selectedUser.id}
 			/>
 			<MainHeader>
 				<Title>Usuários</Title>
@@ -247,7 +252,7 @@ const Users = () => {
 										<TableCell align="right">
 											<IconButton
 												size="small"
-												onClick={() => handleEditUser(user.id)}
+												onClick={() => handleEditUser(user)}
 											>
 												<EditIcon />
 											</IconButton>
@@ -256,7 +261,7 @@ const Users = () => {
 												size="small"
 												onClick={e => {
 													setConfirmModalOpen(true);
-													setDeletingUser(user);
+													setSelectedUser(user);
 												}}
 											>
 												<DeleteOutlineIcon />

From b0f28c16ad4c08eddba52d6dd1cedc87d82662b8 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 12:09:12 -0300
Subject: [PATCH 14/25] feat: finished multiple whatsapps handle in frontend

---
 backend/src/app.js                            |  17 +-
 backend/src/controllers/WhatsAppController.js |  86 +++++
 .../controllers/WhatsAppSessionController.js  | 105 ++----
 ...2228-add-name-default-field-to-whatsapp.js |  15 +
 backend/src/libs/wbot.js                      |  32 +-
 backend/src/models/Whatsapp.js                |   5 +
 backend/src/router/routes/whatsapp.js         |  24 +-
 backend/src/router/routes/whatsappsessions.js |  20 ++
 backend/src/services/wbotMessageListener.js   |   4 +-
 backend/src/services/wbotMonitor.js           |  24 +-
 frontend/src/components/QrcodeModal/index.js  |  92 ++++--
 .../{SessionModal => WhatsAppModal}/index.js  |  76 +++--
 .../src/components/_layout/MainListItems.js   |   4 +-
 frontend/src/pages/Connection/index.js        | 299 ------------------
 frontend/src/pages/Users/index.js             |   9 +-
 frontend/src/pages/WhatsApps/index.js         | 290 +++++++++++++++++
 frontend/src/routes/index.js                  |   4 +-
 17 files changed, 595 insertions(+), 511 deletions(-)
 create mode 100644 backend/src/controllers/WhatsAppController.js
 create mode 100644 backend/src/database/migrations/20200906122228-add-name-default-field-to-whatsapp.js
 create mode 100644 backend/src/router/routes/whatsappsessions.js
 rename frontend/src/components/{SessionModal => WhatsAppModal}/index.js (64%)
 delete mode 100644 frontend/src/pages/Connection/index.js
 create mode 100644 frontend/src/pages/WhatsApps/index.js

diff --git a/backend/src/app.js b/backend/src/app.js
index 73e8dcd..e1b5df1 100644
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -60,11 +60,11 @@ const startWhatsAppSessions = async () => {
 	const whatsapps = await Whatsapp.findAll();
 
 	if (whatsapps.length > 0) {
-		whatsapps.forEach(dbSession => {
-			initWbot(dbSession)
+		whatsapps.forEach(whatsapp => {
+			initWbot(whatsapp)
 				.then(() => {
-					wbotMessageListener(dbSession);
-					wbotMonitor(dbSession);
+					wbotMessageListener(whatsapp);
+					wbotMonitor(whatsapp);
 				})
 				.catch(err => console.log(err));
 		});
@@ -72,14 +72,6 @@ const startWhatsAppSessions = async () => {
 };
 startWhatsAppSessions();
 
-// wBot
-// 	.init()
-// 	.then(({ dbSession }) => {
-// 		wbotMessageListener();
-// 		wbotMonitor(dbSession);
-// 	})
-// 	.catch(err => console.log(err));
-
 app.use(Sentry.Handlers.errorHandler());
 
 app.use(async (err, req, res, next) => {
@@ -88,5 +80,6 @@ app.use(async (err, req, res, next) => {
 		console.log(err);
 		return res.status(500).json(errors);
 	}
+
 	return res.status(500).json({ error: "Internal server error" });
 });
diff --git a/backend/src/controllers/WhatsAppController.js b/backend/src/controllers/WhatsAppController.js
new file mode 100644
index 0000000..75d1d68
--- /dev/null
+++ b/backend/src/controllers/WhatsAppController.js
@@ -0,0 +1,86 @@
+const Whatsapp = require("../models/Whatsapp");
+const { getIO } = require("../libs/socket");
+const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
+const wbotMessageListener = require("../services/wbotMessageListener");
+const wbotMonitor = require("../services/wbotMonitor");
+
+exports.index = async (req, res) => {
+	const whatsapp = await Whatsapp.findAll();
+
+	return res.status(200).json(whatsapp);
+};
+
+exports.store = async (req, res) => {
+	const io = getIO();
+	const whatsapp = await Whatsapp.create(req.body);
+
+	if (!whatsapp) {
+		return res.status(400).json({ error: "Cannot create whatsapp session." });
+	}
+
+	initWbot(whatsapp)
+		.then(() => {
+			wbotMessageListener(whatsapp);
+			wbotMonitor(whatsapp);
+		})
+		.catch(err => console.log(err));
+
+	io.emit("whatsapp", {
+		action: "update",
+		whatsapp: whatsapp,
+	});
+
+	return res.status(200).json(whatsapp);
+};
+
+exports.show = async (req, res) => {
+	const { whatsappId } = req.params;
+	const whatsapp = await Whatsapp.findByPk(whatsappId);
+
+	if (!whatsapp) {
+		return res.status(200).json({ message: "Session not found" });
+	}
+
+	return res.status(200).json(whatsapp);
+};
+
+exports.update = async (req, res) => {
+	const io = getIO();
+	const { whatsappId } = req.params;
+
+	const whatsapp = await Whatsapp.findByPk(whatsappId);
+
+	if (!whatsapp) {
+		return res.status(404).json({ message: "Whatsapp not found" });
+	}
+
+	await whatsapp.update(req.body);
+
+	io.emit("whatsapp", {
+		action: "update",
+		whatsapp: whatsapp,
+	});
+
+	return res.status(200).json({ message: "Whatsapp updated" });
+};
+
+exports.delete = async (req, res) => {
+	const io = getIO();
+	const { whatsappId } = req.params;
+
+	const whatsapp = await Whatsapp.findByPk(whatsappId);
+
+	if (!whatsapp) {
+		return res.status(404).json({ message: "Whatsapp not found" });
+	}
+
+	await whatsapp.destroy();
+	removeWbot(whatsapp.id);
+
+	io.emit("whatsapp", {
+		action: "delete",
+		whatsappId: whatsapp.id,
+	});
+
+	return res.status(200).json({ message: "Whatsapp deleted." });
+};
diff --git a/backend/src/controllers/WhatsAppSessionController.js b/backend/src/controllers/WhatsAppSessionController.js
index 2eca860..0bee528 100644
--- a/backend/src/controllers/WhatsAppSessionController.js
+++ b/backend/src/controllers/WhatsAppSessionController.js
@@ -1,91 +1,32 @@
-const Whatsapp = require("../models/Whatsapp");
-const { getIO } = require("../libs/socket");
-const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
-const wbotMessageListener = require("../services/wbotMessageListener");
-const wbotMonitor = require("../services/wbotMonitor");
+// const Whatsapp = require("../models/Whatsapp");
+// const { getIO } = require("../libs/socket");
+// const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
+// const wbotMessageListener = require("../services/wbotMessageListener");
+// const wbotMonitor = require("../services/wbotMonitor");
 
-exports.index = async (req, res) => {
-	const dbSession = await Whatsapp.findAll();
+// exports.show = async (req, res) => {
+// 	const { whatsappId } = req.params;
+// 	const dbSession = await Whatsapp.findByPk(whatsappId);
 
-	return res.status(200).json(dbSession);
-};
+// 	if (!dbSession) {
+// 		return res.status(200).json({ message: "Session not found" });
+// 	}
 
-exports.store = async (req, res) => {
-	const io = getIO();
-	const dbSession = await Whatsapp.create(req.body);
+// 	return res.status(200).json(dbSession);
+// };
 
-	if (!dbSession) {
-		return res.status(400).json({ error: "Cannot create whatsapp session." });
-	}
+// exports.delete = async (req, res) => {
+// 	const { whatsappId } = req.params;
 
-	initWbot(dbSession)
-		.then(() => {
-			wbotMessageListener(dbSession);
-			wbotMonitor(dbSession);
-		})
-		.catch(err => console.log(err));
+// 	const dbSession = await Whatsapp.findByPk(whatsappId);
 
-	io.emit("session", {
-		action: "update",
-		session: dbSession,
-	});
+// 	if (!dbSession) {
+// 		return res.status(404).json({ message: "Session not found" });
+// 	}
 
-	return res.status(200).json(dbSession);
-};
+// 	const wbot = getWbot(dbSession.id);
 
-exports.show = async (req, res) => {
-	const { sessionId } = req.params;
-	const dbSession = await Whatsapp.findByPk(sessionId);
+// 	wbot.logout();
 
-	if (!dbSession) {
-		return res.status(200).json({ message: "Session not found" });
-	}
-
-	return res.status(200).json(dbSession);
-};
-
-exports.update = async (req, res) => {
-	const io = getIO();
-	const { sessionId } = req.params;
-
-	const dbSession = await Whatsapp.findByPk(sessionId);
-
-	if (!dbSession) {
-		return res.status(404).json({ message: "Session not found" });
-	}
-
-	const wbot = getWbot(dbSession.id);
-	wbot.logout();
-
-	await dbSession.update(req.body);
-
-	io.emit("session", {
-		action: "update",
-		session: dbSession,
-	});
-
-	return res.status(200).json({ message: "Session updated" });
-};
-
-exports.delete = async (req, res) => {
-	const io = getIO();
-	const { sessionId } = req.params;
-
-	const dbSession = await Whatsapp.findByPk(sessionId);
-
-	if (!dbSession) {
-		return res.status(404).json({ message: "Session not found" });
-	}
-
-	const wbot = getWbot(dbSession.id);
-	await dbSession.destroy();
-
-	removeWbot(dbSession.id);
-
-	io.emit("session", {
-		action: "delete",
-		sessionId: dbSession.id,
-	});
-
-	return res.status(200).json({ message: "Session deleted." });
-};
+// 	return res.status(200).json({ message: "Session disconnected." });
+// };
diff --git a/backend/src/database/migrations/20200906122228-add-name-default-field-to-whatsapp.js b/backend/src/database/migrations/20200906122228-add-name-default-field-to-whatsapp.js
new file mode 100644
index 0000000..57e03fc
--- /dev/null
+++ b/backend/src/database/migrations/20200906122228-add-name-default-field-to-whatsapp.js
@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.addColumn("Whatsapps", "default", {
+			type: Sequelize.BOOLEAN,
+			allowNull: false,
+			defaultValue: false,
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.removeColumn("Whatsapps", "default");
+	},
+};
diff --git a/backend/src/libs/wbot.js b/backend/src/libs/wbot.js
index 39c76ba..4118221 100644
--- a/backend/src/libs/wbot.js
+++ b/backend/src/libs/wbot.js
@@ -6,17 +6,17 @@ const { getIO } = require("../libs/socket");
 let sessions = [];
 
 module.exports = {
-	initWbot: async dbSession => {
+	initWbot: async whatsapp => {
 		try {
 			const io = getIO();
-			const sessionName = dbSession.name;
+			const sessionName = whatsapp.name;
 			let sessionCfg;
 
-			if (dbSession && dbSession.session) {
-				sessionCfg = JSON.parse(dbSession.session);
+			if (whatsapp && whatsapp.session) {
+				sessionCfg = JSON.parse(whatsapp.session);
 			}
 
-			const sessionIndex = sessions.findIndex(s => s.id === dbSession.id);
+			const sessionIndex = sessions.findIndex(s => s.id === whatsapp.id);
 			if (sessionIndex !== -1) {
 				sessions[sessionIndex].destroy();
 				sessions.splice(sessionIndex, 1);
@@ -33,51 +33,51 @@ module.exports = {
 
 				qrCode.generate(qr, { small: true });
 
-				await dbSession.update({ id: 1, qrcode: qr, status: "qrcode" });
+				await whatsapp.update({ qrcode: qr, status: "qrcode" });
 
-				io.emit("session", {
+				io.emit("whatsappSession", {
 					action: "update",
-					session: dbSession,
+					session: whatsapp,
 				});
 			});
 
 			wbot.on("authenticated", async session => {
 				console.log("Session:", sessionName, "AUTHENTICATED");
 
-				await dbSession.update({
+				await whatsapp.update({
 					session: JSON.stringify(session),
 					status: "authenticated",
 				});
 
-				io.emit("session", {
+				io.emit("whatsappSession", {
 					action: "update",
-					session: dbSession,
+					session: whatsapp,
 				});
 			});
 
 			wbot.on("auth_failure", async msg => {
 				console.error("Session:", sessionName, "AUTHENTICATION FAILURE", msg);
 
-				await dbSession.update({ session: "" });
+				await whatsapp.update({ session: "" });
 			});
 
 			wbot.on("ready", async () => {
 				console.log("Session:", sessionName, "READY");
 
-				await dbSession.update({
+				await whatsapp.update({
 					status: "CONNECTED",
 					qrcode: "",
 				});
 
-				io.emit("session", {
+				io.emit("whatsappSession", {
 					action: "update",
-					session: dbSession,
+					session: whatsapp,
 				});
 
 				wbot.sendPresenceAvailable();
 			});
 
-			wbot.id = dbSession.id;
+			wbot.id = whatsapp.id;
 			sessions.push(wbot);
 		} catch (err) {
 			console.log(err);
diff --git a/backend/src/models/Whatsapp.js b/backend/src/models/Whatsapp.js
index 05b57a3..754de3b 100644
--- a/backend/src/models/Whatsapp.js
+++ b/backend/src/models/Whatsapp.js
@@ -10,6 +10,11 @@ class Whatsapp extends Sequelize.Model {
 				status: { type: Sequelize.STRING },
 				battery: { type: Sequelize.STRING },
 				plugged: { type: Sequelize.BOOLEAN },
+				default: {
+					type: Sequelize.BOOLEAN,
+					defaultValue: false,
+					allowNull: false,
+				},
 			},
 			{
 				sequelize,
diff --git a/backend/src/router/routes/whatsapp.js b/backend/src/router/routes/whatsapp.js
index 5c6125f..66d0318 100644
--- a/backend/src/router/routes/whatsapp.js
+++ b/backend/src/router/routes/whatsapp.js
@@ -1,30 +1,18 @@
 const express = require("express");
 const isAuth = require("../../middleware/is-auth");
 
-const WhatsAppSessionController = require("../../controllers/WhatsAppSessionController");
+const WhatsAppController = require("../../controllers/WhatsAppController");
 
 const routes = express.Router();
 
-routes.get("/whatsapp/session/", isAuth, WhatsAppSessionController.index);
+routes.get("/whatsapp/", isAuth, WhatsAppController.index);
 
-routes.post("/whatsapp/session", isAuth, WhatsAppSessionController.store);
+routes.post("/whatsapp/", isAuth, WhatsAppController.store);
 
-routes.get(
-	"/whatsapp/session/:sessionId",
-	isAuth,
-	WhatsAppSessionController.show
-);
+routes.get("/whatsapp/:whatsappId", isAuth, WhatsAppController.show);
 
-routes.put(
-	"/whatsapp/session/:sessionId",
-	isAuth,
-	WhatsAppSessionController.update
-);
+routes.put("/whatsapp/:whatsappId", isAuth, WhatsAppController.update);
 
-routes.delete(
-	"/whatsapp/session/:sessionId",
-	isAuth,
-	WhatsAppSessionController.delete
-);
+routes.delete("/whatsapp/:whatsappId", isAuth, WhatsAppController.delete);
 
 module.exports = routes;
diff --git a/backend/src/router/routes/whatsappsessions.js b/backend/src/router/routes/whatsappsessions.js
new file mode 100644
index 0000000..2eb87f9
--- /dev/null
+++ b/backend/src/router/routes/whatsappsessions.js
@@ -0,0 +1,20 @@
+const express = require("express");
+const isAuth = require("../../middleware/is-auth");
+
+const WhatsAppSessionController = require("../../controllers/WhatsAppSessionController");
+
+const routes = express.Router();
+
+routes.get(
+	"/whatsappsession/:whatsappId",
+	isAuth,
+	WhatsAppSessionController.show
+);
+
+routes.delete(
+	"/whatsappsession/:whatsappId",
+	isAuth,
+	WhatsAppSessionController.delete
+);
+
+module.exports = routes;
diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js
index 9056caa..38e16d0 100644
--- a/backend/src/services/wbotMessageListener.js
+++ b/backend/src/services/wbotMessageListener.js
@@ -132,8 +132,8 @@ const handleMessage = async (msg, ticket, contact) => {
 	});
 };
 
-const wbotMessageListener = dbSession => {
-	const wbot = getWbot(dbSession.id);
+const wbotMessageListener = whatsapp => {
+	const wbot = getWbot(whatsapp.id);
 	const io = getIO();
 
 	wbot.on("message_create", async msg => {
diff --git a/backend/src/services/wbotMonitor.js b/backend/src/services/wbotMonitor.js
index 3bd286d..696b44d 100644
--- a/backend/src/services/wbotMonitor.js
+++ b/backend/src/services/wbotMonitor.js
@@ -5,16 +5,16 @@ const wbotMessageListener = require("./wbotMessageListener");
 const { getIO } = require("../libs/socket");
 const { getWbot, initWbot } = require("../libs/wbot");
 
-const wbotMonitor = dbSession => {
+const wbotMonitor = whatsapp => {
 	const io = getIO();
-	const sessionName = dbSession.name;
-	const wbot = getWbot(dbSession.id);
+	const sessionName = whatsapp.name;
+	const wbot = getWbot(whatsapp.id);
 
 	try {
 		wbot.on("change_state", async newState => {
 			console.log("Monitor session:", sessionName, newState);
 			try {
-				await dbSession.update({ status: newState });
+				await whatsapp.update({ status: newState });
 			} catch (err) {
 				Sentry.captureException(err);
 				console.log(err);
@@ -22,7 +22,7 @@ const wbotMonitor = dbSession => {
 
 			io.emit("session", {
 				action: "update",
-				session: dbSession,
+				session: whatsapp,
 			});
 		});
 
@@ -33,7 +33,7 @@ const wbotMonitor = dbSession => {
 			);
 
 			try {
-				await dbSession.update({ battery, plugged });
+				await whatsapp.update({ battery, plugged });
 			} catch (err) {
 				Sentry.captureException(err);
 				console.log(err);
@@ -41,14 +41,14 @@ const wbotMonitor = dbSession => {
 
 			io.emit("session", {
 				action: "update",
-				session: dbSession,
+				session: whatsapp,
 			});
 		});
 
 		wbot.on("disconnected", async reason => {
 			console.log("Disconnected session:", sessionName, reason);
 			try {
-				await dbSession.update({ status: "disconnected" });
+				await whatsapp.update({ status: "disconnected" });
 			} catch (err) {
 				Sentry.captureException(err);
 				console.log(err);
@@ -56,15 +56,15 @@ const wbotMonitor = dbSession => {
 
 			io.emit("session", {
 				action: "update",
-				session: dbSession,
+				session: whatsapp,
 			});
 
 			setTimeout(
 				() =>
-					initWbot(dbSession)
+					initWbot(whatsapp)
 						.then(() => {
-							wbotMessageListener(dbSession);
-							wbotMonitor(dbSession);
+							wbotMessageListener(whatsapp);
+							wbotMonitor(whatsapp);
 						})
 						.catch(err => {
 							Sentry.captureException(err);
diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js
index 09a4d39..9616c66 100644
--- a/frontend/src/components/QrcodeModal/index.js
+++ b/frontend/src/components/QrcodeModal/index.js
@@ -1,37 +1,67 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import QRCode from "qrcode.react";
+import openSocket from "socket.io-client";
+import { toast } from "react-toastify";
 
-import {
-	Dialog,
-	DialogContent,
-	Paper,
-	Typography,
-	DialogTitle,
-} from "@material-ui/core";
+import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core";
 import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
 
-const QrcodeModal = ({ open, onClose, session }) => {
-	if (session) {
-		return (
-			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
-				<DialogTitle>{session.name}</DialogTitle>
-				<DialogContent>
-					<Paper elevation={0}>
-						<Typography color="primary" gutterBottom>
-							{i18n.t("qrCode.message")}
-						</Typography>
-						{session.qrcode ? (
-							<QRCode value={session.qrcode} size={256} />
-						) : (
-							<span>Waiting for QR Code</span>
-						)}
-					</Paper>
-				</DialogContent>
-			</Dialog>
-		);
-	} else {
-		return null;
-	}
+const QrcodeModal = ({ open, onClose, whatsAppId }) => {
+	const [qrCode, setQrCode] = useState("");
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const { data } = await api.get(`/whatsapp/${whatsAppId}`);
+				setQrCode(data.qrcode);
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
+		};
+		fetchSession();
+	}, [whatsAppId]);
+
+	useEffect(() => {
+		if (!whatsAppId) return;
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		console.log("connectiing");
+
+		socket.on("whatsappSession", data => {
+			if (data.action === "update" && data.session.id === whatsAppId) {
+				setQrCode(data.session.qrcode);
+			}
+
+			if (data.action === "update" && data.session.qrcode === "") {
+				onClose();
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+			console.log("disconnectiing");
+		};
+	}, [whatsAppId, onClose]);
+
+	return (
+		<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
+			<DialogContent>
+				<Paper elevation={0}>
+					<Typography color="primary" gutterBottom>
+						{i18n.t("qrCode.message")}
+					</Typography>
+					{qrCode ? (
+						<QRCode value={qrCode} size={256} />
+					) : (
+						<span>Waiting for QR Code</span>
+					)}
+				</Paper>
+			</DialogContent>
+		</Dialog>
+	);
 };
 
-export default QrcodeModal;
+export default React.memo(QrcodeModal);
diff --git a/frontend/src/components/SessionModal/index.js b/frontend/src/components/WhatsAppModal/index.js
similarity index 64%
rename from frontend/src/components/SessionModal/index.js
rename to frontend/src/components/WhatsAppModal/index.js
index fc7c0a8..538f867 100644
--- a/frontend/src/components/SessionModal/index.js
+++ b/frontend/src/components/WhatsAppModal/index.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import QRCode from "qrcode.react";
 import * as Yup from "yup";
 import { Formik, Form, Field } from "formik";
 import { toast } from "react-toastify";
@@ -10,21 +9,29 @@ import { green } from "@material-ui/core/colors";
 import {
 	Dialog,
 	DialogContent,
-	Paper,
-	Typography,
 	DialogTitle,
 	Button,
 	DialogActions,
 	CircularProgress,
 	TextField,
+	Switch,
+	FormControlLabel,
 } from "@material-ui/core";
 
-import { i18n } from "../../translate/i18n";
+// import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 
 const useStyles = makeStyles(theme => ({
+	form: {
+		display: "flex",
+		alignItems: "center",
+		justifySelf: "center",
+		"& > *": {
+			margin: theme.spacing(1),
+		},
+	},
+
 	textField: {
-		marginRight: theme.spacing(1),
 		flex: 1,
 	},
 
@@ -49,21 +56,21 @@ const SessionSchema = Yup.object().shape({
 		.required("Required"),
 });
 
-const SessionModal = ({ open, onClose, sessionId }) => {
+const WhatsAppModal = ({ open, onClose, whatsAppId }) => {
 	const classes = useStyles();
 	const initialState = {
 		name: "",
-		status: "",
+		default: false,
 	};
-	const [session, setSession] = useState(initialState);
+	const [whatsApp, setWhatsApp] = useState(initialState);
 
 	useEffect(() => {
 		const fetchSession = async () => {
-			if (!sessionId) return;
+			if (!whatsAppId) return;
 
 			try {
-				const { data } = await api.get(`whatsapp/session/${sessionId}`);
-				setSession(data);
+				const { data } = await api.get(`whatsapp/${whatsAppId}`);
+				setWhatsApp(data);
 			} catch (err) {
 				console.log(err);
 				if (err.response && err.response.data && err.response.data.error) {
@@ -72,16 +79,19 @@ const SessionModal = ({ open, onClose, sessionId }) => {
 			}
 		};
 		fetchSession();
-	}, [sessionId]);
+	}, [whatsAppId]);
 
-	const handleSaveSession = async values => {
+	const handleSaveWhatsApp = async values => {
 		try {
-			if (sessionId) {
-				await api.put(`/whatsapp/session/${sessionId}`, values);
+			if (whatsAppId) {
+				await api.put(`/whatsapp/${whatsAppId}`, {
+					name: values.name,
+					default: values.default,
+				});
 			} else {
-				await api.post("/whatsapp/session", values);
+				await api.post("/whatsapp", values);
 			}
-			toast.success("Session created!");
+			toast.success("Success!");
 		} catch (err) {
 			console.log(err);
 			if (err.response && err.response.data && err.response.data.error) {
@@ -93,26 +103,27 @@ const SessionModal = ({ open, onClose, sessionId }) => {
 
 	const handleClose = () => {
 		onClose();
-		setSession(initialState);
+		setWhatsApp(initialState);
 	};
 
 	return (
 		<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
-			<DialogTitle>Edit Session</DialogTitle>
+			<DialogTitle>WhatsApp</DialogTitle>
 			<Formik
-				initialValues={session}
+				initialValues={whatsApp}
 				enableReinitialize={true}
 				validationSchema={SessionSchema}
 				onSubmit={(values, actions) => {
 					setTimeout(() => {
-						handleSaveSession(values);
+						handleSaveWhatsApp(values);
+						// alert(JSON.stringify(values, null, 2));
 						actions.setSubmitting(false);
 					}, 400);
 				}}
 			>
-				{({ touched, errors, isSubmitting }) => (
+				{({ values, touched, errors, isSubmitting }) => (
 					<Form>
-						<DialogContent dividers>
+						<DialogContent dividers className={classes.form}>
 							<Field
 								as={TextField}
 								label="Name"
@@ -124,13 +135,16 @@ const SessionModal = ({ open, onClose, sessionId }) => {
 								margin="dense"
 								className={classes.textField}
 							/>
-							<Field
-								as={TextField}
-								label="Status"
-								name="status"
-								disabled
-								variant="outlined"
-								margin="dense"
+							<FormControlLabel
+								control={
+									<Field
+										as={Switch}
+										color="primary"
+										name="default"
+										checked={values.default}
+									/>
+								}
+								label="Default"
 							/>
 						</DialogContent>
 						<DialogActions>
@@ -165,4 +179,4 @@ const SessionModal = ({ open, onClose, sessionId }) => {
 	);
 };
 
-export default SessionModal;
+export default React.memo(WhatsAppModal);
diff --git a/frontend/src/components/_layout/MainListItems.js b/frontend/src/components/_layout/MainListItems.js
index ebfa195..df2a93a 100644
--- a/frontend/src/components/_layout/MainListItems.js
+++ b/frontend/src/components/_layout/MainListItems.js
@@ -42,8 +42,8 @@ const MainListItems = () => {
 		<div>
 			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
 			<ListItemLink
-				to="/connection"
-				primary={i18n.t("mainDrawer.listItems.connection")}
+				to="/whatsapps"
+				primary="WhatsApps"
 				icon={<SyncAltIcon />}
 			/>
 			<ListItemLink
diff --git a/frontend/src/pages/Connection/index.js b/frontend/src/pages/Connection/index.js
deleted file mode 100644
index c8e573c..0000000
--- a/frontend/src/pages/Connection/index.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import React, { useState, useEffect, useReducer } from "react";
-import openSocket from "socket.io-client";
-import { toast } from "react-toastify";
-import { format, parseISO } from "date-fns";
-
-import { makeStyles } from "@material-ui/core/styles";
-import {
-	Button,
-	TableBody,
-	TableRow,
-	TableCell,
-	IconButton,
-	Table,
-	TableHead,
-	Paper,
-} from "@material-ui/core";
-import { WifiOff, DeleteOutline } from "@material-ui/icons";
-
-import MainContainer from "../../components/MainContainer";
-import MainHeader from "../../components/MainHeader";
-import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
-import Title from "../../components/Title";
-import TableRowSkeleton from "../../components/TableRowSkeleton";
-
-import api from "../../services/api";
-import SessionModal from "../../components/SessionModal";
-import ConfirmationModal from "../../components/ConfirmationModal";
-
-const reducer = (state, action) => {
-	if (action.type === "LOAD_SESSIONS") {
-		const sessions = action.payload;
-
-		return [...sessions];
-	}
-
-	if (action.type === "UPDATE_SESSIONS") {
-		const session = action.payload;
-		const sessionIndex = state.findIndex(s => s.id === session.id);
-
-		if (sessionIndex !== -1) {
-			state[sessionIndex] = session;
-			return [...state];
-		} else {
-			return [session, ...state];
-		}
-	}
-
-	if (action.type === "DELETE_SESSION") {
-		const sessionId = action.payload;
-
-		const sessionIndex = state.findIndex(s => s.id === sessionId);
-		if (sessionIndex !== -1) {
-			state.splice(sessionIndex, 1);
-		}
-		return [...state];
-	}
-
-	if (action.type === "RESET") {
-		return [];
-	}
-};
-
-const useStyles = makeStyles(theme => ({
-	// root: {
-	// 	display: "flex",
-	// 	alignItems: "center",
-	// 	justifyContent: "center",
-	// 	padding: theme.spacing(4),
-	// },
-
-	mainPaper: {
-		flex: 1,
-		padding: theme.spacing(1),
-		overflowY: "scroll",
-		...theme.scrollbarStyles,
-	},
-
-	// paper: {
-	// 	padding: theme.spacing(2),
-	// 	margin: theme.spacing(1),
-	// 	display: "flex",
-	// 	width: 400,
-	// 	height: 270,
-	// 	overflow: "auto",
-	// 	flexDirection: "column",
-	// 	alignItems: "center",
-	// 	justifyContent: "center",
-	// },
-
-	// fixedHeight: {
-	// 	height: 640,
-	// },
-}));
-
-const WhatsAuth = () => {
-	const classes = useStyles();
-
-	const [sessions, dispatch] = useReducer(reducer, []);
-
-	const [sessionModalOpen, setSessionModalOpen] = useState(false);
-	// const [sessionModalOpen, setSessionModalOpen] = useState(false);
-	const [selectedSession, setSelectedSession] = useState(null);
-	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-	// const [deletingSession, setDeletingSession] = useState(null);
-
-	useEffect(() => {
-		const fetchSession = async () => {
-			try {
-				const { data } = await api.get("/whatsapp/session/");
-				dispatch({ type: "LOAD_SESSIONS", payload: data });
-			} catch (err) {
-				console.log(err);
-				if (err.response && err.response.data && err.response.data.error) {
-					toast.error(err.response.data.error);
-				}
-			}
-		};
-		fetchSession();
-	}, []);
-
-	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-
-		socket.on("session", data => {
-			if (data.action === "update") {
-				dispatch({ type: "UPDATE_SESSIONS", payload: data.session });
-			}
-		});
-
-		socket.on("session", data => {
-			if (data.action === "delete") {
-				dispatch({ type: "DELETE_SESSION", payload: data.sessionId });
-			}
-		});
-
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
-
-	const handleDisconnectSession = async sessionId => {
-		try {
-			await api.put(`/whatsapp/session/${sessionId}`, {
-				session: "",
-				status: "pending",
-			});
-		} catch (err) {
-			console.log(err);
-			if (err.response && err.response.data && err.response.data.error) {
-				toast.error(err.response.data.error);
-			}
-		}
-	};
-
-	const handleOpenSessionModal = session => {
-		setSelectedSession(null);
-		setSessionModalOpen(true);
-	};
-
-	const handleCloseSessionModal = () => {
-		setSessionModalOpen(false);
-		setSelectedSession(null);
-	};
-
-	const handleEditUser = session => {
-		setSelectedSession(session);
-		setSessionModalOpen(true);
-	};
-
-	const handleDeleteSession = async sessionId => {
-		try {
-			await api.delete(`/whatsapp/session/${sessionId}`);
-		} catch (err) {
-			console.log(err);
-			if (err.response && err.response.data && err.response.data.error) {
-				toast.error(err.response.data.error);
-			}
-		}
-	};
-
-	return (
-		<MainContainer>
-			<ConfirmationModal
-				title={selectedSession && `Delete ${selectedSession.name}?`}
-				open={confirmModalOpen}
-				setOpen={setConfirmModalOpen}
-				onConfirm={e => handleDeleteSession(selectedSession.id)}
-			>
-				Are you sure? It cannot be reverted.
-			</ConfirmationModal>
-			<SessionModal
-				open={sessionModalOpen}
-				onClose={handleCloseSessionModal}
-				aria-labelledby="form-dialog-title"
-				sessionId={selectedSession && selectedSession.id}
-			/>
-			<MainHeader>
-				<Title>Connections</Title>
-				<MainHeaderButtonsWrapper>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={handleOpenSessionModal}
-					>
-						Add Whatsapp
-					</Button>
-				</MainHeaderButtonsWrapper>
-			</MainHeader>
-			<Paper
-				className={classes.mainPaper}
-				variant="outlined"
-				// onScroll={handleScroll}
-			>
-				<Table size="small">
-					<TableHead>
-						<TableRow>
-							<TableCell align="center">Name</TableCell>
-							<TableCell align="center">Status</TableCell>
-							<TableCell align="center">Last update</TableCell>
-							<TableCell align="center">Actions</TableCell>
-						</TableRow>
-					</TableHead>
-					<TableBody>
-						{false ? (
-							<TableRowSkeleton />
-						) : (
-							<>
-								{sessions &&
-									sessions.length > 0 &&
-									sessions.map((session, index) => (
-										<TableRow key={session.id}>
-											<TableCell align="center">{session.name}</TableCell>
-											<TableCell align="center">
-												{session.status === "qrcode" ? (
-													<Button
-														size="small"
-														variant="contained"
-														color="primary"
-														onClick={() => handleEditUser(session)}
-													>
-														QR CODE
-													</Button>
-												) : (
-													session.status
-												)}
-											</TableCell>
-											<TableCell align="center">
-												{format(parseISO(session.updatedAt), "dd/MM/yy HH:mm")}
-											</TableCell>
-											<TableCell align="center">
-												<IconButton
-													size="small"
-													onClick={() => handleDisconnectSession(session.id)}
-												>
-													<WifiOff />
-												</IconButton>
-
-												<IconButton
-													size="small"
-													onClick={e => {
-														setConfirmModalOpen(true);
-														setSelectedSession(session);
-													}}
-												>
-													<DeleteOutline />
-												</IconButton>
-											</TableCell>
-										</TableRow>
-									))}
-							</>
-						)}
-					</TableBody>
-				</Table>
-			</Paper>
-
-			{/* <div className={classes.root}>
-				{sessions &&
-					sessions.length > 0 &&
-					sessions.map(session => {
-						if (session.status === "disconnected")
-							return (
-								<Paper className={classes.paper}>
-									<Qrcode qrCode={qrCode} />
-								</Paper>
-							);
-						else {
-							return (
-								<Paper className={classes.paper}>
-									<SessionInfo session={session} />
-								</Paper>
-							);
-						}
-					})}
-			</div> */}
-		</MainContainer>
-	);
-};
-
-export default WhatsAuth;
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
index 0b5a615..1165b34 100644
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -88,6 +88,7 @@ const Users = () => {
 	const [pageNumber, setPageNumber] = useState(1);
 	const [hasMore, setHasMore] = useState(false);
 	const [selectedUser, setSelectedUser] = useState(null);
+	const [deletingUser, setDeletingUser] = useState(null);
 	const [userModalOpen, setUserModalOpen] = useState(false);
 	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
 	const [searchParam, setSearchParam] = useState("");
@@ -167,7 +168,7 @@ const Users = () => {
 				toast.error(err.response.data.error);
 			}
 		}
-		setSelectedUser(null);
+		setDeletingUser(null);
 		setSearchParam("");
 		setPageNumber(1);
 	};
@@ -187,10 +188,10 @@ const Users = () => {
 	return (
 		<MainContainer>
 			<ConfirmationModal
-				title={selectedUser && `Delete ${selectedUser.name}?`}
+				title={deletingUser && `Delete ${deletingUser.name}?`}
 				open={confirmModalOpen}
 				setOpen={setConfirmModalOpen}
-				onConfirm={e => handleDeleteUser(selectedUser.id)}
+				onConfirm={e => handleDeleteUser(deletingUser.id)}
 			>
 				Are you sure? It canoot be reverted.
 			</ConfirmationModal>
@@ -261,7 +262,7 @@ const Users = () => {
 												size="small"
 												onClick={e => {
 													setConfirmModalOpen(true);
-													setSelectedUser(user);
+													setDeletingUser(user);
 												}}
 											>
 												<DeleteOutlineIcon />
diff --git a/frontend/src/pages/WhatsApps/index.js b/frontend/src/pages/WhatsApps/index.js
new file mode 100644
index 0000000..36fdc67
--- /dev/null
+++ b/frontend/src/pages/WhatsApps/index.js
@@ -0,0 +1,290 @@
+import React, { useState, useEffect, useReducer, useCallback } from "react";
+import openSocket from "socket.io-client";
+import { toast } from "react-toastify";
+import { format, parseISO } from "date-fns";
+
+import { makeStyles } from "@material-ui/core/styles";
+import {
+	Button,
+	TableBody,
+	TableRow,
+	TableCell,
+	IconButton,
+	Table,
+	TableHead,
+	Paper,
+} from "@material-ui/core";
+import { Edit, DeleteOutline } from "@material-ui/icons";
+
+import MainContainer from "../../components/MainContainer";
+import MainHeader from "../../components/MainHeader";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import Title from "../../components/Title";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
+
+import api from "../../services/api";
+import WhatsAppModal from "../../components/WhatsAppModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
+import QrcodeModal from "../../components/QrcodeModal";
+
+const reducer = (state, action) => {
+	if (action.type === "LOAD_WHATSAPPS") {
+		const whatsApps = action.payload;
+
+		return [...whatsApps];
+	}
+
+	if (action.type === "UPDATE_WHATSAPPS") {
+		const whatsApp = action.payload;
+		const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
+
+		if (whatsAppIndex !== -1) {
+			state[whatsAppIndex] = whatsApp;
+			return [...state];
+		} else {
+			return [whatsApp, ...state];
+		}
+	}
+
+	if (action.type === "UPDATE_SESSION") {
+		const whatsApp = action.payload;
+		const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
+
+		if (whatsAppIndex !== -1) {
+			state[whatsAppIndex].status = whatsApp.status;
+			state[whatsAppIndex].qrcode = whatsApp.qrcode;
+			return [...state];
+		} else {
+			return [...state];
+		}
+	}
+
+	if (action.type === "DELETE_WHATSAPPS") {
+		const whatsAppId = action.payload;
+
+		const whatsAppIndex = state.findIndex(s => s.id === whatsAppId);
+		if (whatsAppIndex !== -1) {
+			state.splice(whatsAppIndex, 1);
+		}
+		return [...state];
+	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
+};
+
+const useStyles = makeStyles(theme => ({
+	mainPaper: {
+		flex: 1,
+		padding: theme.spacing(1),
+		overflowY: "scroll",
+		...theme.scrollbarStyles,
+	},
+}));
+
+const WhatsApps = () => {
+	const classes = useStyles();
+
+	const [whatsApps, dispatch] = useReducer(reducer, []);
+
+	const [whatsAppModalOpen, setWhatsAppModalOpen] = useState(false);
+	const [qrModalOpen, setQrModalOpen] = useState(false);
+	const [selectedWhatsApp, setSelectedWhatsApp] = useState(null);
+	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+	const [deletingWhatsApp, setDeletingWhatsApp] = useState(null);
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const { data } = await api.get("/whatsapp/");
+				dispatch({ type: "LOAD_WHATSAPPS", payload: data });
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
+		};
+		fetchSession();
+	}, []);
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+		socket.on("whatsapp", data => {
+			if (data.action === "update") {
+				dispatch({ type: "UPDATE_WHATSAPPS", payload: data.whatsapp });
+			}
+		});
+
+		socket.on("whatsapp", data => {
+			if (data.action === "delete") {
+				dispatch({ type: "DELETE_WHATSAPPS", payload: data.whatsappId });
+			}
+		});
+
+		socket.on("whatsappSession", data => {
+			if (data.action === "update") {
+				dispatch({ type: "UPDATE_SESSION", payload: data.session });
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	// const handleDisconnectSession = async whatsAppId => {
+	// 	try {
+	// 		await api.put(`/whatsapp/whatsApp/${whatsAppId}`, {
+	// 			whatsApp: "",
+	// 			status: "pending",
+	// 		});
+	// 	} catch (err) {
+	// 		console.log(err);
+	// 		if (err.response && err.response.data && err.response.data.error) {
+	// 			toast.error(err.response.data.error);
+	// 		}
+	// 	}
+	// };
+
+	const handleOpenWhatsAppModal = () => {
+		setSelectedWhatsApp(null);
+		setWhatsAppModalOpen(true);
+	};
+
+	const handleCloseWhatsAppModal = useCallback(() => {
+		setWhatsAppModalOpen(false);
+		setSelectedWhatsApp(null);
+	}, [setSelectedWhatsApp, setWhatsAppModalOpen]);
+
+	const handleOpenQrModal = whatsApp => {
+		setSelectedWhatsApp(whatsApp);
+		setQrModalOpen(true);
+	};
+
+	const handleCloseQrModal = useCallback(() => {
+		setQrModalOpen(false);
+		setSelectedWhatsApp(null);
+	}, [setQrModalOpen, setSelectedWhatsApp]);
+
+	const handleEditWhatsApp = whatsApp => {
+		setSelectedWhatsApp(whatsApp);
+		setWhatsAppModalOpen(true);
+	};
+
+	const handleDeleteWhatsApp = async whatsAppId => {
+		try {
+			await api.delete(`/whatsapp/${whatsAppId}`);
+			toast.success("Deleted!");
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+		setDeletingWhatsApp(null);
+	};
+
+	return (
+		<MainContainer>
+			<ConfirmationModal
+				title={deletingWhatsApp && `Delete ${deletingWhatsApp.name}?`}
+				open={confirmModalOpen}
+				setOpen={setConfirmModalOpen}
+				onConfirm={() => handleDeleteWhatsApp(deletingWhatsApp.id)}
+			>
+				Are you sure? It cannot be reverted.
+			</ConfirmationModal>
+			<QrcodeModal
+				open={qrModalOpen}
+				onClose={handleCloseQrModal}
+				whatsAppId={
+					selectedWhatsApp && !whatsAppModalOpen && selectedWhatsApp.id
+				}
+			/>
+			<WhatsAppModal
+				open={whatsAppModalOpen}
+				onClose={handleCloseWhatsAppModal}
+				whatsAppId={selectedWhatsApp && !qrModalOpen && selectedWhatsApp.id}
+			/>
+			<MainHeader>
+				<Title>WhatsApps</Title>
+				<MainHeaderButtonsWrapper>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleOpenWhatsAppModal}
+					>
+						Add Whatsapp
+					</Button>
+				</MainHeaderButtonsWrapper>
+			</MainHeader>
+			<Paper className={classes.mainPaper} variant="outlined">
+				<Table size="small">
+					<TableHead>
+						<TableRow>
+							<TableCell align="center">Name</TableCell>
+							<TableCell align="center">Status</TableCell>
+							<TableCell align="center">Last update</TableCell>
+							<TableCell align="center">Actions</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{false ? (
+							<TableRowSkeleton />
+						) : (
+							<>
+								{whatsApps &&
+									whatsApps.length > 0 &&
+									whatsApps.map((whatsApp, index) => (
+										<TableRow key={whatsApp.id}>
+											<TableCell align="center">{whatsApp.name}</TableCell>
+											<TableCell align="center">
+												{whatsApp.status === "qrcode" ? (
+													<Button
+														size="small"
+														variant="contained"
+														color="primary"
+														onClick={() => handleOpenQrModal(whatsApp)}
+													>
+														QR CODE
+													</Button>
+												) : (
+													whatsApp.status
+												)}
+											</TableCell>
+											<TableCell align="center">
+												{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
+											</TableCell>
+											<TableCell align="center">
+												<IconButton
+													size="small"
+													onClick={() => handleEditWhatsApp(whatsApp)}
+												>
+													<Edit />
+												</IconButton>
+
+												<IconButton
+													size="small"
+													onClick={e => {
+														setConfirmModalOpen(true);
+														setDeletingWhatsApp(whatsApp);
+													}}
+												>
+													<DeleteOutline />
+												</IconButton>
+											</TableCell>
+										</TableRow>
+									))}
+							</>
+						)}
+					</TableBody>
+				</Table>
+			</Paper>
+		</MainContainer>
+	);
+};
+
+export default WhatsApps;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index b48a030..5a9d14f 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -7,7 +7,7 @@ import Dashboard from "../pages/Dashboard/";
 import Tickets from "../pages/Tickets/";
 import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
-import Connection from "../pages/Connection/";
+import WhatsApps from "../pages/WhatsApps/";
 import Settings from "../pages/Settings/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
@@ -29,7 +29,7 @@ const Routes = () => {
 							component={Tickets}
 							isPrivate
 						/>
-						<Route exact path="/connection" component={Connection} isPrivate />
+						<Route exact path="/whatsapps" component={WhatsApps} isPrivate />
 						<Route exact path="/contacts" component={Contacts} isPrivate />
 						<Route exact path="/users" component={Users} isPrivate />
 						<Route exact path="/Settings" component={Settings} isPrivate />

From 72c7c83110bb4c3a277129fd3ae525c471f76722 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 12:13:26 -0300
Subject: [PATCH 15/25] code cleanup

---
 backend/src/libs/wbot.js                     | 10 ++++------
 frontend/src/components/QrcodeModal/index.js |  2 --
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/backend/src/libs/wbot.js b/backend/src/libs/wbot.js
index 4118221..eee60d0 100644
--- a/backend/src/libs/wbot.js
+++ b/backend/src/libs/wbot.js
@@ -86,10 +86,8 @@ module.exports = {
 		return null;
 	},
 
-	getWbot: sessionId => {
-		console.log(sessionId);
-		console.log(sessions.map(session => session.id));
-		const sessionIndex = sessions.findIndex(s => s.id === sessionId);
+	getWbot: whatsappId => {
+		const sessionIndex = sessions.findIndex(s => s.id === whatsappId);
 
 		if (sessionIndex === -1) {
 			throw new Error("This Wbot session is not initialized");
@@ -97,9 +95,9 @@ module.exports = {
 		return sessions[sessionIndex];
 	},
 
-	removeWbot: sessionId => {
+	removeWbot: whatsappId => {
 		try {
-			const sessionIndex = sessions.findIndex(s => s.id === sessionId);
+			const sessionIndex = sessions.findIndex(s => s.id === whatsappId);
 			if (sessionIndex !== -1) {
 				sessions[sessionIndex].destroy();
 				sessions.splice(sessionIndex, 1);
diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js
index 9616c66..d6821ca 100644
--- a/frontend/src/components/QrcodeModal/index.js
+++ b/frontend/src/components/QrcodeModal/index.js
@@ -28,7 +28,6 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
 	useEffect(() => {
 		if (!whatsAppId) return;
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-		console.log("connectiing");
 
 		socket.on("whatsappSession", data => {
 			if (data.action === "update" && data.session.id === whatsAppId) {
@@ -42,7 +41,6 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
 
 		return () => {
 			socket.disconnect();
-			console.log("disconnectiing");
 		};
 	}, [whatsAppId, onClose]);
 

From 60e9181ece837bf631802cd4edd4b18d22b75b98 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 12:43:27 -0300
Subject: [PATCH 16/25] feat: set default whatsapp account in frontend

---
 backend/src/controllers/WhatsAppController.js | 56 ++++++++++++++++++-
 frontend/src/pages/WhatsApps/index.js         |  9 ++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/backend/src/controllers/WhatsAppController.js b/backend/src/controllers/WhatsAppController.js
index 75d1d68..22dccdc 100644
--- a/backend/src/controllers/WhatsAppController.js
+++ b/backend/src/controllers/WhatsAppController.js
@@ -1,3 +1,4 @@
+const Yup = require("yup");
 const Whatsapp = require("../models/Whatsapp");
 const { getIO } = require("../libs/socket");
 const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
@@ -5,13 +6,39 @@ const wbotMessageListener = require("../services/wbotMessageListener");
 const wbotMonitor = require("../services/wbotMonitor");
 
 exports.index = async (req, res) => {
-	const whatsapp = await Whatsapp.findAll();
+	const whatsapps = await Whatsapp.findAll();
 
-	return res.status(200).json(whatsapp);
+	return res.status(200).json(whatsapps);
 };
 
 exports.store = async (req, res) => {
+	const schema = Yup.object().shape({
+		name: Yup.string().required().min(2),
+		default: Yup.boolean()
+			.required()
+			.test(
+				"Check-default",
+				"Only one default whatsapp is permited",
+				async value => {
+					// console.log("cai no if", value);
+					if (value === true) {
+						const defaultFound = await Whatsapp.findOne({
+							where: { default: true },
+						});
+						return !Boolean(defaultFound);
+					} else return true;
+				}
+			),
+	});
+
+	try {
+		await schema.validate(req.body);
+	} catch (err) {
+		return res.status(400).json({ error: err.message });
+	}
+
 	const io = getIO();
+
 	const whatsapp = await Whatsapp.create(req.body);
 
 	if (!whatsapp) {
@@ -45,6 +72,31 @@ exports.show = async (req, res) => {
 };
 
 exports.update = async (req, res) => {
+	const schema = Yup.object().shape({
+		name: Yup.string().required().min(2),
+		default: Yup.boolean()
+			.required()
+			.test(
+				"Check-default",
+				"Only one default whatsapp is permited",
+				async value => {
+					// console.log("cai no if", value);
+					if (value === true) {
+						const defaultFound = await Whatsapp.findOne({
+							where: { default: true },
+						});
+						return !Boolean(defaultFound);
+					} else return true;
+				}
+			),
+	});
+
+	try {
+		await schema.validate(req.body);
+	} catch (err) {
+		return res.status(400).json({ error: err.message });
+	}
+
 	const io = getIO();
 	const { whatsappId } = req.params;
 
diff --git a/frontend/src/pages/WhatsApps/index.js b/frontend/src/pages/WhatsApps/index.js
index 36fdc67..e4dcbcb 100644
--- a/frontend/src/pages/WhatsApps/index.js
+++ b/frontend/src/pages/WhatsApps/index.js
@@ -4,6 +4,7 @@ import { toast } from "react-toastify";
 import { format, parseISO } from "date-fns";
 
 import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
 import {
 	Button,
 	TableBody,
@@ -14,7 +15,7 @@ import {
 	TableHead,
 	Paper,
 } from "@material-ui/core";
-import { Edit, DeleteOutline } from "@material-ui/icons";
+import { Edit, DeleteOutline, CheckCircle } from "@material-ui/icons";
 
 import MainContainer from "../../components/MainContainer";
 import MainHeader from "../../components/MainHeader";
@@ -228,6 +229,7 @@ const WhatsApps = () => {
 							<TableCell align="center">Name</TableCell>
 							<TableCell align="center">Status</TableCell>
 							<TableCell align="center">Last update</TableCell>
+							<TableCell align="center">Default</TableCell>
 							<TableCell align="center">Actions</TableCell>
 						</TableRow>
 					</TableHead>
@@ -258,6 +260,11 @@ const WhatsApps = () => {
 											<TableCell align="center">
 												{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
 											</TableCell>
+											<TableCell align="center">
+												{whatsApp.default && (
+													<CheckCircle style={{ color: green[500] }} />
+												)}
+											</TableCell>
 											<TableCell align="center">
 												<IconButton
 													size="small"

From 371477aa9859f109da5c9d399431a06d21d4fe47 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 12:51:16 -0300
Subject: [PATCH 17/25] fix: check whatsapp default when editing

---
 backend/src/controllers/WhatsAppController.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/backend/src/controllers/WhatsAppController.js b/backend/src/controllers/WhatsAppController.js
index 22dccdc..b50dbcc 100644
--- a/backend/src/controllers/WhatsAppController.js
+++ b/backend/src/controllers/WhatsAppController.js
@@ -22,10 +22,10 @@ exports.store = async (req, res) => {
 				async value => {
 					// console.log("cai no if", value);
 					if (value === true) {
-						const defaultFound = await Whatsapp.findOne({
+						const whatsappFound = await Whatsapp.findOne({
 							where: { default: true },
 						});
-						return !Boolean(defaultFound);
+						return !Boolean(whatsappFound);
 					} else return true;
 				}
 			),
@@ -72,6 +72,8 @@ exports.show = async (req, res) => {
 };
 
 exports.update = async (req, res) => {
+	const { whatsappId } = req.params;
+
 	const schema = Yup.object().shape({
 		name: Yup.string().required().min(2),
 		default: Yup.boolean()
@@ -80,12 +82,13 @@ exports.update = async (req, res) => {
 				"Check-default",
 				"Only one default whatsapp is permited",
 				async value => {
-					// console.log("cai no if", value);
 					if (value === true) {
-						const defaultFound = await Whatsapp.findOne({
+						const whatsappFound = await Whatsapp.findOne({
 							where: { default: true },
 						});
-						return !Boolean(defaultFound);
+						if (whatsappFound) {
+							return !(whatsappFound.id !== +whatsappId);
+						}
 					} else return true;
 				}
 			),
@@ -98,7 +101,6 @@ exports.update = async (req, res) => {
 	}
 
 	const io = getIO();
-	const { whatsappId } = req.params;
 
 	const whatsapp = await Whatsapp.findByPk(whatsappId);
 

From b793d28e601719073d4650ae892a9cc1b1745b12 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 14:22:05 -0300
Subject: [PATCH 18/25] feat: checking for whatsapp session Id on ticket and
 message creation

---
 backend/src/controllers/MessageController.js  | 22 ++++++++++++++++---
 backend/src/controllers/TicketController.js   | 14 +++++++++++-
 backend/src/controllers/WhatsAppController.js |  3 ++-
 ...906155658-add-whatsapp-field-to-tickets.js | 16 ++++++++++++++
 backend/src/libs/wbot.js                      |  3 ++-
 backend/src/models/Ticket.js                  |  4 ++++
 backend/src/models/Whatsapp.js                |  4 ++++
 7 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 backend/src/database/migrations/20200906155658-add-whatsapp-field-to-tickets.js

diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js
index 2639b55..33a04b7 100644
--- a/backend/src/controllers/MessageController.js
+++ b/backend/src/controllers/MessageController.js
@@ -1,6 +1,7 @@
 const Message = require("../models/Message");
 const Contact = require("../models/Contact");
 const User = require("../models/User");
+const Whatsapp = require("../models/Whatsapp");
 
 const Ticket = require("../models/Ticket");
 const { getIO } = require("../libs/socket");
@@ -11,7 +12,7 @@ const { MessageMedia } = require("whatsapp-web.js");
 
 const setMessagesAsRead = async ticket => {
 	const io = getIO();
-	const wbot = getWbot();
+	const wbot = getWbot(ticket.whatsappId);
 
 	await Message.update(
 		{ read: true },
@@ -104,7 +105,6 @@ exports.index = async (req, res, next) => {
 };
 
 exports.store = async (req, res, next) => {
-	const wbot = getWbot();
 	const io = getIO();
 
 	const { ticketId } = req.params;
@@ -126,6 +126,22 @@ exports.store = async (req, res, next) => {
 		return res.status(404).json({ error: "No ticket found with this ID" });
 	}
 
+	if (!ticket.whatsappId) {
+		const defaultWhatsapp = await Whatsapp.findOne({
+			where: { default: true },
+		});
+
+		if (!defaultWhatsapp) {
+			return res
+				.status(404)
+				.json({ error: "No default WhatsApp found. Check Connection page." });
+		}
+
+		await ticket.setWhatsapp(defaultWhatsapp);
+	}
+
+	const wbot = getWbot(ticket.whatsappId);
+
 	try {
 		if (media) {
 			const newMedia = MessageMedia.fromFilePath(req.file.path);
@@ -178,7 +194,7 @@ exports.store = async (req, res, next) => {
 
 		await setMessagesAsRead(ticket);
 
-		return res.json({ newMessage, ticket });
+		return res.status(200).json({ newMessage, ticket });
 	}
 
 	return res
diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js
index 825203e..7fe06ae 100644
--- a/backend/src/controllers/TicketController.js
+++ b/backend/src/controllers/TicketController.js
@@ -4,6 +4,7 @@ const { startOfDay, endOfDay, parseISO } = require("date-fns");
 const Ticket = require("../models/Ticket");
 const Contact = require("../models/Contact");
 const Message = require("../models/Message");
+const Whatsapp = require("../models/Whatsapp");
 
 const { getIO } = require("../libs/socket");
 
@@ -110,7 +111,18 @@ exports.index = async (req, res) => {
 
 exports.store = async (req, res) => {
 	const io = getIO();
-	const ticket = await Ticket.create(req.body);
+
+	const defaultWhatsapp = await Whatsapp.findOne({
+		where: { default: true },
+	});
+
+	if (!defaultWhatsapp) {
+		return res
+			.status(404)
+			.json({ error: "No default WhatsApp found. Check Connection page." });
+	}
+
+	const ticket = await defaultWhatsapp.createTicket(req.body);
 
 	const contact = await ticket.getContact();
 
diff --git a/backend/src/controllers/WhatsAppController.js b/backend/src/controllers/WhatsAppController.js
index b50dbcc..30fc5b3 100644
--- a/backend/src/controllers/WhatsAppController.js
+++ b/backend/src/controllers/WhatsAppController.js
@@ -20,7 +20,6 @@ exports.store = async (req, res) => {
 				"Check-default",
 				"Only one default whatsapp is permited",
 				async value => {
-					// console.log("cai no if", value);
 					if (value === true) {
 						const whatsappFound = await Whatsapp.findOne({
 							where: { default: true },
@@ -88,6 +87,8 @@ exports.update = async (req, res) => {
 						});
 						if (whatsappFound) {
 							return !(whatsappFound.id !== +whatsappId);
+						} else {
+							return true;
 						}
 					} else return true;
 				}
diff --git a/backend/src/database/migrations/20200906155658-add-whatsapp-field-to-tickets.js b/backend/src/database/migrations/20200906155658-add-whatsapp-field-to-tickets.js
new file mode 100644
index 0000000..28f7c0c
--- /dev/null
+++ b/backend/src/database/migrations/20200906155658-add-whatsapp-field-to-tickets.js
@@ -0,0 +1,16 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.addColumn("Tickets", "whatsappId", {
+			type: Sequelize.INTEGER,
+			references: { model: "Whatsapps", key: "id" },
+			onUpdate: "CASCADE",
+			onDelete: "SET NULL",
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.removeColumn("Tickets", "whatsappId");
+	},
+};
diff --git a/backend/src/libs/wbot.js b/backend/src/libs/wbot.js
index eee60d0..86ee3a0 100644
--- a/backend/src/libs/wbot.js
+++ b/backend/src/libs/wbot.js
@@ -90,7 +90,8 @@ module.exports = {
 		const sessionIndex = sessions.findIndex(s => s.id === whatsappId);
 
 		if (sessionIndex === -1) {
-			throw new Error("This Wbot session is not initialized");
+			console.log("This Wbot session is not initialized");
+			return null;
 		}
 		return sessions[sessionIndex];
 	},
diff --git a/backend/src/models/Ticket.js b/backend/src/models/Ticket.js
index 5882527..771eba5 100644
--- a/backend/src/models/Ticket.js
+++ b/backend/src/models/Ticket.js
@@ -39,6 +39,10 @@ class Ticket extends Sequelize.Model {
 	static associate(models) {
 		this.belongsTo(models.Contact, { foreignKey: "contactId", as: "contact" });
 		this.belongsTo(models.User, { foreignKey: "userId", as: "user" });
+		this.belongsTo(models.Whatsapp, {
+			foreignKey: "whatsappId",
+			as: "whatsapp",
+		});
 		this.hasMany(models.Message, { foreignKey: "ticketId", as: "messages" });
 	}
 }
diff --git a/backend/src/models/Whatsapp.js b/backend/src/models/Whatsapp.js
index 754de3b..7d77f17 100644
--- a/backend/src/models/Whatsapp.js
+++ b/backend/src/models/Whatsapp.js
@@ -23,6 +23,10 @@ class Whatsapp extends Sequelize.Model {
 
 		return this;
 	}
+
+	static associate(models) {
+		this.hasMany(models.Ticket, { foreignKey: "whatsappId", as: "tickets" });
+	}
 }
 
 module.exports = Whatsapp;

From fae02cf8e3ad317c97f61f47712ffc67535a18d6 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 14:31:53 -0300
Subject: [PATCH 19/25] feat: checking default whatsapp on import and create
 contacts

---
 backend/src/controllers/ContactController.js        | 13 ++++++++++++-
 .../controllers/ImportPhoneContactsController.js    | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/backend/src/controllers/ContactController.js b/backend/src/controllers/ContactController.js
index 2b0072f..268d5a3 100644
--- a/backend/src/controllers/ContactController.js
+++ b/backend/src/controllers/ContactController.js
@@ -2,6 +2,7 @@ const Sequelize = require("sequelize");
 const { Op } = require("sequelize");
 
 const Contact = require("../models/Contact");
+const Whatsapp = require("../models/Whatsapp");
 const ContactCustomField = require("../models/ContactCustomField");
 
 const { getIO } = require("../libs/socket");
@@ -39,7 +40,17 @@ exports.index = async (req, res) => {
 };
 
 exports.store = async (req, res) => {
-	const wbot = getWbot();
+	const defaultWhatsapp = await Whatsapp.findOne({
+		where: { default: true },
+	});
+
+	if (!defaultWhatsapp) {
+		return res
+			.status(404)
+			.json({ error: "No default WhatsApp found. Check Connection page." });
+	}
+
+	const wbot = getWbot(defaultWhatsapp);
 	const io = getIO();
 	const newContact = req.body;
 
diff --git a/backend/src/controllers/ImportPhoneContactsController.js b/backend/src/controllers/ImportPhoneContactsController.js
index c9b79b0..b24ee0d 100644
--- a/backend/src/controllers/ImportPhoneContactsController.js
+++ b/backend/src/controllers/ImportPhoneContactsController.js
@@ -1,10 +1,21 @@
 const Contact = require("../models/Contact");
+const Whatsapp = require("../models/Whatsapp");
 const { getIO } = require("../libs/socket");
 const { getWbot, initWbot } = require("../libs/wbot");
 
 exports.store = async (req, res, next) => {
+	const defaultWhatsapp = await Whatsapp.findOne({
+		where: { default: true },
+	});
+
+	if (!defaultWhatsapp) {
+		return res
+			.status(404)
+			.json({ error: "No default WhatsApp found. Check Connection page." });
+	}
+
 	const io = getIO();
-	const wbot = getWbot();
+	const wbot = getWbot(defaultWhatsapp);
 
 	let phoneContacts;
 

From 8e8658425f4fb46e5825fbf24a0d28f45aec2631 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 6 Sep 2020 15:12:25 -0300
Subject: [PATCH 20/25] feat: finished multiple whatsapp support

---
 backend/src/services/wbotMessageListener.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js
index 38e16d0..aed420d 100644
--- a/backend/src/services/wbotMessageListener.js
+++ b/backend/src/services/wbotMessageListener.js
@@ -7,6 +7,7 @@ const Sentry = require("@sentry/node");
 const Contact = require("../models/Contact");
 const Ticket = require("../models/Ticket");
 const Message = require("../models/Message");
+const Whatsapp = require("../models/Whatsapp");
 
 const { getIO } = require("../libs/socket");
 const { getWbot, initWbot } = require("../libs/wbot");
@@ -29,7 +30,7 @@ const verifyContact = async (msgContact, profilePicUrl) => {
 	return contact;
 };
 
-const verifyTicket = async contact => {
+const verifyTicket = async (contact, whatsappId) => {
 	let ticket = await Ticket.findOne({
 		where: {
 			status: {
@@ -57,6 +58,7 @@ const verifyTicket = async contact => {
 		ticket = await Ticket.create({
 			contactId: contact.id,
 			status: "pending",
+			whatsappId,
 		});
 	}
 
@@ -133,11 +135,12 @@ const handleMessage = async (msg, ticket, contact) => {
 };
 
 const wbotMessageListener = whatsapp => {
-	const wbot = getWbot(whatsapp.id);
+	const whatsappId = whatsapp.id;
+	const wbot = getWbot(whatsappId);
 	const io = getIO();
 
 	wbot.on("message_create", async msg => {
-		console.log(msg);
+		// console.log(msg);
 
 		if (
 			msg.from === "status@broadcast" ||
@@ -159,7 +162,7 @@ const wbotMessageListener = whatsapp => {
 
 			const profilePicUrl = await msgContact.getProfilePicUrl();
 			const contact = await verifyContact(msgContact, profilePicUrl);
-			const ticket = await verifyTicket(contact);
+			const ticket = await verifyTicket(contact, whatsappId);
 
 			//return if message was already created by messageController
 			if (msg.fromMe) {

From 10bc003d02dfe4632de579c11ba3da0bc532cf35 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 7 Sep 2020 09:38:52 -0300
Subject: [PATCH 21/25] feat: block no admin users to access some routes

---
 backend/src/controllers/SessionController.js  |  9 ++++--
 backend/src/controllers/SettingController.js  | 12 ++++++++
 backend/src/controllers/UserController.js     |  6 ++++
 .../src/components/_layout/MainListItems.js   | 29 +++++++++++--------
 frontend/src/context/Auth/useAuth.js          | 12 ++++----
 5 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/backend/src/controllers/SessionController.js b/backend/src/controllers/SessionController.js
index 2f19dca..e9afcb0 100644
--- a/backend/src/controllers/SessionController.js
+++ b/backend/src/controllers/SessionController.js
@@ -23,7 +23,10 @@ exports.store = async (req, res, next) => {
 		}
 	);
 
-	return res
-		.status(200)
-		.json({ token: token, username: user.name, userId: user.id });
+	return res.status(200).json({
+		token: token,
+		username: user.name,
+		profile: user.profile,
+		userId: user.id,
+	});
 };
diff --git a/backend/src/controllers/SettingController.js b/backend/src/controllers/SettingController.js
index 15e4203..045a0ee 100644
--- a/backend/src/controllers/SettingController.js
+++ b/backend/src/controllers/SettingController.js
@@ -2,12 +2,24 @@ const Setting = require("../models/Setting");
 const { getIO } = require("../libs/socket");
 
 exports.index = async (req, res) => {
+	if (req.user.profile !== "admin") {
+		return res
+			.status(403)
+			.json({ error: "Only administrators can access this route." });
+	}
+
 	const settings = await Setting.findAll();
 
 	return res.status(200).json(settings);
 };
 
 exports.update = async (req, res) => {
+	if (req.user.profile !== "admin") {
+		return res
+			.status(403)
+			.json({ error: "Only administrators can access this route." });
+	}
+
 	const io = getIO();
 	const { settingKey } = req.params;
 	const setting = await Setting.findByPk(settingKey);
diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index a77da49..0f00962 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -8,6 +8,12 @@ const Setting = require("../models/Setting");
 const { getIO } = require("../libs/socket");
 
 exports.index = async (req, res) => {
+	if (req.user.profile !== "admin") {
+		return res
+			.status(403)
+			.json({ error: "Only administrators can access this route." });
+	}
+
 	const { searchParam = "", pageNumber = 1 } = req.query;
 
 	const whereCondition = {
diff --git a/frontend/src/components/_layout/MainListItems.js b/frontend/src/components/_layout/MainListItems.js
index df2a93a..0df631f 100644
--- a/frontend/src/components/_layout/MainListItems.js
+++ b/frontend/src/components/_layout/MainListItems.js
@@ -38,6 +38,7 @@ function ListItemLink(props) {
 }
 
 const MainListItems = () => {
+	const userProfile = localStorage.getItem("profile");
 	return (
 		<div>
 			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
@@ -57,18 +58,22 @@ const MainListItems = () => {
 				primary={i18n.t("mainDrawer.listItems.contacts")}
 				icon={<ContactPhoneIcon />}
 			/>
-			<Divider />
-			<ListSubheader inset>Administration</ListSubheader>
-			<ListItemLink
-				to="/users"
-				primary={i18n.t("mainDrawer.listItems.users")}
-				icon={<GroupIcon />}
-			/>
-			<ListItemLink
-				to="/settings"
-				primary={i18n.t("mainDrawer.listItems.settings")}
-				icon={<SettingsIcon />}
-			/>
+			{userProfile === "admin" && (
+				<>
+					<Divider />
+					<ListSubheader inset>Administration</ListSubheader>
+					<ListItemLink
+						to="/users"
+						primary={i18n.t("mainDrawer.listItems.users")}
+						icon={<GroupIcon />}
+					/>
+					<ListItemLink
+						to="/settings"
+						primary={i18n.t("mainDrawer.listItems.settings")}
+						icon={<SettingsIcon />}
+					/>
+				</>
+			)}
 		</div>
 	);
 };
diff --git a/frontend/src/context/Auth/useAuth.js b/frontend/src/context/Auth/useAuth.js
index 4396d6f..327727c 100644
--- a/frontend/src/context/Auth/useAuth.js
+++ b/frontend/src/context/Auth/useAuth.js
@@ -47,11 +47,12 @@ const useAuth = () => {
 	const handleLogin = async (e, user) => {
 		e.preventDefault();
 		try {
-			const res = await api.post("/auth/login", user);
-			localStorage.setItem("token", JSON.stringify(res.data.token));
-			localStorage.setItem("username", res.data.username);
-			localStorage.setItem("userId", res.data.userId);
-			api.defaults.headers.Authorization = `Bearer ${res.data.token}`;
+			const { data } = await api.post("/auth/login", user);
+			localStorage.setItem("token", JSON.stringify(data.token));
+			localStorage.setItem("username", data.username);
+			localStorage.setItem("profile", data.profile);
+			localStorage.setItem("userId", data.userId);
+			api.defaults.headers.Authorization = `Bearer ${data.token}`;
 			setIsAuth(true);
 			toast.success(i18n.t("auth.toasts.success"));
 			history.push("/tickets");
@@ -68,6 +69,7 @@ const useAuth = () => {
 		setIsAuth(false);
 		localStorage.removeItem("token");
 		localStorage.removeItem("username");
+		localStorage.removeItem("profile");
 		localStorage.removeItem("userId");
 		api.defaults.headers.Authorization = undefined;
 		history.push("/login");

From 324a1996b0965c3e4edffbfb8c89ef8e42b005c8 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 7 Sep 2020 09:42:23 -0300
Subject: [PATCH 22/25] improvement: change page names

---
 frontend/src/components/_layout/MainListItems.js       | 4 ++--
 frontend/src/pages/{WhatsApps => Connections}/index.js | 6 +++---
 frontend/src/routes/index.js                           | 9 +++++++--
 3 files changed, 12 insertions(+), 7 deletions(-)
 rename frontend/src/pages/{WhatsApps => Connections}/index.js (95%)

diff --git a/frontend/src/components/_layout/MainListItems.js b/frontend/src/components/_layout/MainListItems.js
index 0df631f..ec10505 100644
--- a/frontend/src/components/_layout/MainListItems.js
+++ b/frontend/src/components/_layout/MainListItems.js
@@ -43,8 +43,8 @@ const MainListItems = () => {
 		<div>
 			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
 			<ListItemLink
-				to="/whatsapps"
-				primary="WhatsApps"
+				to="/connections"
+				primary="Connections"
 				icon={<SyncAltIcon />}
 			/>
 			<ListItemLink
diff --git a/frontend/src/pages/WhatsApps/index.js b/frontend/src/pages/Connections/index.js
similarity index 95%
rename from frontend/src/pages/WhatsApps/index.js
rename to frontend/src/pages/Connections/index.js
index e4dcbcb..5dab32f 100644
--- a/frontend/src/pages/WhatsApps/index.js
+++ b/frontend/src/pages/Connections/index.js
@@ -84,7 +84,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const WhatsApps = () => {
+const Connections = () => {
 	const classes = useStyles();
 
 	const [whatsApps, dispatch] = useReducer(reducer, []);
@@ -211,7 +211,7 @@ const WhatsApps = () => {
 				whatsAppId={selectedWhatsApp && !qrModalOpen && selectedWhatsApp.id}
 			/>
 			<MainHeader>
-				<Title>WhatsApps</Title>
+				<Title>Connections</Title>
 				<MainHeaderButtonsWrapper>
 					<Button
 						variant="contained"
@@ -294,4 +294,4 @@ const WhatsApps = () => {
 	);
 };
 
-export default WhatsApps;
+export default Connections;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 5a9d14f..10b3b5f 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -7,7 +7,7 @@ import Dashboard from "../pages/Dashboard/";
 import Tickets from "../pages/Tickets/";
 import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
-import WhatsApps from "../pages/WhatsApps/";
+import Connections from "../pages/Connections/";
 import Settings from "../pages/Settings/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
@@ -29,7 +29,12 @@ const Routes = () => {
 							component={Tickets}
 							isPrivate
 						/>
-						<Route exact path="/whatsapps" component={WhatsApps} isPrivate />
+						<Route
+							exact
+							path="/connections"
+							component={Connections}
+							isPrivate
+						/>
 						<Route exact path="/contacts" component={Contacts} isPrivate />
 						<Route exact path="/users" component={Users} isPrivate />
 						<Route exact path="/Settings" component={Settings} isPrivate />

From 42a8feacdd82ab5449214fbed82c80df1ef367a4 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 7 Sep 2020 09:45:39 -0300
Subject: [PATCH 23/25] code cleanup

---
 backend/src/controllers/UserController.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/src/controllers/UserController.js b/backend/src/controllers/UserController.js
index 0f00962..6dc0e0f 100644
--- a/backend/src/controllers/UserController.js
+++ b/backend/src/controllers/UserController.js
@@ -142,7 +142,6 @@ exports.update = async (req, res) => {
 				.status(403)
 				.json({ error: "There must be at leat one admin user." });
 		}
-		console.log("found", adminUsers);
 	}
 
 	await user.update(req.body);

From dc62a85dcbc8a3a077e5d8edb64796847e01c195 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 7 Sep 2020 10:05:31 -0300
Subject: [PATCH 24/25] update README

---
 README.md | 78 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index d0487b6..7b693c3 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ A _very simple_ Ticket System based on WhatsApp messages.
 
 Backend uses [whatsapp-web.js](https://github.com/pedroslopez/whatsapp-web.js) to receive and send WhatsApp messages, create tickets from them and store all in a MySQL database.
 
-Frontend is a full-featured multi-user _chat app_ bootstrapped with react-create-app and Material UI, that comunicates with backend using REST API and Websockets. It allows you to interact with contacts, tickets, send and receive WhatsApp messagees.
+Frontend is a full-featured multi-user _chat app_ bootstrapped with react-create-app and Material UI, that comunicates with backend using REST API and Websockets. It allows you to interact with contacts, tickets, send and receive WhatsApp messages.
 
 **NOTE**: I can't guarantee you will not be blocked by using this method, although it has worked for me. WhatsApp does not allow bots or unofficial clients on their platform, so this shouldn't be considered totally safe.
 
@@ -26,9 +26,9 @@ If a contact sent a new message in less than 2 hours interval, and there is no t
 
 ## Demo
 
-**Note**: It's not a good idea to sync your whatsapp account is this demo enviroment, because all your received messages will be stored in database and will be accessible by everyone that access this URL and creates an account.
+**Note**: It's not a good idea to sync your WhatsApp account is this demo enviroment, because all your received messages will be stored in database and will be accessible by everyone that access this URL and creates an account.
 
-That said, theres not much to test without syncing an whatsapp account, since adding contacts or tickets simple throws an error if app is not synced with whatassp. I will create a better test enviroment in future.
+That said, theres not much to test without syncing an WhatsApp account, since adding contacts or tickets simple throws an error if app is not synced with WhatsApp.
 
 Meanwhile, if you want to test it, remember to disconnect session and delete all tickets and contacts after your tests.
 
@@ -38,12 +38,12 @@ email: demo@demo.com
 
 password: demo123
 
-It's online thanks to [@ramphy](https://github.com/ramphy), who provided a VPS for me to create these installation instructions.
+It's online thanks to [@ramphy](https://github.com/ramphy), who provided a VPS to creation of these installation instructions.
 
 ## Installation and Usage (Linux Ubuntu - Development)
 
 Create Mysql Database using docker:
-_Note_: change dbname, username password.
+_Note_: change MYSQL_DATABASE, MYSQL_PASSWORD, MYSQL_USER and MYSQL_ROOT_PASSWORD.
 
 ```bash
 docker run --name whaticketdb -e MYSQL_ROOT_PASSWORD=strongpassword -e MYSQL_DATABASE=whaticket -e MYSQL_USER=whaticket -e MYSQL_PASSWORD=whaticket --restart always -p 3306:3306 -d mariadb:latest --character-set-server=utf8mb4 --collation-server=utf8mb4_bin
@@ -57,9 +57,10 @@ sudo apt-get install -y libgbm-dev wget unzip fontconfig locales gconf-service l
 
 - Clone this repo
 - On backend folder:
-  - Copy .env.example to .env and fill it with database details
+  - Copy .env.example to .env and fill it with database details.
   - Install dependecies: `npm install` (Only in the first time)
   - Create database tables: `npx sequelize db:migrate` (Only in the first time)
+  - Fill database with initial values: `npx sequelize db:seed:all`
   - Start backend: `npm start`
 - In another terminal, on frontend folder:
   - Copy .env.example to .env and fill it with backend URL (normally localhost:port)
@@ -67,12 +68,13 @@ sudo apt-get install -y libgbm-dev wget unzip fontconfig locales gconf-service l
   - Start frontend: `npm start`
 - Go to http://your_server_ip:3000/signup
 - Create an user and login with it.
-- On the sidebard, go to _Connection_ and read QRCode with your WhatsApp.
+- On the sidebard, go to _Connections_ and create your first WhatsApp connection.
+- Wait for QR CODE button to appear, click it and read qr code.
 - Done. Every message received by your synced WhatsApp number will appear in Tickets List.
 
 ## Basic production deployment (Ubuntu 18.04 VPS)
 
-You need two subdomains forwarding to youts VPS ip to follow these instructions. We'll use `myapp.mydomain.com` and `api.mydomain.com` in examples.
+You'll need two subdomains forwarding to yours VPS ip to follow these instructions. We'll use `myapp.mydomain.com` to frontend and `api.mydomain.com` to backend in the following example. We'll also use an dedicated user with sudo privileges no deploy it (not root).
 
 Update all system packages:
 
@@ -89,7 +91,7 @@ node -v
 npm -v
 ```
 
-Install docker:
+Install docker and add you user to docker group:
 
 ```bash
 sudo apt install apt-transport-https ca-certificates curl software-properties-common
@@ -98,20 +100,21 @@ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubun
 sudo apt update
 sudo apt install docker-ce
 sudo systemctl status docker
-```
-
-Add current user to docker group:
-
-```bash
 sudo usermod -aG docker \${USER}
 su - \${USER}
 ```
 
-Create database container (Instructions in installation)
+Create Mysql Database using docker:
+_Note_: change MYSQL_DATABASE, MYSQL_PASSWORD, MYSQL_USER and MYSQL_ROOT_PASSWORD.
+
+```bash
+docker run --name whaticketdb -e MYSQL_ROOT_PASSWORD=strongpassword -e MYSQL_DATABASE=whaticket -e MYSQL_USER=whaticket -e MYSQL_PASSWORD=whaticket --restart always -p 3306:3306 -d mariadb:latest --character-set-server=utf8mb4 --collation-server=utf8mb4_bin
+```
 
 Clone this repository:
 
 ```bash
+cd ~
 git clone https://github.com/canove/whaticket whaticket
 ```
 
@@ -124,8 +127,8 @@ nano whaticket/backend/.env
 
 ```bash
 NODE_ENV=
-BACKEND_URL=https://api.mydomain.com
-PROXY_PORT=443
+BACKEND_URL=https://api.mydomain.com      #USE HTTPS HERE, WE WILL ADD SSL LATTER
+PROXY_PORT=443                            #USE NGINX REVERSE PROXY PORT HERE, WE WILL CONFIGURE IT LATTER
 PORT=8080
 
 DB_HOST=
@@ -134,34 +137,34 @@ DB_PASS=
 DB_NAME=
 ```
 
-Install puppeteer dependencies(Instructions in installation)
+Install puppeteer dependencies:
 
-Install backend dependencies and run migrations:
+```bash
+sudo apt-get install -y libgbm-dev wget unzip fontconfig locales gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils
+```
+
+Install backend dependencies, run migrations and seeds:
 
 ```bash
 cd whaticket/backend
 npm install
 npx sequelize db:migrate
+npx sequelize db:seed:all
 ```
 
-Start backend to confirm its working, you should see: `Server started on port...` on console.
+Start it with `npm start`, you should see: `Server started on port...` on console. Hit `CTRL + C` to exit.
 
-Install pm2 **with sudo**:
+Install pm2 **with sudo**, and start backend with it:
 
 ```bash
 sudo npm install -g pm2
-```
-
-Start backend with pm2:
-
-```bash
 pm2 start src/app.js --name whaticket-backend
 ```
 
 Make pm2 auto start afeter reboot:
 
 ```bash
-pm2 startup ubuntu -u YOUR_USERNAME
+pm2 startup ubuntu -u `YOUR_USERNAME`
 ```
 
 Copy the last line outputed from previus command and run it, its something like:
@@ -170,7 +173,7 @@ Copy the last line outputed from previus command and run it, its something like:
 sudo env PATH=\$PATH:/usr/bin pm2 startup ubuntu -u YOUR_USERNAME --hp /home/YOUR_USERNAM
 ```
 
-Now, lets prepare frontend:
+Go to frontend folder and install dependencies:
 
 ```bash
 cd ../whaticket/frontend
@@ -189,16 +192,24 @@ Build frontend app:
 npm run build
 ```
 
-Start frotend with pm2:
+Start frontend with pm2, and save pm2 process list to start automatically after reboot:
 
 ```bash
 pm2 start server.js --name whaticket-frontend
+pm2 save
 ```
 
-Save pm2 process list to start automatically after reboot:
+To check if it's running, run `pm2 list`, it should look like:
 
 ```bash
-pm2 save
+deploy@ubuntu-whats:~$ pm2 list
+┌─────┬─────────────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
+│ id  │ name                    │ namespace   │ version │ mode    │ pid      │ uptime │ .    │ status    │ cpu      │ mem      │ user     │ watching │
+├─────┼─────────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
+│ 1   │ whaticket-frontend      │ default     │ 0.1.0   │ fork    │ 179249   │ 12D    │ 0    │ online    │ 0.3%     │ 50.2mb   │ deploy   │ disabled │
+│ 6   │ whaticket-backend       │ default     │ 1.0.0   │ fork    │ 179253   │ 12D    │ 15   │ online    │ 0.3%     │ 118.5mb  │ deploy   │ disabled │
+└─────┴─────────────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
+
 ```
 
 Install nginx:
@@ -211,7 +222,6 @@ Remove nginx default site:
 
 ```bash
 sudo rm /etc/nginx/sites-enabled/default
-sudo service nginx restart
 ```
 
 Create a new nginx site to frontend app:
@@ -240,7 +250,7 @@ server {
 }
 ```
 
-Create another one to backend api, changing `server_name` to yours equivalent to `api.mydomain.com`, and `proxy_pass` to you localhost backend node server URL:
+Create another one to backend api, changing `server_name` to yours equivalent to `api.mydomain.com`, and `proxy_pass` to your localhost backend node server URL:
 
 ```bash
 sudo cp /etc/nginx/sites-available/whaticket-frontend /etc/nginx/sites-available/whaticket-backend
@@ -257,7 +267,7 @@ server {
 }
 ```
 
-Create a symbolic link to enalbe nginx site:
+Create a symbolic links to enalbe nginx sites:
 
 ```bash
 sudo ln -s /etc/nginx/sites-available/whaticket-frontend /etc/nginx/sites-enabled

From b207f3b966d05f4e1ba56db846a0ca75fa09ea9b Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 7 Sep 2020 11:59:12 -0300
Subject: [PATCH 25/25] update README

---
 README.md                      |  23 ++++++++++++-----------
 images/multiple-whatsapps2.png | Bin 0 -> 55421 bytes
 2 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 images/multiple-whatsapps2.png

diff --git a/README.md b/README.md
index 7b693c3..7f81173 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,16 @@ If a contact sent a new message in less than 2 hours interval, and there is no t
 
 ## Screenshots
 
-<img src="https://raw.githubusercontent.com/canove/whaticket/master/images/tickets2.png" width="350"> <img src="https://raw.githubusercontent.com/canove/whaticket/master/images/tickets3.png" width="350">
+<img src="https://raw.githubusercontent.com/canove/whaticket/master/images/tickets2.png" width="350"> <img src="https://raw.githubusercontent.com/canove/whaticket/master/images/tickets3.png" width="350"> <img src="https://raw.githubusercontent.com/canove/whaticket/master/images/multiple-whatsapps2.png" width="350">
+
+## Features
+
+- Have multiple users chating in same WhatsApp Number ✅
+- Connect to multiple WhatsApp accounts and receive all messages in one place.
+- Create and chat with new contacts without touching cellphone ✅
+- Send and receive message ✅
+- Send media (images/audio/documents) ✅
+- Receive media (images/audio/video/documents) ✅
 
 ## Demo
 
@@ -131,7 +140,7 @@ BACKEND_URL=https://api.mydomain.com      #USE HTTPS HERE, WE WILL ADD SSL LATTE
 PROXY_PORT=443                            #USE NGINX REVERSE PROXY PORT HERE, WE WILL CONFIGURE IT LATTER
 PORT=8080
 
-DB_HOST=
+DB_HOST=localhost
 DB_USER=
 DB_PASS=
 DB_NAME=
@@ -176,7 +185,7 @@ sudo env PATH=\$PATH:/usr/bin pm2 startup ubuntu -u YOUR_USERNAME --hp /home/YOU
 Go to frontend folder and install dependencies:
 
 ```bash
-cd ../whaticket/frontend
+cd ../frontend
 npm install
 ```
 
@@ -295,14 +304,6 @@ Enable SSL on nginx (Accept all information asked):
 sudo certbot --nginx
 ```
 
-## Features
-
-- Have multiple users chating in same WhatsApp Number ✅
-- Create and chat with new contacts without touching cellphone ✅
-- Send and receive message ✅
-- Send media (images/audio/documents) ✅
-- Receive media (images/audio/video/documents) ✅
-
 ## Contributing
 
 Any help and suggestions are welcome!
diff --git a/images/multiple-whatsapps2.png b/images/multiple-whatsapps2.png
new file mode 100644
index 0000000000000000000000000000000000000000..807c9779d7031823c55f8be756984042ad9495c5
GIT binary patch
literal 55421
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
M#vEw;>g1)r01RBv#{d8T

literal 0
HcmV?d00001