Using Bootstrap modals as show pages for elements in Rails with React.js and Flux

modals.js.jsx

//app/components/
 postClicked: function(post, e){
      e.preventDefault();
      if (post.body) {
        ModalActions.showModal(post.body);
      } else {
        ModalActions.showModal(post.field_name, post.field_value);
      }
    },

//app/javascripts/actions/
(function(root) {
  'use strict';
  root.ModalActions = {
    showModal: function (field1, field2) {
      root.AppDispatcher.dispatch({
        actionType: root.ModalConstants.SHOW_MODAL,
        modalData: {field1: field1, field2: field2}
      });
    },
    clearModal: function () {
      root.AppDispatcher.dispatch({
        actionType: root.ModalConstants.CLEAR_MODAL
      });
    },
  };
}(this));

//app/javascripts/constants/
(function(root) {
  'use strict';
  root.ModalConstants = {
    SHOW_MODAL: "SHOW_MODAL",
    CLEAR_MODAL: "CLEAR_MODAL",
  };
}(this));

//app/javascripts/dispatcher
var AppDispatcher = new FluxDispatcher();


//app/javascripts/stores
(function(root) {
  'use strict';
  var EMPTY_AND_HIDDEN = {field1: "", field2: "", visible: false};
  var _modalData = $.extend({}, EMPTY_AND_HIDDEN);
  var CHANGE_EVENT = "change";

  var updateModal = function (data) {
    $.extend(_modalData, data);
    _modalData.visible = true;
  };

  var clearModal = function(){
    $.extend(_modalData, EMPTY_AND_HIDDEN);
    //clear the input of the search field after exiting modal...
  };

  root.ModalContentStore = $.extend({}, EventEmitter.prototype, {
    modalData: function () {
      return $.extend({}, _modalData);
    },
    addChangeListener: function (callback) {
      this.on(CHANGE_EVENT, callback);
    },
    removeChangeListener: function(callback){
      this.removeListener(CHANGE_EVENT, callback);
    },
    dispatcherID: root.AppDispatcher.register(function(payload){
     switch(payload.actionType){
       case window.ModalConstants.SHOW_MODAL:
         updateModal(payload.modalData);
         root.ModalContentStore.emit(CHANGE_EVENT);
         break;
      case window.ModalConstants.CLEAR_MODAL:
        clearModal();
        root.ModalContentStore.emit(CHANGE_EVENT);
        break;
     }
    })
  });
}(this));

//app/javascripts/components/
var ModalManager = React.createClass({
  getInitialState: function(){
    return { modalData: ModalContentStore.modalData() };
  },
  componentDidMount: function(){
    ModalContentStore.addChangeListener(this.modalChanged);
  },
  modalChanged: function(){
    this.setState({ modalData: ModalContentStore.modalData() });
  },
  render: function(){
    var modal = "";
    if (this.state.modalData.visible){
      modal = <ShowModal field1={this.state.modalData.field1} field2={this.state.modalData.field2} />
    }
    return (
      <div>{modal}</div>
    );
  }
});

//app/javascripts/components/
(function(root) {
  'use strict';
  root.ShowModal = React.createClass({
    $modal: function(){
      return $(React.findDOMNode(this.refs.modal));
    },
    componentDidMount: function () {
      this.$modal().on("hidden.bs.modal", ModalActions.clearModal);
      this.$modal().modal('show');
    },
    render: function () {
      return(
        <div ref='modal' className="modal fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 className="modal-title" id="myModalLabel">More info</h4>
              </div>
              <div className="modal-body">
                <h1>{ this.props.field1 }</h1>
                <h3>{ this.props.field2 }</h3>
              </div>
              <div className="modal-footer">
                <button type="button" data-dismiss="modal" className="btn btn-default">Close</button>
              </div>
            </div>
          </div>
        </div>
      );
    }
  });
}(this));