Daftar.jsx

/* eslint-disable no-restricted-syntax */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { registerUser } from '../../actions/auth.action';
import {
  renderField,
  emailValid,
  required,
  renderInputGroup
} from '../../components/Field';
import PasswordField from '../../components/PasswordField';
import ButtonLoader from '../../components/ButtonLoader';

const validate = values => {
  const errors = {};
  if (values.password) {
    if (!values.password_confirmation) {
      errors.password_confirmation = 'Required';
    } else if (values.password_confirmation !== values.password) {
      errors.password_confirmation = 'Password mismatched';
    }
  }

  return errors;
};

class Daftar extends Component {
  state = {};

  onSubmit = value => {
    const formData = new FormData();
    const formKey = [];
    const formPhone = ['phone'];
    for (const key in value) {
      if (formKey.includes(key)) {
        formData.append(key, value[key].value);
      } else if (formPhone.includes(key)) {
        formData.append(key, `+62${value[key]}`);
      } else {
        formData.append(key, value[key]);
      }
    }
    formData.append('password_confirmation', value.password);

    const { registerUser } = this.props;

    registerUser(formData);
  };

  render() {
    const { handleSubmit, auth } = this.props;
    return (
      <div className="container-fluid register-container">
        <div className="height-top-container" />
        <div className="row">
          <div className="col-12 d-flex flex-column align-items-center">
            <h2>Daftar akun</h2>
            <h5 className="text-center">
              Ayo daftarkan akunmu untuk melihat produk keuangan dengan lebih
              lengkap
            </h5>
            <form onSubmit={handleSubmit(this.onSubmit)}>
              <Field
                name="name"
                type="text"
                component={renderField}
                placeholder="Nama"
                validate={[required]}
              />
              <Field
                name="email"
                type="email"
                component={renderField}
                placeholder="Email"
                validate={[required, emailValid]}
              />
              <Field
                name="phone"
                type="number"
                prefix="+62"
                component={renderInputGroup}
                placeholder="No. HP"
                validate={[required]}
              />
              <Field
                name="password"
                type="password"
                component={PasswordField}
                placeholder="Password"
                validate={[required]}
              />
              <Field
                name="referalCode"
                type="number"
                component={renderField}
                placeholder="Kode Referal"
              />
              <div className="d-flex justify-content-center align-items-center mt-3 mb-3">
                <ButtonLoader
                  type="submit"
                  className="button-login-akun"
                  loader={auth.isLoading}
                >
                  DAFTAR
                </ButtonLoader>
              </div>
              {auth.errorMessage && (
                <div className="col-lg-12 mt-2 text-center">
                  <div className="alert alert-danger" role="alert">
                    {auth.errorMessage}
                  </div>
                </div>
              )}
            </form>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  auth: state.auth
});

export default reduxForm({
  form: 'registerForm', // a unique identifier for this form
  validate
})(
  connect(
    mapStateToProps,
    { registerUser }
  )(Daftar)
);