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