feat: new connections page to handle multiple whats

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);
-// };

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");

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;

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 => {

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 => {

frontend/src/components/Qrcode/index.js

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

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;

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"

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>
 	);
 };