Feat: add and edit contact in frontend

backend/src/controllers/ContactController.js

@@ -5,7 +5,7 @@ const ContactCustomField = require("../models/ContactCustomField");
 
 // const Message = require("../models/Message");
 // const Sequelize = require("sequelize");
-// const { getIO } = require("../libs/socket");
+const { getIO } = require("../libs/socket");
 // const { getWbot } = require("../libs/wbot");
 
 exports.index = async (req, res) => {
@@ -36,7 +36,7 @@ exports.index = async (req, res) => {
 
 exports.store = async (req, res) => {
 	// const wbot = getWbot();
-	// const io = getIO();
+	const io = getIO();
 	// const { number, name } = req.body;
 
 	// const result = await wbot.isRegisteredUser(`55${number}@c.us`);
@@ -48,9 +48,14 @@ exports.store = async (req, res) => {
 	// }
 	// const profilePicUrl = await wbot.getProfilePicUrl(`55${number}@c.us`);
 
-	const { number, name } = await Contact.create(req.body);
+	const contact = await Contact.create(req.body);
 
-	res.status(200).json({ number, name });
+	io.emit("contact", {
+		action: "create",
+		contact: contact,
+	});
+
+	res.status(200).json(contact);
 };
 
 exports.show = async (req, res) => {
@@ -67,3 +72,24 @@ exports.show = async (req, res) => {
 		extraInfo,
 	});
 };
+
+exports.update = async (req, res) => {
+	const io = getIO();
+
+	const { contactId } = req.params;
+
+	const contact = await Contact.findByPk(contactId);
+
+	if (!contact) {
+		return res.status(400).json({ error: "No contact found with this ID" });
+	}
+
+	await contact.update(req.body);
+
+	io.emit("contact", {
+		action: "update",
+		contact: contact,
+	});
+
+	res.status(200).json(contact);
+};

backend/src/database/migrations/20200723202116-add-email-field-to-contacts.js

@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.addColumn("Contacts", "email", {
+			type: Sequelize.STRING,
+			allowNull: false,
+			defaultValue: "",
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.removeColumn("Contacts", "email");
+	},
+};

backend/src/models/Contact.js

@@ -6,6 +6,7 @@ class Contact extends Sequelize.Model {
 			{
 				name: { type: Sequelize.STRING },
 				number: { type: Sequelize.STRING },
+				email: { type: Sequelize.STRING, allowNull: false, defaultValue: "" },
 				profilePicUrl: { type: Sequelize.STRING },
 			},
 			{

backend/src/routes/contacts.js

@@ -11,6 +11,6 @@ routes.get("/contacts/:contactId", isAuth, ContactController.show);
 
 routes.post("/contacts", isAuth, ContactController.store);
 
-// routes.put("/contacts/contactId", isAuth, ContactController.index);
+routes.put("/contacts/:contactId", isAuth, ContactController.update);
 
 module.exports = routes;

frontend/src/pages/Contacts/ContactModal.js

@@ -36,27 +36,27 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const AddContactModal = ({
+const ContactModal = ({
 	modalOpen,
 	setModalOpen,
 	handleAddContact,
+	onClose,
 	contactId,
 }) => {
 	const classes = useStyles();
-
-	const [contact, setContact] = useState({
-		id: "",
+	const initialState = {
 		name: "",
 		number: "",
 		email: "",
 		extraInfo: [
 			{
-				id: "",
 				name: "",
 				value: "",
 			},
 		],
-	});
+	};
+
+	const [contact, setContact] = useState(initialState);
 
 	useEffect(() => {
 		const fetchContact = async () => {
@@ -69,22 +69,22 @@ const AddContactModal = ({
 	}, [contactId]);
 
 	const handleClose = () => {
-		setModalOpen(false);
-		setContact({
-			id: "",
-			name: "",
-			number: "",
-			email: "",
-			extraInfo: [
-				{
-					id: "",
-					name: "",
-					value: "",
-				},
-			],
-		});
+		onClose();
+		setContact(initialState);
 	};
 
+	const handleSaveContact = async values => {
+		if (contactId) {
+			await api.put(`/contacts/${contactId}`, values);
+		} else {
+			await api.post("/contacts", values);
+		}
+		handleClose();
+	};
+
+	console.log(contact);
+	console.log("id", contactId);
+
 	return (
 		<div className={classes.root}>
 			<Dialog
@@ -101,7 +101,7 @@ const AddContactModal = ({
 					enableReinitialize={true}
 					onSubmit={(values, { setSubmitting }) => {
 						setTimeout(() => {
-							alert(JSON.stringify(values, null, 2));
+							handleSaveContact(values);
 							setSubmitting(false);
 						}, 400);
 					}}
@@ -126,7 +126,7 @@ const AddContactModal = ({
 								<TextField
 									label="Nome"
 									name="name"
-									value={values.name}
+									value={values.name || ""}
 									onChange={handleChange}
 									variant="outlined"
 									margin="dense"
@@ -136,7 +136,7 @@ const AddContactModal = ({
 								<TextField
 									label="Número do Whatsapp"
 									name="number"
-									value={values.number}
+									value={values.number || ""}
 									onChange={handleChange}
 									placeholder="Ex: 13912344321"
 									variant="outlined"
@@ -147,7 +147,7 @@ const AddContactModal = ({
 									<TextField
 										label="Email"
 										name="email"
-										value={values.email}
+										value={values.email || ""}
 										onChange={handleChange}
 										placeholder="Endereço de Email"
 										fullWidth
@@ -159,7 +159,7 @@ const AddContactModal = ({
 									style={{ marginBottom: 8, marginTop: 12 }}
 									variant="subtitle1"
 								>
-									Informações extras
+									Informações adicionais
 								</Typography>
 
 								<FieldArray name="extraInfo">
@@ -175,7 +175,7 @@ const AddContactModal = ({
 														<TextField
 															label="Nome do campo"
 															name={`extraInfo[${index}].name`}
-															value={info.name}
+															value={info.name || ""}
 															onChange={handleChange}
 															variant="outlined"
 															margin="dense"
@@ -185,7 +185,7 @@ const AddContactModal = ({
 														<TextField
 															label="Valor"
 															name={`extraInfo[${index}].value`}
-															value={info.value}
+															value={info.value || ""}
 															onChange={handleChange}
 															variant="outlined"
 															margin="dense"
@@ -230,4 +230,4 @@ const AddContactModal = ({
 	);
 };
 
-export default AddContactModal;
+export default ContactModal;

frontend/src/pages/Contacts/ContactsList.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -100,6 +101,33 @@ const Contacts = () => {
 		return () => clearTimeout(delayDebounceFn);
 	}, [searchParam, page, token, rowsPerPage]);
 
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+		socket.on("contact", data => {
+			if (data.action === "update" || data.action === "create") {
+				updateContacts(data.contact);
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	const updateContacts = contact => {
+		setContacts(prevState => {
+			const contactIndex = prevState.findIndex(c => c.id === contact.id);
+
+			if (contactIndex === -1) {
+				return [contact, ...prevState];
+			}
+			const aux = [...prevState];
+			aux[contactIndex] = contact;
+			return aux;
+		});
+	};
+
 	const handleChangePage = (event, newPage) => {
 		setPage(newPage);
 	};
@@ -119,6 +147,7 @@ const Contacts = () => {
 	};
 
 	const handleClose = () => {
+		setSelectedContactId(null);
 		setModalOpen(false);
 	};