Updated react and react-router versions. Added new way of handling state from server.

Author: Brian Schemp

.eslintrc

@@ -0,0 +1,19 @@
+{
+    "ecmaFeatures": {
+        "blockBindings": true,
+        "forOf": true,
+        "jsx": true
+    },
+    "env": {
+      "browser": 1,
+      "node": 1
+    },
+    "globals": {
+      "module": 1,
+      "require": 1
+    },
+    "rules": {
+        "quotes": [2, "single"],
+        "strict": [2, "global"]
+    }
+}

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .DS_Store
+static/bundle.js

.jshintrc

@@ -3,7 +3,7 @@
 var React = require('react');
 var Router = require('react-router');
 var Routes = require('./lib/Routes.jsx');
-var SearchActions = require('./lib/actions/SearchActions');
+//var SearchActions = require('./lib/actions/SearchActions');
 
 // Export React so the dev tools can find it
 (window !== window.top ? window.top : window).React = React;
@@ -12,11 +12,20 @@ Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
 
   // Set initial state. Use params from the route state and the serialized javascript
   // stored in window.App. The JSON stored in window.App was created in
-  // the server request. 
+  // the server request.
+  /*
   SearchActions.setState({
     params: state.params,
     state: window.App
   });
+*/
 
-  React.render(React.createFactory(Handler)(window.App), document.getElementById('app'));
+  // Store the url parameters and the state from the server that we
+  // are storing in window.App
+  var props = {
+		params: state.params,
+		state: window.App
+  };
+
+  React.render(React.createFactory(Handler)(props), document.getElementById('app'));
 });

app.js

@@ -4,22 +4,16 @@ var React = require('react/addons');
 var Router = require('react-router');
 var Route = Router.Route;
 var AppHandler = require('./handlers/AppHandler.jsx');
-var IndexHandler = require('./handlers/IndexHandler.jsx');
 var ProductHandler = require('./handlers/ProductHandler.jsx');
 
 /**
- * Define routes. Each route will have a handler to deal with the 
+ * Define routes. Each route will have a handler to deal with the
  * route.
  */
 var Routes = (
-  /* jshint ignore:start */
-  <Route handler={AppHandler}>
-    <Route name="index" path="/" handler={IndexHandler}>
-      <Route name="products" path="/products/:category" handler={ProductHandler}/>
-    </Route>
+  <Route name="app" path="/" handler={AppHandler}>
+    <Route name="products" path="/products/:category" handler={ProductHandler}/>
   </Route>
-  /* jshint ignore:end */
-
 );
 
 module.exports = Routes;

lib/Routes.jsx

@@ -0,0 +1,22 @@
+'use strict';
+
+var Dispatcher = require('../dispatcher/Dispatcher');
+var ActionConstants = require('../constants/ActionConstants');
+
+var ActionCreators = {
+  setState: function(state) {
+    Dispatcher.handleViewAction({
+      actionType: ActionConstants.SET_STATE,
+      state: state
+    });
+  },
+
+  requestProducts: function(category) {
+		Dispatcher.handleViewAction({
+			actionType: ActionConstants.REQUEST_PRODUCTS,
+			category: category
+		});
+  }
+};
+
+module.exports = ActionCreators;

lib/actions/ActionCreators.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var Dispatcher = require('../dispatcher/Dispatcher');
+var ActionConstants = require('../constants/ActionConstants');
+
+var ServerActionCreators = {
+
+  handleProductsSuccess: function(response) {
+    Dispatcher.handleServerAction({
+      actionType: ActionConstants.REQUEST_PRODUCTS_SUCCESS,
+      products: response
+    });
+  },
+
+  handleProductsError: function(response) {
+    Dispatcher.handleServerAction({
+      actionType: ActionConstants.REQUEST_PRODUCTS_ERROR,
+      error: response
+    });
+  }
+
+};
+
+module.exports = ServerActionCreators;

lib/actions/SearchActions.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var React = require('react');
-var Navigation = require('react-router').Navigation;
 
