Migarte Contact Form to Formik lib

frontend/package.json

@@ -13,6 +13,7 @@
     "date-fns": "^2.14.0",
     "dotenv": "^8.2.0",
     "emoji-mart": "^3.0.0",
+    "formik": "^2.1.5",
     "mic-recorder-to-mp3": "^2.2.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
@@ -21,6 +22,7 @@
     "react-modal-image": "^2.5.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "shortid": "^2.2.15",
     "socket.io-client": "^2.3.0"
   },
   "scripts": {

frontend/src/pages/Contacts/ContactModal.js

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+
+import { Formik, FieldArray } from "formik";
+
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import Dialog from "@material-ui/core/Dialog";
-import FormControl from "@material-ui/core/FormControl";
+
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
-import FormHelperText from "@material-ui/core/FormHelperText";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
@@ -34,65 +34,32 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const AddContactModal = ({ modalOpen, setModalOpen, handleAddContact }) => {
+const AddContactModal = ({
+	modalOpen,
+	setModalOpen,
+	handleAddContact,
+	contactId,
+}) => {
 	const classes = useStyles();
-	const initialState = { name: "", number: "" };
-	const [contact, setContact] = useState(initialState);
-	const [newInfo, setNewInfo] = useState({
-		name: "",
-		value: "",
-	});
-	const [extraInfo, setExtraInfo] = useState([
-		{
-			id: "test1",
-			name: "Teste",
-			value: "testera",
-		},
-		{
-			id: "test2",
-			name: "Mesh Agent URL",
-			value: "http://10.10.10.2",
-		},
-		{
-			id: "test3",
-			name: "Atera Agent URL",
-			value: "http://10.10.10.5",
-		},
-	]);
 
+	const [contact, setContact] = useState({
+		id: "",
+		name: "",
+		number: "",
+		email: "",
+		extraInfo: [
+			{
+				id: "",
+				name: "",
+				value: "",
+			},
+		],
+	});
 	const handleClose = () => {
 		setModalOpen(false);
 	};
 
-	const handleChangeInput = e => {
+	useEffect(() => {}, [contactId]);
-		setContact({ ...contact, [e.target.name]: e.target.value });
-	};
-
-	const handleChangeExtraInfoInput = (e, id) => {
-		setExtraInfo(prevState => {
-			const index = prevState.findIndex(ext => ext.id === id);
-			if (index === -1) return prevState;
-			let aux = [...prevState];
-			aux[index] = { ...aux[index], [e.target.name]: e.target.value };
-			return aux;
-		});
-	};
-
-	console.log(extraInfo);
-
-	const handleAddExtraInfo = () => {
-		setExtraInfo(prevState => [newInfo, ...extraInfo]);
-	};
-
-	const handleDeleteExtraInfo = (extraId, id) => {
-		setExtraInfo(prevState => {
-			const index = prevState.findIndex(ext => ext.id === id);
-			if (index === -1) return prevState;
-			let aux = [...prevState];
-			aux.splice(index, 1);
-			return aux;
-		});
-	};
 
 	return (
 		<div className={classes.root}>
@@ -105,101 +72,134 @@ const AddContactModal = ({ modalOpen, setModalOpen, handleAddContact }) => {
 				scroll="paper"
 				className={classes.modal}
 			>
-				<DialogTitle id="form-dialog-title">Adicionar contato</DialogTitle>
+				<Formik
-				<DialogContent dividers>
+					initialValues={contact}
-					<Typography variant="subtitle1" gutterBottom>
+					onSubmit={(values, { setSubmitting }) => {
-						Dados do contato
+						setTimeout(() => {
-					</Typography>
+							alert(JSON.stringify(values, null, 2));
-					<TextField
+							setSubmitting(false);
-						id="contactName"
+						}, 400);
-						label="Nome"
+					}}
-						variant="outlined"
+				>
-						margin="dense"
+					{({
-						required
+						values,
-						className={classes.textField}
+						errors,
-					/>
+						touched,
-					<TextField
+						handleChange,
-						id="contactNumber"
+						handleBlur,
-						label="Número do Whatsapp"
+						handleSubmit,
-						placeholder="Ex: 13912344321"
+						isSubmitting,
-						variant="outlined"
+					}) => (
-						margin="dense"
+						<>
-						required
+							<DialogTitle id="form-dialog-title">
-					/>
+								Adicionar contato
-					<div>
+							</DialogTitle>
-						<TextField
+							<DialogContent dividers>
-							id="outlined-full-width"
+								<Typography variant="subtitle1" gutterBottom>
-							label="Email"
+									Dados do contato
-							placeholder="Endereço de Email"
+								</Typography>
-							fullWidth
-							margin="dense"
-							variant="outlined"
-						/>
-					</div>
-					<Typography
-						style={{ marginBottom: 8, marginTop: 12 }}
-						variant="subtitle1"
-					>
-						Informações extras
-					</Typography>
-					{extraInfo &&
-						extraInfo.map((extra, index) => (
-							<div key={extra.id} className={classes.extraAttr}>
 								<TextField
-									// id={extra.id}
+									label="Nome"
-									label="Nome do campo"
 									name="name"
-									value={extra.name}
+									value={values.name}
-									onChange={e => handleChangeExtraInfoInput(e, extra.id)}
+									onChange={handleChange}
 									variant="outlined"
 									margin="dense"
 									required
 									className={classes.textField}
 								/>
 								<TextField
-									// id={extra.id}
+									label="Número do Whatsapp"
-									label="Valor"
+									name="number"
-									name="value"
+									value={values.number}
-									value={extra.value}
+									onChange={handleChange}
-									onChange={e => handleChangeExtraInfoInput(e, extra.id)}
+									placeholder="Ex: 13912344321"
 									variant="outlined"
 									margin="dense"
 									required
 								/>
-								<IconButton
+								<div>
-									size="small"
+									<TextField
-									onClick={e => handleDeleteExtraInfo(extra.id, index)}
+										label="Email"
+										name="email"
+										value={values.email}
+										onChange={handleChange}
+										placeholder="Endereço de Email"
+										fullWidth
+										margin="dense"
+										variant="outlined"
+									/>
+								</div>
+								<Typography
+									style={{ marginBottom: 8, marginTop: 12 }}
+									variant="subtitle1"
 								>
-									<DeleteOutlineIcon />
+									Informações extras
-								</IconButton>
+								</Typography>
-							</div>
-						))}
 
-					<div className={classes.extraAttr}>
+								<FieldArray name="extraInfo">
-						<Button
+									{({ push, remove }) => (
-							style={{ flex: 1, marginTop: 8 }}
+										<>
-							variant="outlined"
+											{values.extraInfo &&
-							color="primary"
+												values.extraInfo.length > 0 &&
-							onClick={handleAddExtraInfo}
+												values.extraInfo.map((info, index) => (
-						>
+													<div
-							+ Adicionar atributo
+														className={classes.extraAttr}
-						</Button>
+														key={`${index}-info`}
-					</div>
+													>
-				</DialogContent>
+														<TextField
-				<DialogActions>
+															label="Nome do campo"
-					<Button onClick={handleClose} color="secondary">
+															name={`extraInfo[${index}].name`}
-						Cancelar
+															value={info.name}
-					</Button>
+															onChange={handleChange}
-					<Button
+															variant="outlined"
-						onClick={e => {
+															margin="dense"
-							handleAddContact(contact);
+															required
-							setContact(initialState);
+															className={classes.textField}
-						}}
+														/>
-						color="primary"
+														<TextField
-					>
+															label="Valor"
-						Adicionar
+															name={`extraInfo[${index}].value`}
-					</Button>
+															value={info.value}
-				</DialogActions>
+															onChange={handleChange}
+															variant="outlined"
+															margin="dense"
+															className={classes.textField}
+															required
+														/>
+														<IconButton
+															size="small"
+															onClick={() => remove(index)}
+														>
+															<DeleteOutlineIcon />
+														</IconButton>
+													</div>
+												))}
+											<div className={classes.extraAttr}>
+												<Button
+													style={{ flex: 1, marginTop: 8 }}
+													variant="outlined"
+													color="primary"
+													onClick={() => push({ name: "", value: "" })}
+												>
+													+ Adicionar atributo
+												</Button>
+											</div>
+										</>
+									)}
+								</FieldArray>
+							</DialogContent>
+							<DialogActions>
+								<Button onClick={handleClose} color="secondary">
+									Cancelar
+								</Button>
+								<Button onClick={handleSubmit} color="primary">
+									Adicionar
+								</Button>
+							</DialogActions>
+						</>
+					)}
+				</Formik>
 			</Dialog>
 		</div>
 	);

frontend/src/pages/Contacts/ContactsList.js

@@ -15,6 +15,7 @@ import SearchIcon from "@material-ui/icons/Search";
 import TextField from "@material-ui/core/TextField";
 import Container from "@material-ui/core/Container";
 import InputAdornment from "@material-ui/core/InputAdornment";
+import Typography from "@material-ui/core/Typography";
 
 import IconButton from "@material-ui/core/IconButton";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
@@ -128,7 +129,9 @@ const Contacts = () => {
 				aria-labelledby="form-dialog-title"
 			></ContactModal>
 			<div className={classes.contactsHeader}>
-				<h2>Todos os contatos</h2>
+				<Typography variant="h5" gutterBottom>
+					Contatos
+				</Typography>
 
 				<div className={classes.actionButtons}>
 					<TextField

frontend/yarn.lock

@@ -3815,6 +3815,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -4952,6 +4957,20 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.1.5.tgz#de5bbbe35543fa6d049fe96b8ee329d6cd6892b8"
+  integrity sha512-bWpo3PiqVDYslvrRjTq0Isrm0mFXHiO33D8MS6t6dWcqSFGeYF52nlpCM2xwOJ6tRVRznDkL+zz/iHPL4LDuvQ==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    scheduler "^0.18.0"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -5338,7 +5357,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6930,6 +6949,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -7348,6 +7372,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -9101,6 +9130,11 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-infinite-scroll-reverse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/react-infinite-scroll-reverse/-/react-infinite-scroll-reverse-1.0.3.tgz#d581dff5e7d5fd264b267203cc8c0dc08d2f8e0c"
@@ -9711,6 +9745,14 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
+scheduler@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -9912,6 +9954,13 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shortid@^2.2.15:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
+  dependencies:
+    nanoid "^2.1.0"
+
 side-channel@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"