text: import React, {Component, PropTypes} from 'react';
  import {connectReduxForm} from 'redux-form';
  import surveyValidation from './surveyValidation';
  
  function asyncValidate(data) {
    // TODO: figure out a way to move this to the server. need an instance of ApiClient
    if (!data.email) {
      return Promise.resolve({valid: true});
    }
    return new Promise((resolve) => {
      setTimeout(() => {
        const errors = {valid: true};
        if (~['bobby@gmail.com', 'timmy@microsoft.com'].indexOf(data.email)) {
          errors.email = 'Email address already used';
          errors.valid = false;
        }
        resolve(errors);
      }, 1000);
    });
  }
  
  @connectReduxForm({
    form: 'survey',
    fields: ['name', 'email', 'company', 'date'],
    validate: surveyValidation,
    asyncValidate,
    asyncBlurFields: ['email']
  })
  export default
  class SurveyForm extends Component {
    static propTypes = {
      active: PropTypes.bool.isRequired,
      asyncValidating: PropTypes.bool.isRequired,
      fields: PropTypes.object.isRequired,
      dirty: PropTypes.bool.isRequired,
      handleBlur: PropTypes.func.isRequired,
      handleChange: PropTypes.func.isRequired,
      handleSubmit: PropTypes.func.isRequired,
      resetForm: PropTypes.func.isRequired,
      invalid: PropTypes.bool.isRequired,
      pristine: PropTypes.bool.isRequired,
      valid: PropTypes.bool.isRequired
    }
  
    render() {
      const {
        asyncValidating,
        dirty,
        fields: {name, email, company, date},
        active,
        handleSubmit,
        invalid,
        resetForm,
        pristine,
        valid
        } = this.props;
      const styles = require('./SurveyForm.scss');
      const renderInput = (field, label, showAsyncValidating) =>
        <div className={'form-group' + (field.error && field.touched ? ' has-error' : '')}>
          <label htmlFor={field.name} className="col-sm-2">{label}</label>
          <div className={'col-sm-8 ' + styles.inputGroup}>
            {showAsyncValidating && asyncValidating && <i className={'fa fa-cog fa-spin ' + styles.cog}/>}
            <input type="text" className="form-control" id={field.name} {...field}/>
            {field.error && field.touched && <div className="text-danger">{field.error}</div>}
            <div className={styles.flags}>
              {field.dirty && <span className={styles.dirty} title="Dirty">D</span>}
              {field.active && <span className={styles.active} title="Active">A</span>}
              {field.visited && <span className={styles.visited} title="Visited">V</span>}
              {field.touched && <span className={styles.touched} title="Touched">T</span>}
            </div>
          </div>
        </div>;
  
      return (
        <div>
          <form className="form-horizontal" onSubmit={handleSubmit}>
            {renderInput(name, 'Event Name')}
            {renderInput(email, 'Organizer Email', true)}
            {renderInput(company, 'Company')}
            {renderInput(date, 'Date')}
            <div className="form-group">
              <div className="col-sm-offset-2 col-sm-10">
                <button className="btn btn-success" onClick={handleSubmit}>
                  <i className="fa fa-paper-plane"/> Submit
                </button>
                <button className="btn btn-warning" onClick={resetForm} style={{marginLeft: 15}}>
                  <i className="fa fa-undo"/> Reset
                </button>
              </div>
            </div>
          </form>
        </div>
      );
    }
  }
  
  