From 6d4e2a60a9f02cf1f7445bf6d84379ad92274f5a Mon Sep 17 00:00:00 2001 From: canove Date: Thu, 23 Jul 2020 18:09:45 -0300 Subject: [PATCH] Feat: add and edit contact in frontend --- backend/src/controllers/ContactController.js | 34 +++++++++-- ...00723202116-add-email-field-to-contacts.js | 15 +++++ backend/src/models/Contact.js | 1 + backend/src/routes/contacts.js | 2 +- frontend/src/pages/Contacts/ContactModal.js | 56 +++++++++---------- frontend/src/pages/Contacts/ContactsList.js | 29 ++++++++++ 6 files changed, 104 insertions(+), 33 deletions(-) create mode 100644 backend/src/database/migrations/20200723202116-add-email-field-to-contacts.js diff --git a/backend/src/controllers/ContactController.js b/backend/src/controllers/ContactController.js index 5d6bca6..a5fdf57 100644 --- a/backend/src/controllers/ContactController.js +++ b/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); +}; diff --git a/backend/src/database/migrations/20200723202116-add-email-field-to-contacts.js b/backend/src/database/migrations/20200723202116-add-email-field-to-contacts.js new file mode 100644 index 0000000..a8ce059 --- /dev/null +++ b/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"); + }, +}; diff --git a/backend/src/models/Contact.js b/backend/src/models/Contact.js index 79ea4dd..d4d77c8 100644 --- a/backend/src/models/Contact.js +++ b/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 }, }, { diff --git a/backend/src/routes/contacts.js b/backend/src/routes/contacts.js index 57eb3c2..74255d7 100644 --- a/backend/src/routes/contacts.js +++ b/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; diff --git a/frontend/src/pages/Contacts/ContactModal.js b/frontend/src/pages/Contacts/ContactModal.js index c77ed15..c44888c 100644 --- a/frontend/src/pages/Contacts/ContactModal.js +++ b/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 (
{ setTimeout(() => { - alert(JSON.stringify(values, null, 2)); + handleSaveContact(values); setSubmitting(false); }, 400); }} @@ -126,7 +126,7 @@ const AddContactModal = ({ - Informações extras + Informações adicionais @@ -175,7 +175,7 @@ const AddContactModal = ({ { 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); };