React+Flux App

app.js

/**
 * @jsx React.DOM
 */

var React = require('react');
var ProfileApp = require('./components/ProfileApp.react');
var WebAPIUtils = require('./utils/WebAPIUtils');

window.React = React; // export for http://fb.me/react-devtools
WebAPIUtils.getAllProfiles();

React.renderComponent(
    <ProfileApp />,
    document.getElementById('app')
);

AppDispatcher.js

/**
*
*
* AppDispatcher
**/

var Dispatcher = require('flux').Dispatcher;
var copyProperties = require('react/lib/copyProperties');
var AppDispatcher = copyProperties(new Dispatcher(), {

  /**
   * A bridge function between the views and the dispatcher, marking the action
   * as a view action.  Another variant here could be handleServerAction.
   * @param  {object} action The data coming from the view.
   */
  handleServerAction: function(action) {
    this.dispatch({
      source: 'SERVER_ACTION',
      action: action
    });
  },

  handleViewAction: function(action) {
    this.dispatch({
      source: 'VIEW_ACTION',
      action: action
    });
  },

});

module.exports = AppDispatcher;

ProfileApp.react.js

/**
 * @jsx React.DOM
 */

var React = require('react');
var ProfileStore = require('../stores/ProfileStore');
var ProfileListItem = require('./ProfileListItem.react')



function getStateFromStores(){
	return{
		allProfiles: ProfileStore.getAllUserProfiles()
	}
}

function getProfileListItem(profile, index) {
  return (
    <ProfileListItem
      key={index}
      profile={profile}
    />
  );
}

var ProfileApp = React.createClass({



	getInitialState: function() {
		return getStateFromStores();
	},

	componentDidMount: function() {
		ProfileStore.addChangeListener(this._onChange);
	},

	componentWillMount: function() {
		ProfileStore.removeChangeListener(this._onChange);
	},

	render: function() {
		var profileListItems = this.state.allProfiles.map(getProfileListItem);
		return (
				<ul className="thread-list">
				{profileListItems}
				</ul>
		)
	},
	

	  /**
	   * Event handler for 'change' events coming from the MessageStore
	   */
	  _onChange: function() {
	    this.setState(getStateFromStores());
	  }

});

module.exports = ProfileApp;

ProfileListItem.react.js

/**
 * @jsx React.DOM
 */

var ProfileItemActionCreator = require('../actions/ProfileItemActionCreator');

var React = require('react');
var ReactPropTypes = React.PropTypes;

var ProfileListItem = React.createClass({

 propTypes: {
    profile: ReactPropTypes.object
  },

	render: function() {
		var profile = this.props.profile;
		return (
					<li onClick={this._onClick}>{profile.first_name} {profile.last_name}</li>
		);
	},

	_onClick: function(){
		console.log("you clicked " + this.props.profile.id);
		ProfileItemActionCreator.clickProfile(this.props.profile.id);
	}

});

module.exports = ProfileListItem;

ProfileStore.js

/*
 *
 * ProfileStore
 */

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var merge = require('react/lib/merge');
var VizziConstants = require('../constants/VizziConstants');


var CHANGE_EVENT = 'change';
var _profiles = [];

var ProfileStore = merge(EventEmitter.prototype, {

  init: function(serverProfiles){
    _profiles = serverProfiles;
  },

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  /**
   * @param {function} callback
   */
  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  /**
   * @param {function} callback
   */
  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  },


  getAll: function(){
    return _profiles;
  },

  getAllUserProfiles: function(){ 
   var retrievedProfiles = [];
    for (var id in _profiles) {
      var profile = _profiles[id];
      retrievedProfiles.push(profile);
    }
    return retrievedProfiles;
  }

});


ProfileStore.dispatchToken = AppDispatcher.register(function(payload) {
  var action = payload.action;

    switch(action.type) {
      case VizziConstants.PROFILES_REQUEST_SUCCESS:
      ProfileStore.init(action.serverProfiles);
      ProfileStore.emitChange();
      break;

      case VizziConstants.CLICK_PROFILE:
      ProfileStore.emitChange();
      break;

      default:
    }


});


module.exports = ProfileStore;

VizziConstants.js

var keyMirror = require('react/lib/keyMirror');

module.exports = {

  ActionTypes: keyMirror({
    PROFILES_REQUEST_SUCCESS: null,
    CLICK_PROFILE: null
  }),

  PayloadSources: keyMirror({
    SERVER_ACTION: null,
    VIEW_ACTION: null
  })

};

VizziServerActionCreator.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var VizziConstants = require('../constants/VizziConstants');


module.exports = {

  receiveAll: function(serverProfiles) {
    AppDispatcher.handleServerAction({
      type: VizziConstants.PROFILES_REQUEST_SUCCESS,
      serverProfiles: serverProfiles
    });
  },

  

};

WebAPIUtil.js

var VizziServerActionCreators = require('../actions/VizziServerActionCreator');
var request = require('superagent');


module.exports = {

	getAllProfiles: function(){
		endpoint = "https://round-cathode-714.appspot.com/_ah/api/fezah/v1/user";
		mongolab = "https://api.mongolab.com/api/1/databases/fezah/collections/profiles?apiKey=foo-";
		request
			.get(mongolab)
			.end(function(res){
				VizziServerActionCreators.receiveAll(res.body);
			});
	}


};