Create custom field table and assocs

backend/src/controllers/ContactController.js

@@ -1,6 +1,8 @@
 const Sequelize = require("sequelize");
 
 const Contact = require("../models/Contact");
+const ContactCustomField = require("../models/ContactCustomField");
+
 // const Message = require("../models/Message");
 // const Sequelize = require("sequelize");
 // const { getIO } = require("../libs/socket");
@@ -50,3 +52,18 @@ exports.store = async (req, res) => {
 
 	res.status(200).json({ number, name });
 };
+
+exports.show = async (req, res) => {
+	const { contactId } = req.params;
+
+	const { id, name, number, extraInfo } = await Contact.findByPk(contactId, {
+		include: [{ model: ContactCustomField, as: "extraInfo" }],
+	});
+
+	res.status(200).json({
+		id,
+		name,
+		number,
+		extraInfo,
+	});
+};

backend/src/database/index.js

@@ -6,8 +6,9 @@ const Contact = require("../models/Contact");
 const Ticket = require("../models/Ticket");
 const Message = require("../models/Message");
 const Whatsapp = require("../models/Whatsapp");
+const ContactCustomField = require("../models/ContactCustomField");
 
-const models = [User, Contact, Ticket, Message, Whatsapp];
+const models = [User, Contact, Ticket, Message, Whatsapp, ContactCustomField];
 
 class Database {
 	constructor() {

backend/src/database/migrations/20200723200315-create-contacts-custom-fields.js

@@ -0,0 +1,41 @@
+"use strict";
+
+module.exports = {
+	up: (queryInterface, Sequelize) => {
+		return queryInterface.createTable("ContactCustomFields", {
+			id: {
+				type: Sequelize.INTEGER,
+				autoIncrement: true,
+				primaryKey: true,
+				allowNull: false,
+			},
+			name: {
+				type: Sequelize.STRING,
+				allowNull: false,
+			},
+			value: {
+				type: Sequelize.STRING,
+				allowNull: false,
+			},
+			contactId: {
+				type: Sequelize.INTEGER,
+				references: { model: "Contacts", key: "id" },
+				onUpdate: "CASCADE",
+				onDelete: "CASCADE",
+				allowNull: false,
+			},
+			createdAt: {
+				type: Sequelize.DATE,
+				allowNull: false,
+			},
+			updatedAt: {
+				type: Sequelize.DATE,
+				allowNull: false,
+			},
+		});
+	},
+
+	down: queryInterface => {
+		return queryInterface.dropTable("ContactCustomFields");
+	},
+};

backend/src/models/Contact.js

@@ -18,6 +18,10 @@ class Contact extends Sequelize.Model {
 
 	static associate(models) {
 		this.hasMany(models.Ticket, { foreignKey: "contactId" });
+		this.hasMany(models.ContactCustomField, {
+			foreignKey: "contactId",
+			as: "extraInfo",
+		});
 	}
 }
 

backend/src/models/ContactCustomField.js

@@ -0,0 +1,26 @@
+const Sequelize = require("sequelize");
+
+class ContactCustomField extends Sequelize.Model {
+	static init(sequelize) {
+		super.init(
+			{
+				name: { type: Sequelize.STRING },
+				value: { type: Sequelize.STRING },
+			},
+			{
+				sequelize,
+			}
+		);
+
+		return this;
+	}
+
+	static associate(models) {
+		this.belongsTo(models.Contact, {
+			foreignKey: "contactId",
+			as: "extraInfo",
+		});
+	}
+}
+
+module.exports = ContactCustomField;

backend/src/routes/contacts.js

@@ -7,6 +7,10 @@ const routes = express.Router();
 
 routes.get("/contacts", isAuth, ContactController.index);
 
+routes.get("/contacts/:contactId", isAuth, ContactController.show);
+
 routes.post("/contacts", isAuth, ContactController.store);
 
+// routes.put("/contacts/contactId", isAuth, ContactController.index);
+
 module.exports = routes;

frontend/src/pages/Contacts/ContactModal.js

@@ -15,6 +15,8 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 
 import { makeStyles } from "@material-ui/core/styles";
 
+import api from "../../util/api";
+
 const useStyles = makeStyles(theme => ({
 	root: {
 		display: "flex",
@@ -55,12 +57,34 @@ const AddContactModal = ({
 			},
 		],
 	});
+
+	useEffect(() => {
+		const fetchContact = async () => {
+			if (!contactId) return;
+			const res = await api.get(`/contacts/${contactId}`);
+			setContact(res.data);
+		};
+
+		fetchContact();
+	}, [contactId]);
+
 	const handleClose = () => {
 		setModalOpen(false);
+		setContact({
+			id: "",
+			name: "",
+			number: "",
+			email: "",
+			extraInfo: [
+				{
+					id: "",
+					name: "",
+					value: "",
+				},
+			],
+		});
 	};
 
-	useEffect(() => {}, [contactId]);
-
 	return (
 		<div className={classes.root}>
 			<Dialog
@@ -74,6 +98,7 @@ const AddContactModal = ({
 			>
 				<Formik
 					initialValues={contact}
+					enableReinitialize={true}
 					onSubmit={(values, { setSubmitting }) => {
 						setTimeout(() => {
 							alert(JSON.stringify(values, null, 2));

frontend/src/pages/Contacts/ContactsList.js

@@ -75,8 +75,9 @@ const Contacts = () => {
 	const [count, setCount] = useState(0);
 	const [searchParam, setSearchParam] = useState("");
 	const [contacts, setContacts] = useState([]);
+	const [selectedContactId, setSelectedContactId] = useState(null);
 
-	const [modalOpen, setModalOpen] = useState(true);
+	const [modalOpen, setModalOpen] = useState(false);
 
 	useEffect(() => {
 		setLoading(true);
@@ -113,6 +114,7 @@ const Contacts = () => {
 	};
 
 	const handleClickOpen = () => {
+		setSelectedContactId(null);
 		setModalOpen(true);
 	};
 
@@ -120,6 +122,11 @@ const Contacts = () => {
 		setModalOpen(false);
 	};
 
+	const hadleEditContact = contactId => {
+		setSelectedContactId(contactId);
+		setModalOpen(true);
+	};
+
 	return (
 		<Container className={classes.mainContainer}>
 			<ContactModal
@@ -127,6 +134,7 @@ const Contacts = () => {
 				onClose={handleClose}
 				setModalOpen={setModalOpen}
 				aria-labelledby="form-dialog-title"
+				contactId={selectedContactId}
 			></ContactModal>
 			<div className={classes.contactsHeader}>
 				<Typography variant="h5" gutterBottom>
@@ -176,7 +184,10 @@ const Contacts = () => {
 								<TableCell>{contact.number}</TableCell>
 								<TableCell>{contact.updatedAt}</TableCell>
 								<TableCell align="right">
-									<IconButton size="small">
+									<IconButton
+										size="small"
+										onClick={() => hadleEditContact(contact.id)}
+									>
 										<EditIcon />
 									</IconButton>
 									<IconButton size="small">