CreatePersonModal.jsx

var React = require('react');

var Modal = require('react-bootstrap/modal');
var Alert = require('react-bootstrap/alert');
var Button = require('react-bootstrap/button');

var ReactForms = require('react-forms');
var Schema    = ReactForms.schema.Schema;
var Property  = ReactForms.schema.Property;
var Form      = ReactForms.Form;
var FormFor = ReactForms.FormFor;

var ModalMixin = require('../../components/ModalMixin');

// var LaddaButton = require('react-ladda');

var PersonSchema = (
    <Schema>
      <Property name="firstName"
        label="First Name" />
      <Property name="middleName"
        label="Middle Name" />
      <Property name="lastName"
        label="Last Name" />
    </Schema>
  );


var CreatePersonModal = React.createClass({
  mixins:[ModalMixin('PeopleStore')],
  saveChanges: function() {
    var formVals = this.refs.form.valueLens().val();
    if (formVals) {
      this.props.flux.actions.addPerson(formVals);

      this.modalSaving();
    }
  },
  render: function() {
    return this.transferPropsTo(
        <Modal title="Create Person" animation={true}>
          <div className="modal-body">
            {this.errorAlerts()}
            <Form ref="form" className="form-horizontal" schema={PersonSchema} onSubmit={this.saveChanges}/>
          </div>
          <div className="modal-footer">
            <Button bsStyle="danger" onClick={this.props.onRequestHide}>Cancel</Button>
            <Button bsStyle="primary" onClick={this.saveChanges} disabled={this.state.isSaving}>Save</Button>
          </div>
        </Modal>
    );
  }
});

module.exports = CreatePersonModal;

ModalMixin.js

/** @jsx React.DOM */
var Alert = require('react-bootstrap/alert');
var utils = require('../utils');
module.exports = function() {
  var storeNames = Array.prototype.slice.call(arguments);
  return {
    getInitialState: function() {
      return {
        isSaving: false,
        error: null
      };
    },
    componentWillMount: function() {
      var flux = this.props.flux || this.context.flux;
      utils.forEach(storeNames, (store) => {
        flux.store(store).on('success', this.modalSaveSuccess);
        flux.store(store).on('error', this.modalSaveFail);
      });
    },
    modalSaving: function() {
        this.setState({isSaving: true});
    },
    modalSaveSuccess: function() {
      console.log('success');
      this.props.onRequestHide();
    },
    modalSaveFail: function(error) {
      console.log('fail', error.errors);
      if (this.state.isSaving) {
        this.setState({isSaving: false, error: error.errors});
      }
    },
    componentWillUnmount: function() {
      var flux = this.props.flux || this.context.flux;
      utils.forEach(storeNames, (store) => {
        flux.store(store).removeListener('error', this.modalSaveFail);
        flux.store(store).removeListener('sucess', this.modalSaveSuccess);
      });
    },
    errorAlerts: function() {
      if (this.state.error) {
        return (
          <Alert bsStyle="danger">
            {this.state.error}
          </Alert>
        );
      };
    }
  }
};