First github Commit

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -1,12 +1,17 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
+import api from "../../util/api";
 import clsx from "clsx";
 import MainDrawer from "../../components/Layout/MainDrawer";
+import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
 
 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
+import Bateryinfo from "./components/Bateryinfo";
+import Qrcode from "./components/Qrcode";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -41,6 +46,47 @@ const useStyles = makeStyles(theme => ({
 
 const WhatsAuth = () => {
 	const classes = useStyles();
+	const history = useHistory();
+
+	const [qrCode, setQrCode] = useState("");
+	const [session, setSession] = useState({});
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const res = await api.get("/whatsapp/session");
+				setQrCode(res.data.qrcode);
+				setSession(res.data);
+			} catch (err) {
+				console.log(err);
+			}
+		};
+		fetchSession();
+	}, []);
+
+	useEffect(() => {
+		const socket = openSocket("http://localhost:8080");
+
+		socket.on("qrcode", data => {
+			if (data.action === "update") {
+				setQrCode(data.qr);
+			}
+		});
+
+		socket.on("whats_auth", data => {
+			if (data.action === "authentication") {
+				history.push("/chat");
+				setQrCode("");
+				setSession(data.session);
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	console.log(session);
 
 	const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
 
@@ -52,16 +98,20 @@ const WhatsAuth = () => {
 						<div className={classes.appBarSpacer} />
 						<Container maxWidth="lg" className={classes.container}>
 							<Grid container spacing={3}>
-								<Grid item xs={12}>
-									<Paper className={classes.paper}>
-										<h4>Status da conexão</h4>
-									</Paper>
-								</Grid>
-								<Grid item xs={12}>
-									<Paper className={fixedHeightPaper}>
-										<h1>QR Code</h1>
-									</Paper>
-								</Grid>
+								{session.status === "pending" ? (
+									<Grid item xs={6}>
+										<Paper className={classes.paper}>
+											<Qrcode qrCode={qrCode} />
+										</Paper>
+									</Grid>
+								) : (
+									<Grid item xs={6}>
+										<Paper className={classes.paper}>
+											<Bateryinfo sessio={session} />
+										</Paper>
+									</Grid>
+								)}
+
 								{/* <Grid item xs={12} md={4} lg={3}>
 									<Paper className={fixedHeightPaper}>
 										<h1>paper2</h1>

frontend/src/pages/WhatsAuth/components/Bateryinfo.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Link from "@material-ui/core/Link";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+	main: {
+		flex: 1,
+	},
+});
+
+const Bateryinfo = ({ session }) => {
+	const classes = useStyles();
+	return (
+		<React.Fragment>
+			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+				Bateria
+			</Typography>
+			<Typography component="p" variant="h6">
+				{(session && session.baterry) || "Não disponível"}
+			</Typography>
+			<Typography color="textSecondary" className={classes.main}>
+				Carregando: {(session && session.plugged) || "Não disponível"}
+			</Typography>
+			<div>
+				<Link color="primary" href="#">
+					Verificar bateria
+				</Link>
+			</div>
+		</React.Fragment>
+	);
+};
+
+export default Bateryinfo;

frontend/src/pages/WhatsAuth/components/Qrcode.js

@@ -0,0 +1,25 @@
+import React from "react";
+import QRCode from "qrcode.react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+	main: {
+		flex: 1,
+	},
+});
+
+const Qrcode = ({ qrCode }) => {
+	const classes = useStyles();
+
+	return (
+		<div>
+			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+				Leia o QrCode para iniciar a sessão
+			</Typography>
+			<QRCode value={qrCode} size={256} />
+		</div>
+	);
+};
+
+export default Qrcode;