feat: finished multiple whatsapps handle in frontend

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 {
-	Dialog,
-	DialogContent,
-	Paper,
-	Typography,
-	DialogTitle,
-} from "@material-ui/core";
+import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core";
 import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
 
-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>Waiting for QR Code</span>
-						)}
-					</Paper>
-				</DialogContent>
-			</Dialog>
-		);
-	} else {
-		return null;
-	}
+const QrcodeModal = ({ open, onClose, whatsAppId }) => {
+	const [qrCode, setQrCode] = useState("");
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const { data } = await api.get(`/whatsapp/${whatsAppId}`);
+				setQrCode(data.qrcode);
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
+		};
+		fetchSession();
+	}, [whatsAppId]);
+
+	useEffect(() => {
+		if (!whatsAppId) return;
+		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);