mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-17 19:37:02 +00:00
Migarte Contact Form to Formik lib
This commit is contained in:
canove
@@ -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": {
|
||||
|
||||
@@ -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 => {
|
||||
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;
|
||||
});
|
||||
};
|
||||
useEffect(() => {}, [contactId]);
|
||||
|
||||
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>
|
||||
<DialogContent dividers>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Dados do contato
|
||||
</Typography>
|
||||
<TextField
|
||||
id="contactName"
|
||||
label="Nome"
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
className={classes.textField}
|
||||
/>
|
||||
<TextField
|
||||
id="contactNumber"
|
||||
label="Número do Whatsapp"
|
||||
placeholder="Ex: 13912344321"
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<TextField
|
||||
id="outlined-full-width"
|
||||
label="Email"
|
||||
placeholder="Endereço de Email"
|
||||
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}>
|
||||
<Formik
|
||||
initialValues={contact}
|
||||
onSubmit={(values, { setSubmitting }) => {
|
||||
setTimeout(() => {
|
||||
alert(JSON.stringify(values, null, 2));
|
||||
setSubmitting(false);
|
||||
}, 400);
|
||||
}}
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
}) => (
|
||||
<>
|
||||
<DialogTitle id="form-dialog-title">
|
||||
Adicionar contato
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Dados do contato
|
||||
</Typography>
|
||||
<TextField
|
||||
// id={extra.id}
|
||||
label="Nome do campo"
|
||||
label="Nome"
|
||||
name="name"
|
||||
value={extra.name}
|
||||
onChange={e => handleChangeExtraInfoInput(e, extra.id)}
|
||||
value={values.name}
|
||||
onChange={handleChange}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
className={classes.textField}
|
||||
/>
|
||||
<TextField
|
||||
// id={extra.id}
|
||||
label="Valor"
|
||||
name="value"
|
||||
value={extra.value}
|
||||
onChange={e => handleChangeExtraInfoInput(e, extra.id)}
|
||||
label="Número do Whatsapp"
|
||||
name="number"
|
||||
value={values.number}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: 13912344321"
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
/>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={e => handleDeleteExtraInfo(extra.id, index)}
|
||||
<div>
|
||||
<TextField
|
||||
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 />
|
||||
</IconButton>
|
||||
</div>
|
||||
))}
|
||||
Informações extras
|
||||
</Typography>
|
||||
|
||||
<div className={classes.extraAttr}>
|
||||
<Button
|
||||
style={{ flex: 1, marginTop: 8 }}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={handleAddExtraInfo}
|
||||
>
|
||||
+ Adicionar atributo
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary">
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={e => {
|
||||
handleAddContact(contact);
|
||||
setContact(initialState);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Adicionar
|
||||
</Button>
|
||||
</DialogActions>
|
||||
<FieldArray name="extraInfo">
|
||||
{({ push, remove }) => (
|
||||
<>
|
||||
{values.extraInfo &&
|
||||
values.extraInfo.length > 0 &&
|
||||
values.extraInfo.map((info, index) => (
|
||||
<div
|
||||
className={classes.extraAttr}
|
||||
key={`${index}-info`}
|
||||
>
|
||||
<TextField
|
||||
label="Nome do campo"
|
||||
name={`extraInfo[${index}].name`}
|
||||
value={info.name}
|
||||
onChange={handleChange}
|
||||
variant="outlined"
|
||||
margin="dense"
|
||||
required
|
||||
className={classes.textField}
|
||||
/>
|
||||
<TextField
|
||||
label="Valor"
|
||||
name={`extraInfo[${index}].value`}
|
||||
value={info.value}
|
||||
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>
|
||||
);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user