feat: finished multiple whatsapps handle in frontend

backend/src/app.js

@@ -60,11 +60,11 @@ const startWhatsAppSessions = async () => {
 	const whatsapps = await Whatsapp.findAll();
 
 	if (whatsapps.length > 0) {
-		whatsapps.forEach(dbSession => {
+		whatsapps.forEach(whatsapp => {
-			initWbot(dbSession)
+			initWbot(whatsapp)
 				.then(() => {
-					wbotMessageListener(dbSession);
+					wbotMessageListener(whatsapp);
-					wbotMonitor(dbSession);
+					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" });
 });

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." });
+};

backend/src/controllers/WhatsAppSessionController.js

@@ -1,91 +1,32 @@
-const Whatsapp = require("../models/Whatsapp");
+// const Whatsapp = require("../models/Whatsapp");
-const { getIO } = require("../libs/socket");
+// const { getIO } = require("../libs/socket");
-const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
+// const { getWbot, initWbot, removeWbot } = require("../libs/wbot");
-const wbotMessageListener = require("../services/wbotMessageListener");
+// const wbotMessageListener = require("../services/wbotMessageListener");
-const wbotMonitor = require("../services/wbotMonitor");
+// const wbotMonitor = require("../services/wbotMonitor");
 
-exports.index = async (req, res) => {
+// exports.show = async (req, res) => {
-	const dbSession = await Whatsapp.findAll();
+// 	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) => {
+// 	return res.status(200).json(dbSession);
-	const io = getIO();
+// };
-	const dbSession = await Whatsapp.create(req.body);
 
-	if (!dbSession) {
+// exports.delete = async (req, res) => {
-		return res.status(400).json({ error: "Cannot create whatsapp session." });
+// 	const { whatsappId } = req.params;
-	}
 
-	initWbot(dbSession)
+// 	const dbSession = await Whatsapp.findByPk(whatsappId);
-		.then(() => {
-			wbotMessageListener(dbSession);
-			wbotMonitor(dbSession);
-		})
-		.catch(err => console.log(err));
 
-	io.emit("session", {
+// 	if (!dbSession) {
-		action: "update",
+// 		return res.status(404).json({ message: "Session not found" });
-		session: dbSession,
+// 	}
-	});
 
-	return res.status(200).json(dbSession);
+// 	const wbot = getWbot(dbSession.id);
-};
 
-exports.show = async (req, res) => {
+// 	wbot.logout();
-	const { sessionId } = req.params;
-	const dbSession = await Whatsapp.findByPk(sessionId);
 
-	if (!dbSession) {
+// 	return res.status(200).json({ message: "Session disconnected." });
-		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." });
-};

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");
+	},
+};

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) {
+			if (whatsapp && whatsapp.session) {
-				sessionCfg = JSON.parse(dbSession.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);

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,

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(
+routes.get("/whatsapp/:whatsappId", isAuth, WhatsAppController.show);
-	"/whatsapp/session/:sessionId",
-	isAuth,
-	WhatsAppSessionController.show
-);
 
-routes.put(
+routes.put("/whatsapp/:whatsappId", isAuth, WhatsAppController.update);
-	"/whatsapp/session/:sessionId",
-	isAuth,
-	WhatsAppSessionController.update
-);
 
-routes.delete(
+routes.delete("/whatsapp/:whatsappId", isAuth, WhatsAppController.delete);
-	"/whatsapp/session/:sessionId",
-	isAuth,
-	WhatsAppSessionController.delete
-);
 
 module.exports = routes;

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;

backend/src/services/wbotMessageListener.js

@@ -132,8 +132,8 @@ const handleMessage = async (msg, ticket, contact) => {
 	});
 };
 
-const wbotMessageListener = dbSession => {
+const wbotMessageListener = whatsapp => {
-	const wbot = getWbot(dbSession.id);
+	const wbot = getWbot(whatsapp.id);
 	const io = getIO();
 
 	wbot.on("message_create", async msg => {

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 sessionName = whatsapp.name;
-	const wbot = getWbot(dbSession.id);
+	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);
+							wbotMessageListener(whatsapp);
-							wbotMonitor(dbSession);
+							wbotMonitor(whatsapp);
 						})
 						.catch(err => {
 							Sentry.captureException(err);

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 {
+import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core";
-	Dialog,
-	DialogContent,
-	Paper,
-	Typography,
-	DialogTitle,
-} from "@material-ui/core";
 import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
 
-const QrcodeModal = ({ open, onClose, session }) => {
+const QrcodeModal = ({ open, onClose, whatsAppId }) => {
-	if (session) {
+	const [qrCode, setQrCode] = useState("");
-		return (
+
-			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
+	useEffect(() => {
-				<DialogTitle>{session.name}</DialogTitle>
+		const fetchSession = async () => {
-				<DialogContent>
+			try {
-					<Paper elevation={0}>
+				const { data } = await api.get(`/whatsapp/${whatsAppId}`);
-						<Typography color="primary" gutterBottom>
+				setQrCode(data.qrcode);
-							{i18n.t("qrCode.message")}
+			} catch (err) {
-						</Typography>
+				console.log(err);
-						{session.qrcode ? (
+				if (err.response && err.response.data && err.response.data.error) {
-							<QRCode value={session.qrcode} size={256} />
+					toast.error(err.response.data.error);
-						) : (
+				}
-							<span>Waiting for QR Code</span>
+			}
-						)}
+		};
-					</Paper>
+		fetchSession();
-				</DialogContent>
+	}, [whatsAppId]);
-			</Dialog>
+
-		);
+	useEffect(() => {
-	} else {
+		if (!whatsAppId) return;
-		return null;
+		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);

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}`);
+				const { data } = await api.get(`whatsapp/${whatsAppId}`);
-				setSession(data);
+				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) {
+			if (whatsAppId) {
-				await api.put(`/whatsapp/session/${sessionId}`, values);
+				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
+							<FormControlLabel
-								as={TextField}
+								control={
-								label="Status"
+									<Field
-								name="status"
+										as={Switch}
-								disabled
+										color="primary"
-								variant="outlined"
+										name="default"
-								margin="dense"
+										checked={values.default}
+									/>
+								}
+								label="Default"
 							/>
 						</DialogContent>
 						<DialogActions>
@@ -165,4 +179,4 @@ const SessionModal = ({ open, onClose, sessionId }) => {
 	);
 };
 
-export default SessionModal;
+export default React.memo(WhatsAppModal);

frontend/src/components/_layout/MainListItems.js

@@ -42,8 +42,8 @@ const MainListItems = () => {
 		<div>
 			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
 			<ListItemLink
-				to="/connection"
+				to="/whatsapps"
-				primary={i18n.t("mainDrawer.listItems.connection")}
+				primary="WhatsApps"
 				icon={<SyncAltIcon />}
 			/>
 			<ListItemLink

frontend/src/pages/Connection/index.js

@@ -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;

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 />

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;

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 />