Use FluentJS

Author: arthurtw

examples/fluent-chat/js/actions/ChatMessageActionCreators.js

@@ -10,23 +10,19 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+var Fluent = require('fluent-js');
 var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
-var ChatConstants = require('../constants/ChatConstants');
 var ChatWebAPIUtils = require('../utils/ChatWebAPIUtils');
 var ChatMessageUtils = require('../utils/ChatMessageUtils');
 
-var ActionTypes = ChatConstants.ActionTypes;
+class ChatMessageActions extends Fluent.Actions {
 
-module.exports = {
-
-  createMessage: function(text, currentThreadID) {
-    ChatAppDispatcher.dispatch({
-      type: ActionTypes.CREATE_MESSAGE,
-      text: text,
-      currentThreadID: currentThreadID
-    });
+  createMessage(text, currentThreadID) {
+    this.dispatch(text, currentThreadID);
     var message = ChatMessageUtils.getCreatedMessageData(text, currentThreadID);
     ChatWebAPIUtils.createMessage(message);
   }
 
-};
+}
+
+module.exports = new ChatMessageActions(ChatAppDispatcher);

examples/fluent-chat/js/actions/ChatServerActionCreators.js

@@ -10,25 +10,19 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+var Fluent = require('fluent-js');
 var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
-var ChatConstants = require('../constants/ChatConstants');
 
-var ActionTypes = ChatConstants.ActionTypes;
+class ChatServerActions extends Fluent.Actions {
 
-module.exports = {
-
-  receiveAll: function(rawMessages) {
-    ChatAppDispatcher.dispatch({
-      type: ActionTypes.RECEIVE_RAW_MESSAGES,
-      rawMessages: rawMessages
-    });
-  },
+  receiveAll(rawMessages) {
+    this.dispatch(rawMessages);
+  }
 
-  receiveCreatedMessage: function(createdMessage) {
-    ChatAppDispatcher.dispatch({
-      type: ActionTypes.RECEIVE_RAW_CREATED_MESSAGE,
-      rawMessage: createdMessage
-    });
+  receiveCreatedMessage(createdMessage) {
+    this.dispatch(createdMessage);
   }
 
-};
+}
+
+module.exports = new ChatServerActions(ChatAppDispatcher, true);

examples/fluent-chat/js/actions/ChatThreadActionCreators.js

@@ -10,18 +10,15 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+var Fluent = require('fluent-js');
 var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
-var ChatConstants = require('../constants/ChatConstants');
 
-var ActionTypes = ChatConstants.ActionTypes;
+class ChatThreadActions extends Fluent.Actions {
 
-module.exports = {
-
-  clickThread: function(threadID) {
-    ChatAppDispatcher.dispatch({
-      type: ActionTypes.CLICK_THREAD,
-      threadID: threadID
-    });
+  clickThread(threadID) {
+    this.dispatch(threadID);
   }
 
-};
+}
+
+module.exports = new ChatThreadActions(ChatAppDispatcher);

examples/fluent-chat/js/components/MessageSection.react.js

@@ -10,6 +10,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+var Fluent = require('fluent-js');
 var MessageComposer = require('./MessageComposer.react');
 var MessageListItem = require('./MessageListItem.react');
 var MessageStore = require('../stores/MessageStore');
@@ -32,24 +33,19 @@ function getMessageListItem(message) {
   );
 }
 
-var MessageSection = React.createClass({
+class MessageSection extends React.Component {
 
-  getInitialState: function() {
-    return getStateFromStores();
-  },
+  constructor(props) {
+    super(props);
+    this.state = getStateFromStores();
+    this.onChange = this._onChange;
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     this._scrollToBottom();
-    MessageStore.addChangeListener(this._onChange);
-    ThreadStore.addChangeListener(this._onChange);
-  },
-
-  componentWillUnmount: function() {
-    MessageStore.removeChangeListener(this._onChange);
-    ThreadStore.removeChangeListener(this._onChange);
-  },
+  }
 
-  render: function() {
+  render() {
     var messageListItems = this.state.messages.map(getMessageListItem);
     return (
       <div className="message-section">
@@ -60,24 +56,24 @@ var MessageSection = React.createClass({
         <MessageComposer threadID={this.state.thread.id}/>
       </div>
     );
-  },
+  }
 
-  componentDidUpdate: function() {
+  componentDidUpdate() {
     this._scrollToBottom();
-  },
+  }
 
-  _scrollToBottom: function() {
+  _scrollToBottom() {
     var ul = this.refs.messageList.getDOMNode();
     ul.scrollTop = ul.scrollHeight;
-  },
+  }
 
   /**
    * Event handler for 'change' events coming from the MessageStore
    */
-  _onChange: function() {
+  _onChange() {
     this.setState(getStateFromStores());
   }
 
-});
+}
 
-module.exports = MessageSection;
+module.exports = Fluent.connectToStores(React, MessageSection, [MessageStore, ThreadStore], 'onChange');

examples/fluent-chat/js/components/ThreadSection.react.js

@@ -11,6 +11,7 @@
  */
 
 var React = require('react');
+var Fluent = require('fluent-js');
 var ThreadListItem = require('../components/ThreadListItem.react');
 var ThreadStore = require('../stores/ThreadStore');
 var UnreadThreadStore = require('../stores/UnreadThreadStore');
@@ -23,23 +24,15 @@ function getStateFromStores() {
   };
 }
 
-var ThreadSection = React.createClass({
+class ThreadSection extends React.Component {
 
-  getInitialState: function() {
-    return getStateFromStores();
-  },
-
-  componentDidMount: function() {
-    ThreadStore.addChangeListener(this._onChange);
-    UnreadThreadStore.addChangeListener(this._onChange);
-  },
-
-  componentWillUnmount: function() {
-    ThreadStore.removeChangeListener(this._onChange);
-    UnreadThreadStore.removeChangeListener(this._onChange);
-  },
+  constructor(props) {
+    super(props);
+    this.state = getStateFromStores();
+    this.onChange = this._onChange;
+  }
 
-  render: function() {
+  render() {
     var threadListItems = this.state.threads.map(function(thread) {
       return (
         <ThreadListItem
@@ -63,15 +56,15 @@ var ThreadSection = React.createClass({
           </ul>
       </div>
     );
-  },
+  }
 
   /**
    * Event handler for 'change' events coming from the stores
    */
-  _onChange: function() {
+  _onChange() {
     this.setState(getStateFromStores());
   }
 
-});
+}
 
-module.exports = ThreadSection;
+module.exports = Fluent.connectToStores(React, ThreadSection, [ThreadStore, UnreadThreadStore], 'onChange');

examples/fluent-chat/js/constants/ChatConstants.js

@@ -10,6 +10,6 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var Dispatcher = require('flux').Dispatcher;
+var Dispatcher = require('fluent-js').Dispatcher;
 
 module.exports = new Dispatcher();

examples/fluent-chat/js/dispatcher/ChatAppDispatcher.js

@@ -10,15 +10,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+var Fluent = require('fluent-js');
 var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
-var ChatConstants = require('../constants/ChatConstants');
 var ChatMessageUtils = require('../utils/ChatMessageUtils');
-var EventEmitter = require('events').EventEmitter;
 var ThreadStore = require('../stores/ThreadStore');
-var assign = require('object-assign');
-
-var ActionTypes = ChatConstants.ActionTypes;
-var CHANGE_EVENT = 'change';
 
 var _messages = {};
 
@@ -41,35 +36,20 @@ function _markAllInThreadRead(threadID) {
   }
 }
 
-var MessageStore = assign({}, EventEmitter.prototype, {
-
-  emitChange: function() {
-    this.emit(CHANGE_EVENT);
-  },
+class MessageStore extends Fluent.Store {
 
-  /**
-   * @param {function} callback
-   */
-  addChangeListener: function(callback) {
-    this.on(CHANGE_EVENT, callback);
-  },
-
-  removeChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT, callback);
-  },
-
-  get: function(id) {
+  get(id) {
     return _messages[id];
-  },
+  }
 
-  getAll: function() {
+  getAll() {
     return _messages;
-  },
+  }
 
   /**
    * @param {string} threadID
    */
-  getAllForThread: function(threadID) {
+  getAllForThread(threadID) {
     var threadMessages = [];
     for (var id in _messages) {
       if (_messages[id].threadID === threadID) {
@@ -85,44 +65,43 @@ var MessageStore = assign({}, EventEmitter.prototype, {
       return 0;
     });
     return threadMessages;
-  },
+  }
 
-  getAllForCurrentThread: function() {
+  getAllForCurrentThread() {
     return this.getAllForThread(ThreadStore.getCurrentID());
   }
 
-});
+}
 
-MessageStore.dispatchToken = ChatAppDispatcher.register(function(action) {
+var actionHandlers = {
 
-  switch(action.type) {
+  viewActionHandlers: {
 
-    case ActionTypes.CLICK_THREAD:
-      ChatAppDispatcher.waitFor([ThreadStore.dispatchToken]);
+    clickThread(threadID) {
+      this.waitFor([ThreadStore]);
       _markAllInThreadRead(ThreadStore.getCurrentID());
-      MessageStore.emitChange();
-      break;
+    },
 
-    case ActionTypes.CREATE_MESSAGE:
+    createMessage(text, currentThreadID) {
       var message = ChatMessageUtils.getCreatedMessageData(
-        action.text,
-        action.currentThreadID
+        text,
+        currentThreadID
       );
       _messages[message.id] = message;
-      MessageStore.emitChange();
-      break;
+    }
+
+  },
 
-    case ActionTypes.RECEIVE_RAW_MESSAGES:
-      _addMessages(action.rawMessages);
-      ChatAppDispatcher.waitFor([ThreadStore.dispatchToken]);
+  serverActionHandlers: {
+
+    receiveAll(rawMessages) {
+      _addMessages(rawMessages);
+      this.waitFor([ThreadStore]);
       _markAllInThreadRead(ThreadStore.getCurrentID());
-      MessageStore.emitChange();
-      break;
+    }
 
-    default:
-      // do nothing
   }
 
-});
+};
 
-module.exports = MessageStore;
+module.exports = new MessageStore(ChatAppDispatcher, actionHandlers);