Create custom field table and assocs

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">