feat: option to handle whatsapp session on app

frontend/src/components/Qrcode/index.js

@@ -10,7 +10,7 @@ const Qrcode = ({ qrCode }) => {
 			<Typography color="primary" gutterBottom>
 				{i18n.t("qrCode.message")}
 			</Typography>
-			<QRCode value={qrCode} size={256} />
+			{qrCode ? <QRCode value={qrCode} size={256} /> : <span>loading</span>}
 		</div>
 	);
 };

frontend/src/components/SessionInfo/index.js

@@ -1,22 +1,46 @@
 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 { i18n } from "../../translate/i18n";
+import api from "../../services/api";
 
 const SessionInfo = ({ session }) => {
 	console.log(session);
+
+	const handleDisconectSession = async () => {
+		try {
+			await api.delete("/whatsapp/session/1");
+		} catch (err) {
+			console.log(err);
+		}
+	};
+
 	return (
-		<div>
-			<Typography component="h2" variant="h6" color="primary" gutterBottom>
-				{`${i18n.t("sessionInfo.status")}${session.status}`}
+		<>
+			<Typography variant="h6" color="primary">
+				{`${i18n.t("sessionInfo.status")} ${session.status}`}
 			</Typography>
-			<Typography component="p" variant="h6">
+			<Typography variant="body2" gutterBottom>
+				{`${i18n.t("sessionInfo.updatedAt")}`}{" "}
+				{session.updatedAt &&
+					format(parseISO(session.updatedAt), "dd/mm/yy HH:mm")}
+			</Typography>
+			<Button
+				color="primary"
+				variant="contained"
+				onClick={handleDisconectSession}
+			>
+				{`${i18n.t("sessionInfo.buttons.disconnect")}`}
+			</Button>
+			{/* <Typography component="p" variant="h6">
 				{`${i18n.t("sessionInfo.battery")}${session.battery}%`}
 			</Typography>
 			<Typography color="textSecondary">
 				{`${i18n.t("sessionInfo.charging")}${session.plugged} `}
-			</Typography>
-		</div>
+			</Typography> */}
+		</>
 	);
 };
 

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -5,7 +5,6 @@ import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
 
-import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import SessionInfo from "../../components/SessionInfo";
 import Qrcode from "../../components/Qrcode";
@@ -13,19 +12,19 @@ import Qrcode from "../../components/Qrcode";
 const useStyles = makeStyles(theme => ({
 	root: {
 		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
 		padding: theme.spacing(4),
 	},
 
-	content: {
-		flexGrow: 1,
-		overflow: "auto",
-	},
 	paper: {
 		padding: theme.spacing(2),
 		display: "flex",
+		width: 400,
 		overflow: "auto",
-		alignItems: "center",
 		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
 	},
 	fixedHeight: {
 		height: 640,
@@ -42,9 +41,9 @@ const WhatsAuth = () => {
 	useEffect(() => {
 		const fetchSession = async () => {
 			try {
-				const res = await api.get("/whatsapp/session/1");
-				setQrCode(res.data.qrcode);
-				setSession(res.data);
+				const { data } = await api.get("/whatsapp/session/1");
+				setQrCode(data.qrcode);
+				setSession(data);
 			} catch (err) {
 				console.log(err);
 			}
@@ -52,16 +51,25 @@ const WhatsAuth = () => {
 		fetchSession();
 	}, []);
 
+	console.log("session", session);
+
 	useEffect(() => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("qrcode", data => {
+		socket.on("session", data => {
 			if (data.action === "update") {
 				setQrCode(data.qr);
+				setSession(data.session);
 			}
 		});
 
-		socket.on("whats_auth", data => {
+		socket.on("session", data => {
+			if (data.action === "update") {
+				setSession(data.session);
+			}
+		});
+
+		socket.on("session", data => {
 			if (data.action === "authentication") {
 				setQrCode("");
 				setSession(data.session);
@@ -69,6 +77,12 @@ const WhatsAuth = () => {
 			}
 		});
 
+		socket.on("session", data => {
+			if (data.action === "logout") {
+				setSession(data.session);
+			}
+		});
+
 		return () => {
 			socket.disconnect();
 		};
@@ -76,21 +90,15 @@ const WhatsAuth = () => {
 
 	return (
 		<div className={classes.root}>
-			<Grid container spacing={3}>
-				{session.status === "pending" ? (
-					<Grid item xs={12}>
-						<Paper className={classes.paper}>
-							<Qrcode qrCode={qrCode} />
-						</Paper>
-					</Grid>
-				) : (
-					<Grid item xs={12}>
-						<Paper className={classes.paper}>
-							<SessionInfo session={session} />
-						</Paper>
-					</Grid>
-				)}
-			</Grid>
+			{session && session.status === "disconnected" ? (
+				<Paper className={classes.paper}>
+					<Qrcode qrCode={qrCode} />
+				</Paper>
+			) : (
+				<Paper className={classes.paper}>
+					<SessionInfo session={session} />
+				</Paper>
+			)}
 		</div>
 	);
 };

frontend/src/translate/languages/en.js

@@ -45,6 +45,10 @@ const messages = {
 				status: "Status:",
 				battery: "Battery:",
 				charging: "Loading:",
+				updatedAt: "Updated at:",
+				buttons: {
+					disconnect: "Disconnect",
+				},
 			},
 			qrCode: {
 				message: "Read QrCode to start the session",

frontend/src/translate/languages/pt.js

@@ -45,6 +45,10 @@ const messages = {
 				status: "Status: ",
 				battery: "Bateria: ",
 				charging: "Carregando: ",
+				updatedAt: "Atualizado em:",
+				buttons: {
+					disconnect: "Desconectar",
+				},
 			},
 			qrCode: {
 				message: "Leia o QrCode para iniciar a sessão",