nonlogos
9/4/2017 - 7:03 PM

redux form example

redux form example

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';

import * as actions from '../../actions/itnItems.actions';

import './quotedPriceForm.css';

const renderTextField = ({ input, label, meta: { touched, error, warning }, ...custom }) => {
  return (
    <TextField
      hintText={label}
      floatingLabelText={label}
      errorText={(touched && error) || (touched && warning)}
      {...input}
      {...custom}
    />
  );
};

const validate = values => {
  const errors = {};
  const requiredFields = ['quotedPrice'];
  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Please enter a valid quoted price';
    }
  });
  return errors;
};

// const warn = values => {
//   const warnings = {};
//   if (!Number(values.quotedPrice)) {
//     warnings.quotedPrice = 'Please provide a valid price in numbers';
//   }
//   return warnings;
// };

const quotedPriceForm = props => {
  const { item, handleSubmit, pristine, reset, submitting } = props;

  const handleFormSubmit = formProps => {
    const itemId = item.objectId;
    const quotedPrice = formProps.quotedPrice;
    return props.submitQuotedPrice(itemId, quotedPrice);
  };

  return (
    <form className="quotedPrice-form" onSubmit={handleSubmit(handleFormSubmit.bind(this))}>
      <div>
        <Field name="quotedPrice" type="number" step="0.01" component={renderTextField} label="Quoted Price" />
      </div>
      <div>
        <FlatButton type="submit" disabled={pristine || submitting}>
          Submit
        </FlatButton>
      </div>
    </form>
  );
};

function mapStateToProps(state, ownProps) {
  return {
    initialValues: { quotedPrice: ownProps.item.quotedPrice }
  };
}

const QuotedPrice = reduxForm({
  form: 'quotedPriceForm', // a unique identifier for this form
  enableReinitialize: true,
  validate,
  warn
})(quotedPriceForm);

export default connect(mapStateToProps, actions)(QuotedPrice);