-var Category = React.createClass({
-  mixins: [Navigation],
+var CategoryList = React.createClass({
+  contextTypes: {
+    router: React.PropTypes.func
+  },
 
   handleChange: function (e) {
-    this.transitionTo('/products/' + e.target.value);
+    this.context.router.transitionTo('products', { category: e.target.value });
   },
 
   propTypes: {
@@ -16,11 +17,10 @@ var Category = React.createClass({
 
   getDefaultProps: function () {
     return {
-      cagtegories: null
+      cagtegories: []
     };
   },
 
-  /* jshint ignore:start */
   render: function () {
     var categories;
 
@@ -38,12 +38,11 @@ var Category = React.createClass({
           <option value="">Select a Category</option>
           { categories }
         </select>
-      </div>  
+      </div>
     );
 
   }
-  /* jshint ignore:end */
 
 });
 
-module.exports = Category;
+module.exports = CategoryList;

lib/actions/ServerActionCreators.js

@@ -13,7 +13,6 @@ var ProductList = React.createClass({
     };
   },
 
-  /* jshint ignore:start */
   render: function() {
     return (
       <div>
@@ -29,7 +28,6 @@ var ProductList = React.createClass({
       </div>
     );
   }
-  /* jshint ignore:end */
 
 });
 

lib/components/Category.jsx renamed to lib/components/CategoryList.jsx

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+  SET_STATE: 'SET_STATE',
+  REQUEST_PRODUCTS: 'REQUEST_PRODUCTS',
+  REQUEST_PRODUCTS_SUCCESS: 'REQUEST_PRODUCTS_SUCCESS',
+  REQUEST_PRODUCTS_ERROR: 'REQUEST_PRODUCTS_ERROR'
+};

lib/components/ProductList.jsx

@@ -3,21 +3,20 @@
 var Flux = require('flux');
 var assign = require('object-assign');
 
-/**
- * A singleton that operates as the central hub for application updates.
- * For more information visit https://facebook.github.io/flux/
- */
 var Dispatcher = assign(new Flux.Dispatcher(), {
 
-  /**
-   * @param {object} action The details of the action, including the action's
-   * type and additional data coming from the view.
-   */
   handleViewAction: function (action) {
     var payload = {
       action: action
     };
     this.dispatch(payload);
+  },
+
+  handleServerAction: function (action) {
+    var payload = {
+      action: action
+    };
+    this.dispatch(payload);
   }
 
 });

lib/constants/ActionConstants.js

@@ -3,54 +3,30 @@
 var React = require('react');
 var Router = require('react-router');
 var RouteHandler = Router.RouteHandler;
+var CategoryList = require('../components/CategoryList.jsx');
 
 var AppHandler = React.createClass({
 
-  getInitialState: function() {
-    return {
-      mode: 'Server Rendering',
-      counter: 0
-    };
-  },
-
   propTypes: {
-    categories: React.PropTypes.array,
-    products: React.PropTypes.array
+    params: React.PropTypes.object.isRequired,
+    state: React.PropTypes.object.isRequired
   },
 
   getDefaultProps: function() {
     return {
-      categories: [],
-      products: []
+      params: {},
+      state: {}
     };
   },
 
-  componentDidMount: function() {
-    this.setState({
-      mode: 'Client Rendering'
-    });
-
-    window.setInterval(this.incrementCounter, 1000);
-  },
-
-  incrementCounter: function() {
-    this.setState({counter: this.state.counter+1});
-  },
-
-  /* jshint ignore:start */
   render: function() {
     return (
       <div>
-        <header>
-          Current mode: {this.state.mode} <br />
-          {(this.state.counter > 0) ? this.state.counter + ' seconds' : ''}
-        </header>
-
-        <RouteHandler categories={ this.props.categories } products= { this.props.products } />
+        <CategoryList categories={ this.props.state.categories }/>
+        <RouteHandler products={ this.props.state.products } params={ this.props.params }/>
       </div>
     );
   }
-  /* jshint ignore:end */
 
 });