feat: continue session handle in frontend

backend/src/controllers/WhatsAppSessionController.js

@@ -30,7 +30,7 @@ exports.store = async (req, res) => {
 		session: dbSession,
 	});
 
-	return res.status(200).json({ message: "Session created sucessfully." });
+	return res.status(200).json(dbSession);
 };
 
 exports.show = async (req, res) => {

frontend/src/components/QrcodeModal/index.js

@@ -1,37 +1,37 @@
-import React from "react";
+import React from "react";
-import QRCode from "qrcode.react";
+import QRCode from "qrcode.react";
-
+
-import {
+import {
-	Dialog,
+	Dialog,
-	DialogContent,
+	DialogContent,
-	Paper,
+	Paper,
-	Typography,
+	Typography,
-	DialogTitle,
+	DialogTitle,
-} from "@material-ui/core";
+} from "@material-ui/core";
-import { i18n } from "../../translate/i18n";
+import { i18n } from "../../translate/i18n";
-
+
-const QrcodeModal = ({ open, onClose, session }) => {
+const QrcodeModal = ({ open, onClose, session }) => {
-	if (session) {
+	if (session) {
-		return (
+		return (
-			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
+			<Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
-				<DialogTitle>{session.name}</DialogTitle>
+				<DialogTitle>{session.name}</DialogTitle>
-				<DialogContent>
+				<DialogContent>
-					<Paper elevation={0}>
+					<Paper elevation={0}>
-						<Typography color="primary" gutterBottom>
+						<Typography color="primary" gutterBottom>
-							{i18n.t("qrCode.message")}
+							{i18n.t("qrCode.message")}
-						</Typography>
+						</Typography>
-						{session.qrcode ? (
+						{session.qrcode ? (
-							<QRCode value={session.qrcode} size={256} />
+							<QRCode value={session.qrcode} size={256} />
-						) : (
+						) : (
-							<span>loading</span>
+							<span>Waiting for QR Code</span>
-						)}
+						)}
-					</Paper>
+					</Paper>
-				</DialogContent>
+				</DialogContent>
-			</Dialog>
+			</Dialog>
-		);
+		);
-	} else {
+	} else {
-		return null;
+		return null;
-	}
+	}
-};
+};
-
+
-export default QrcodeModal;
+export default QrcodeModal;

frontend/src/components/SessionModal/index.js

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from "react";
+import QRCode from "qrcode.react";
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
+
+import {
+	Dialog,
+	DialogContent,
+	Paper,
+	Typography,
+	DialogTitle,
+	Button,
+	DialogActions,
+	CircularProgress,
+	TextField,
+} from "@material-ui/core";
+
+import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	textField: {
+		marginRight: theme.spacing(1),
+		flex: 1,
+	},
+
+	btnWrapper: {
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
+}));
+
+const SessionSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+});
+
+const SessionModal = ({ open, onClose, sessionId }) => {
+	const classes = useStyles();
+	const initialState = {
+		name: "",
+		status: "",
+	};
+	const [session, setSession] = useState(initialState);
+
+	useEffect(() => {
+		const fetchSession = async () => {
+			if (!sessionId) return;
+
+			try {
+				const { data } = await api.get(`whatsapp/session/${sessionId}`);
+				setSession(data);
+			} catch (err) {
+				console.log(err);
+				if (err.response && err.response.data && err.response.data.error) {
+					toast.error(err.response.data.error);
+				}
+			}
+		};
+		fetchSession();
+	}, [sessionId]);
+
+	const handleSaveSession = async values => {
+		try {
+			if (sessionId) {
+				await api.put(`/whatsapp/session/${sessionId}`, values);
+			} else {
+				await api.post("/whatsapp/session", values);
+			}
+			toast.success("Session created!");
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+		handleClose();
+	};
+
+	const handleClose = () => {
+		onClose();
+		setSession(initialState);
+	};
+
+	return (
+		<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+			<DialogTitle>Edit Session</DialogTitle>
+			<Formik
+				initialValues={session}
+				enableReinitialize={true}
+				validationSchema={SessionSchema}
+				onSubmit={(values, actions) => {
+					setTimeout(() => {
+						handleSaveSession(values);
+						actions.setSubmitting(false);
+					}, 400);
+				}}
+			>
+				{({ touched, errors, isSubmitting }) => (
+					<Form>
+						<DialogContent dividers>
+							<Field
+								as={TextField}
+								label="Name"
+								autoFocus
+								name="name"
+								error={touched.name && Boolean(errors.name)}
+								helperText={touched.name && errors.name}
+								variant="outlined"
+								margin="dense"
+								className={classes.textField}
+							/>
+							<Field
+								as={TextField}
+								label="Status"
+								name="status"
+								disabled
+								variant="outlined"
+								margin="dense"
+							/>
+						</DialogContent>
+						<DialogActions>
+							<Button
+								onClick={handleClose}
+								color="secondary"
+								disabled={isSubmitting}
+								variant="outlined"
+							>
+								Cancel
+							</Button>
+							<Button
+								type="submit"
+								color="primary"
+								disabled={isSubmitting}
+								variant="contained"
+								className={classes.btnWrapper}
+							>
+								Save
+								{isSubmitting && (
+									<CircularProgress
+										size={24}
+										className={classes.buttonProgress}
+									/>
+								)}
+							</Button>
+						</DialogActions>
+					</Form>
+				)}
+			</Formik>
+		</Dialog>
+	);
+};
+
+export default SessionModal;

frontend/src/pages/Connection/index.js

@@ -23,7 +23,8 @@ import Title from "../../components/Title";
 import TableRowSkeleton from "../../components/TableRowSkeleton";
 
 import api from "../../services/api";
-import QrcodeModal from "../../components/QrcodeModal";
+import SessionModal from "../../components/SessionModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
 
 const reducer = (state, action) => {
 	if (action.type === "LOAD_SESSIONS") {
@@ -47,8 +48,6 @@ const reducer = (state, action) => {
 	if (action.type === "DELETE_SESSION") {
 		const sessionId = action.payload;
 
-		console.log("cai aqui", sessionId);
-
 		const sessionIndex = state.findIndex(s => s.id === sessionId);
 		if (sessionIndex !== -1) {
 			state.splice(sessionIndex, 1);
@@ -98,8 +97,11 @@ const WhatsAuth = () => {
 
 	const [sessions, dispatch] = useReducer(reducer, []);
 
-	const [qrModalOpen, setQrModalOpen] = useState(false);
+	const [sessionModalOpen, setSessionModalOpen] = useState(false);
+	// const [sessionModalOpen, setSessionModalOpen] = useState(false);
 	const [selectedSession, setSelectedSession] = useState(null);
+	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+	// const [deletingSession, setDeletingSession] = useState(null);
 
 	useEffect(() => {
 		const fetchSession = async () => {
@@ -150,46 +152,55 @@ const WhatsAuth = () => {
 		}
 	};
 
-	console.log(sessions);
+	const handleOpenSessionModal = session => {
-
+		setSelectedSession(null);
-	const handleOpenQrMoral = session => {
+		setSessionModalOpen(true);
-		setQrModalOpen(true);
-		setSelectedSession(session);
 	};
 
-	const handleCloseQrModal = () => {
+	const handleCloseSessionModal = () => {
-		setQrModalOpen(false);
+		setSessionModalOpen(false);
 		setSelectedSession(null);
 	};
 
+	const handleEditUser = session => {
+		setSelectedSession(session);
+		setSessionModalOpen(true);
+	};
+
+	const handleDeleteSession = async sessionId => {
+		try {
+			await api.delete(`/whatsapp/session/${sessionId}`);
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+	};
+
 	return (
 		<MainContainer>
-			<QrcodeModal
+			<ConfirmationModal
-				open={qrModalOpen}
+				title={selectedSession && `Delete ${selectedSession.name}?`}
-				onClose={handleCloseQrModal}
+				open={confirmModalOpen}
-				aria-labelledby="form-dialog-title"
+				setOpen={setConfirmModalOpen}
-				session={selectedSession}
+				onConfirm={e => handleDeleteSession(selectedSession.id)}
-			/>
-			{/* <Dialog
-				open={qrModalOpen}
-				onClose={handleCloseQrModal}
-				maxWidth="lg"
-				scroll="paper"
 			>
-				<DialogTitle>Qr Code</DialogTitle>
+				Are you sure? It cannot be reverted.
-				<DialogContent>
+			</ConfirmationModal>
-					<Paper className={classes.paper}>
+			<SessionModal
-						<Qrcode qrCode={selectedSession && selectedSession.qrcode} />
+				open={sessionModalOpen}
-					</Paper>
+				onClose={handleCloseSessionModal}
-				</DialogContent>
+				aria-labelledby="form-dialog-title"
-			</Dialog> */}
+				sessionId={selectedSession && selectedSession.id}
+			/>
 			<MainHeader>
 				<Title>Connections</Title>
 				<MainHeaderButtonsWrapper>
 					<Button
 						variant="contained"
 						color="primary"
-						// onClick={handleOpenUserModal}
+						onClick={handleOpenSessionModal}
 					>
 						Add Whatsapp
 					</Button>
@@ -216,7 +227,7 @@ const WhatsAuth = () => {
 							<>
 								{sessions &&
 									sessions.length > 0 &&
-									sessions.map(session => (
+									sessions.map((session, index) => (
 										<TableRow key={session.id}>
 											<TableCell align="center">{session.name}</TableCell>
 											<TableCell align="center">
@@ -225,7 +236,7 @@ const WhatsAuth = () => {
 														size="small"
 														variant="contained"
 														color="primary"
-														onClick={() => handleOpenQrMoral(session)}
+														onClick={() => handleEditUser(session)}
 													>
 														QR CODE
 													</Button>
@@ -247,8 +258,8 @@ const WhatsAuth = () => {
 												<IconButton
 													size="small"
 													onClick={e => {
-														// setConfirmModalOpen(true);
+														setConfirmModalOpen(true);
-														// setDeletingUser(user);
+														setSelectedSession(session);
 													}}
 												>
 													<DeleteOutline />

frontend/src/pages/Users/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useReducer } from "react";
-
+import { toast } from "react-toastify";
 import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -87,10 +87,9 @@ const Users = () => {
 	const [loading, setLoading] = useState(false);
 	const [pageNumber, setPageNumber] = useState(1);
 	const [hasMore, setHasMore] = useState(false);
-	const [selectedUserId, setSelectedUserId] = useState(null);
+	const [selectedUser, setSelectedUser] = useState(null);
 	const [userModalOpen, setUserModalOpen] = useState(false);
 	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-	const [deletingUser, setDeletingUser] = useState(null);
 	const [searchParam, setSearchParam] = useState("");
 	const [users, dispatch] = useReducer(reducer, []);
 
@@ -112,7 +111,9 @@ const Users = () => {
 					setLoading(false);
 				} catch (err) {
 					console.log(err);
-					alert(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
 				}
 			};
 			fetchUsers();
@@ -138,12 +139,12 @@ const Users = () => {
 	}, []);
 
 	const handleOpenUserModal = () => {
-		setSelectedUserId(null);
+		setSelectedUser(null);
 		setUserModalOpen(true);
 	};
 
 	const handleCloseUserModal = () => {
-		setSelectedUserId(null);
+		setSelectedUser(null);
 		setUserModalOpen(false);
 	};
 
@@ -151,18 +152,22 @@ const Users = () => {
 		setSearchParam(event.target.value.toLowerCase());
 	};
 
-	const handleEditUser = userId => {
+	const handleEditUser = user => {
-		setSelectedUserId(userId);
+		setSelectedUser(user);
 		setUserModalOpen(true);
 	};
 
 	const handleDeleteUser = async userId => {
 		try {
 			await api.delete(`/users/${userId}`);
+			toast.success("User deleted!");
 		} catch (err) {
-			alert(err);
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
-		setDeletingUser(null);
+		setSelectedUser(null);
 		setSearchParam("");
 		setPageNumber(1);
 	};
@@ -182,10 +187,10 @@ const Users = () => {
 	return (
 		<MainContainer>
 			<ConfirmationModal
-				title={deletingUser && `Delete ${deletingUser.name}?`}
+				title={selectedUser && `Delete ${selectedUser.name}?`}
 				open={confirmModalOpen}
 				setOpen={setConfirmModalOpen}
-				onConfirm={e => handleDeleteUser(deletingUser.id)}
+				onConfirm={e => handleDeleteUser(selectedUser.id)}
 			>
 				Are you sure? It canoot be reverted.
 			</ConfirmationModal>
@@ -193,7 +198,7 @@ const Users = () => {
 				open={userModalOpen}
 				onClose={handleCloseUserModal}
 				aria-labelledby="form-dialog-title"
-				userId={selectedUserId}
+				userId={selectedUser && selectedUser.id}
 			/>
 			<MainHeader>
 				<Title>Usuários</Title>
@@ -247,7 +252,7 @@ const Users = () => {
 										<TableCell align="right">
 											<IconButton
 												size="small"
-												onClick={() => handleEditUser(user.id)}
+												onClick={() => handleEditUser(user)}
 											>
 												<EditIcon />
 											</IconButton>
@@ -256,7 +261,7 @@ const Users = () => {
 												size="small"
 												onClick={e => {
 													setConfirmModalOpen(true);
-													setDeletingUser(user);
+													setSelectedUser(user);
 												}}
 											>
 												<DeleteOutlineIcon />