index.js

import React, { Component } from 'react'
import {
  Grid,
  Typography,
  Paper,
  TextField,
  Button,
} from '@material-ui/core';
import Header from '../../Header';
import Footer from '../../Footer';
import LeftMenu from '../LeftMenu';
import TopSnackbar from 'components/TopSnackBar';
import { connect } from 'react-redux'
//styles
import './styles.scss'

//service
import userService from 'services/userService'

//formulario
import { Formik } from 'formik';
import * as yup from 'yup';
import MaskedInput from 'react-text-mask';
import { cpfRegex, phonRegex, nameRegex } from 'components/FormattedInput/Regex'


let schema = yup.object().shape({
  name: yup
    .string()
    .matches(nameRegex, 'Nome inválido, digite apenas letras')
    .required('Nome é obrigatório')
    .min(5, 'Digite o seu nome completo'),
  email: yup
    .string()
    .email('Digite um email válido')
    .required('E-mail é obrigatório'),
  cpf: yup
    .string()
    .required('CPF é obrigatório')
    .matches(cpfRegex, 'CPF incompleto'),
  phone: yup
    .string()
    .required('Celular é obrigatório')
    .matches(phonRegex, 'Telefone incompleto'),
});

class PersonalData extends Component {
  constructor(props){
    super(props)
    this.state = {
      openSnackbar: false
    }
  }

  TextMaskCustom = props => {
    const { inputRef, ...other } = props;

    return (
      <MaskedInput
        {...other}
        mask={[
          /[0-9]/,
          /\d/,
          /\d/,
          '.',
          /\d/,
          /\d/,
          /\d/,
          '.',
          /\d/,
          /\d/,
          /\d/,
          '-',
          /\d/,
          /\d/
        ]}
        placeholderChar={'\u2000'}
        showMask={false}
      />
    );
  };

  NumberMaskCustom = props => {
    const { inputRef, ...other } = props;

    return (
      <MaskedInput
        {...other}
        ref={ref => {
          inputRef(ref ? ref.inputElement : null);
        }}
        mask={[
          '(',
          /[0-9]/,
          /\d/,
          ')',
          ' ',
          /\d/,
          /\d/,
          /\d/,
          /\d/,
          /\d/,
          '-',
          /\d/,
          /\d/,
          /\d/,
          /\d/
        ]}
        placeholderChar={'\u2000'}
        showMask={false}
      />
    );
  };

  sendform = async (user) => {
    let response = await userService.userUpdate('5d2f38bd9786551ce58ef8ff', user)
    return response

  }
  renderSnackBar = () => {
    if(this.state.openSnackbar === true) {
      return (
        <TopSnackbar
          message="Dados trocados com sucesso!"
          variant="sucess"
        />
      )
    }
    return (<div/>)
  }
  render() {
    const {auth} = this.props.authState
    return (
      <Grid>
        <Header/>
        <div className="PersonalData">
          <Grid className="content" container spacing={2}>
            {this.renderSnackBar()}
            <LeftMenu/>
            <Grid item xs={9} md={9} lg={9} >
              <Formik
                initialValues={{ name: '', email: auth.email, cpf: auth.cpf, phone: auth.phone }}
                onSubmit={(values) => {
                  setTimeout(() => {

                    console.log(values)
                    this.sendform(values)
                    this.setState({ openSnackbar: true })
                  }, 400);
                }}
                validationSchema={schema}
              >
                {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting
                  /* and other goodies */
                }) => (
                  <form autoComplete="off" onSubmit={handleSubmit} style={{ height: '100%' }}>
                    <Paper className="paper" elevation={2} style={{borderRadius:10}}>
                      <Grid container>
                        <Grid className="personal-data-header" container>
                          <Grid item xs={12}>
                            <Typography className="subtitle">Dados pessoais</Typography>
                          </Grid>
                          <Grid item xs={12}>
                            <Typography paragraph className="title">
                              Edite ou complete os seus dados pessoais
                            </Typography>
                          </Grid>
                        </Grid>

                        <Grid className="form-personal-data-container" container>
                          <Grid className="input-grid-right" item xs={6}>
                            <TextField
                              error = {errors.name && touched.name && errors.name !== '' ? true : false}
                              fullWidth
                              label="Como gostaria de ser chamad  o ou chamada?"
                              name="name"
                              onBlur={handleBlur}
                              onChange={handleChange}
                              value={values.name}
                              variant="outlined"
                            />
                            <Typography variant="subtitle2">
                              {errors.name && touched.name && errors.name}
                            </Typography>
                          </Grid>
                          <Grid className="input-grid-left" item xs={6}>
                            <TextField
                              error = {errors.cpf && touched.cpf && errors.cpf !== '' ? true : false}
                              fullWidth
                              InputLabelProps={{ className: 'input-label' }}
                              InputProps={{
                                inputComponent: this.TextMaskCustom
                              }}
                              label="CPF"
                              name="cpf"
                              onBlur={handleBlur}
                              onChange={handleChange}
                              value={values.cpf}
                              variant="outlined"
                            />
                            <Typography variant="subtitle2">
                              {errors.cpf && touched.cpf && errors.cpf}
                            </Typography>
                          </Grid>
                          <Grid className="input-grid-right" item xs={6}>
                            <TextField
                              error = {errors.email && touched.email && errors.email !== '' ? true : false}
                              fullWidth
                              label="E-mail"
                              name="email"
                              onBlur={handleBlur}
                              onChange={handleChange}
                              value={values.email}
                              variant="outlined"
                            />
                            <Typography variant="subtitle2">
                              {errors.email && touched.email && errors.email}
                            </Typography>
                          </Grid>

                          <Grid className="input-grid-left" item xs={6}>
                            <TextField
                              error = {errors.phone && touched.phone && errors.phone !== '' ? true : false}
                              fullWidth
                              InputProps={{
                                inputComponent: this.NumberMaskCustom
                              }}
                              label="Celular"
                              name="phone"
                              onBlur={handleBlur}
                              onChange={handleChange}
                              value={values.phone}
                              variant="outlined"
                            />
                            <Typography variant="subtitle2">
                              {errors.phone && touched.phone && errors.phone}
                            </Typography>
                          </Grid>
                          <Grid className="send-grid" item xs={12}>
                            <Button
                              variant="outlined"
                              size="large"
                              type="submit"
                            >
                              Salvar
                            </Button>
                          </Grid>
                        </Grid>
                      </Grid>

                    </Paper>
                  </form>
                )}
              </Formik>
            </Grid>

          </Grid>
        </div>
        <Footer/>
      </Grid>
    )
  }
}
const mapStateToProps = state => {
  console.log(state)
  return {
    authState: state,
  }
}
export default connect(mapStateToProps)(PersonalData)