Merge pull request #38 from rtfeldman/integrate-client-server

WIP: Integrate client and server via Flux

client/app/components/app.js

@@ -2,8 +2,38 @@
 
 var React = require("react");
 var MainHeader = require('./main_header');
+var SurveyStore = require("../flux/SurveyStore");
+var Dispatcher = require("../flux/Dispatcher");
+var SurveyConstants = require("../flux/SurveyConstants");
+
+// Wire up the SurveyStore with the action dispatcher
+Dispatcher.register(function(payload) {
+  switch(payload.actionType) {
+    case SurveyConstants.SAVE_SURVEY:
+      SurveyStore.saveSurvey(payload.survey);
+      break;
+
+    case SurveyConstants.DELETE_SURVEY:
+      SurveyStore.deleteSurvey(payload.id)
+      break;
+  }
+});
 
 var App = React.createClass({
+  handleChange: function() {
+    SurveyStore.listSurveys(function(surveys) {
+      console.debug("TODO: update app state based on surveys returned by SurveyStore.listSurveys (once it actually returns some)");
+    });
+  },
+
+  componentDidMount: function() {
+    SurveyStore.addChangeListener(this.handleChange);
+  },
+
+  componentWillUnmount: function() {
+    SurveyStore.removeChangeListener(this.handleChange);
+  },
+
   render: function () {
     return (
       <div className='app'>

client/app/components/survey_editor.js

@@ -11,6 +11,8 @@ var EditYesNoQuestion = require('./questions/edit_yes_no_question');
 var EditMultipleChoiceQuestion = require('./questions/edit_multiple_choice_question');
 var EditEssayQuestion = require('./questions/edit_essay_question');
 
+var SurveyActions = require("../flux/SurveyActions");
+
 var SUPPORTED_QUESTIONS = {
   yes_no:           EditYesNoQuestion,
   multiple_choice:  EditMultipleChoiceQuestion,
@@ -121,7 +123,11 @@ var SurveyEditor = React.createClass({
   },
 
   handleSaveClicked: function (ev) {
-    console.log('TODO: handle save of questions', this.state.questions);
+    SurveyActions.save({
+      title:        this.state.title,
+      introduction: this.state.introduction,
+      questions:    this.state.questions
+    });
   }
 
 });

client/app/flux/Dispatcher.js

@@ -0,0 +1,46 @@
+var Dispatcher = function() {
+  this.handlers = [];
+  this.isDispatching = false;
+  this.pendingPayload = null;
+}
+
+Dispatcher.prototype.register = function(callback) {
+  this.handlers.push({
+    isPending: false,
+    isHandled: false,
+    callback: callback
+  });
+};
+
+Dispatcher.prototype.dispatch = function(payload) {
+  if (this.isDispatching) {
+    throw new Error("Cannot dispatch in the middle of a dispatch!");
+  }
+
+  // Initialize states to begin the dispatch
+  this.handlers.forEach(function(handler) {
+    handler.isPending = false;
+    handler.isHandled = false;
+  });
+
+  this.pendingPayload = payload;
+  this.isDispatching = true;
+
+  try {
+    // Invoke the handler callbacks
+    this.handlers.forEach(function(handler) {
+      if (!handler.isPending) {
+        handler.isPending = true;
+        handler.callback(payload);
+        handler.isHandled = true;
+      }
+    })
+  } finally {
+    // Clean up after the dispatch
+    this.pendingPayload = null;
+    this.isDispatching = false;
+  }
+};
+
+// The Dispatcher is a singleton, so export only the one instance.
+module.exports = new Dispatcher();

client/app/flux/SurveyActions.js

@@ -0,0 +1,20 @@
+var Dispatcher = require("./Dispatcher");
+var SurveyConstants = require("./SurveyConstants");
+
+var SurveyActions = {
+  save: function(survey) {
+    Dispatcher.dispatch({
+      actionType: SurveyConstants.SAVE_SURVEY,
+      survey: survey
+    });
+  },
+
+  delete: function(id) {
+    Dispatcher.dispatch({
+      actionType: SurveyConstants.DELETE_SURVEY,
+      id: id
+    });
+  }
+}
+
+module.exports = SurveyActions;

client/app/flux/SurveyConstants.js

@@ -0,0 +1,4 @@
+module.exports = {
+  SAVE_SURVEY:   "save",
+  DELETE_SURVEY: "delete"
+}

client/app/flux/SurveyStore.js

@@ -0,0 +1,44 @@
+var EventEmitter = require("event-emitter");
+var CHANGE_EVENT = "changeEvent";
+
+var SurveyStore = function() {
+  this.emitter = new EventEmitter();
+};
+
+// Basic event handling functions
+
+SurveyStore.prototype.emitChange = function() {
+  this.emitter.emit(CHANGE_EVENT);
+};
+
+SurveyStore.prototype.addChangeListener = function(callback) {
+    this.emitter.on(CHANGE_EVENT, callback);
+};
+
+SurveyStore.prototype.removeChangeListener = function(callback) {
+  this.emitter.removeListener(CHANGE_EVENT, callback);
+};
+
+
+
+// Survey-specific methods
+SurveyStore.prototype.saveSurvey = function(survey) {
+  console.debug("TODO: fire XHR to persist survey, then invoke this.emitChange() after the XHR has completed.");
+
+  this.emitChange();
+}
+
+SurveyStore.prototype.deleteSurvey = function(id) {
+  console.debug("TODO: delete survey", id);
+
+  this.emitChange();
+}
+
+SurveyStore.prototype.listSurveys = function(callback) {
+  console.debug("TODO: fetch surveys from server via XHR");
+
+  callback([]);
+}
+
+// The SurveyStore is a singleton, so export only the one instance.
+module.exports = new SurveyStore();

package.json

@@ -27,6 +27,7 @@
     "browserify": "^4.2.3",
     "es5-shim": "^4.0.1",
     "es6-promise": "^1.0.0",
+    "event-emitter": "^0.3.1",
     "express": "^4.7.4",
     "lodash-node": "^2.4.1",
     "merge": "^1.1.3",