feat: new connections page to handle multiple whats

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"