Add react-router support incl server rendering

* Updated to react_on_rails 1.1.0
* Update config to get non-minified server msgs
* Support for server rendering with react-router
* Implement active class for react-router links and use IndexLink and IndexRoute
* cleanup code duplication

Author: justin808

Diff for: Gemfile

@@ -40,7 +40,8 @@ gem "rails-html-sanitizer"
 # Use Unicorn as the app server
 gem "unicorn"
 
-gem "react_on_rails", "~> 1.0.0.pre"
+gem "react_on_rails"
+
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 gem "therubyracer"
 

Diff for: Gemfile.lock

@@ -204,7 +204,7 @@ GEM
     raindrops (0.15.0)
     rake (10.4.2)
     rdoc (4.2.0)
-    react_on_rails (1.0.3)
+    react_on_rails (1.1.0)
       connection_pool
       execjs (~> 2.5)
       rails (>= 3.2)
@@ -350,7 +350,7 @@ DEPENDENCIES
   rails (~> 4.2)
   rails-html-sanitizer
   rails_12factor
-  react_on_rails (~> 1.0.0.pre)
+  react_on_rails
   rspec-rails
   rubocop
   ruby-lint

Diff for: app/controllers/pages_controller.rb

@@ -1,7 +1,7 @@
 class PagesController < ApplicationController
-  def index
-    @comments = Comment.all
+  before_action :set_comments
 
+  def index
     # NOTE: The below notes apply if you want to set the value of the props in the controller, as
     # compared to he view. However, it's more convenient to use Jbuilder from the view. See
     # app/views/pages/index.html.erb:20
@@ -22,6 +22,16 @@ def index
     # end
   end
 
+  # Declaring no_router and simple to indicate we have views for them
+  def no_router
+  end
+
   def simple
   end
+
+  private
+
+  def set_comments
+    @comments = Comment.all
+  end
 end

Diff for: app/views/layouts/application.html.erb

@@ -22,7 +22,8 @@
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
-        <li class="active"><%= link_to "React Demo", root_path %></li>
+        <li class="active"><%= link_to "React Router Demo", root_path %></li>
+        <li><%= link_to "React Demo", no_router_path %></li>
         <li><%= link_to "Simple React", simple_path %></li>
         <li><%= link_to "Classic Rails", comments_path %></li>
         <li><%= link_to "www.shakacode.com", "http://www.shakacode.com" %></li>

Diff for: app/views/pages/_header.html.erb

@@ -0,0 +1,23 @@
+<p>Current Commit:
+  <%= link_to git_commit_sha_short,
+              "https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
+              id: "git-commit-sha" %>
+</p>
+<ul>
+  <li>
+    If this work interests you and you're a developer or designer looking for full or part-time remote work: please
+    <%= link_to "click here",
+                "http://forum.shakacode.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156/3" %>
+    and
+    <%= link_to "here",
+                "http://forum.shakacode.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156/2" %>.
+  </li>
+  <li>
+    Please see the
+    <%= link_to "github.com/shakacode/react-webpack-rails-tutorial/README.md",
+                "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md" %>
+    for details of how this example site was built.
+  </li>
+</ul>
+<hr/>
+

Diff for: app/views/pages/index.html.erb

@@ -1,27 +1,6 @@
-<h2>Using React (Server rendering) + Redux + Rails Backend (using the 
+<h2>Using React (Server rendering) + Redux + React Router + Rails Backend (using the
   <a href="https://github.com/shakacode/react_on_rails">react_on_rails gem</a>)</h2>
-<p>Current Commit:
-  <%= link_to git_commit_sha_short,
-      "https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
-      id: "git-commit-sha" %>
-</p>
-<ul>
-  <li>
-    If this work interests you and you're a developer or designer looking for full or part-time remote work: please
-    <%= link_to "click here",
-      "http://forum.shakacode.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156/3" %>
-    and
-    <%= link_to "here",
-     "http://forum.shakacode.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156/2" %>.
-  </li>
-  <li>
-    Please see the
-    <%= link_to "github.com/shakacode/react-webpack-rails-tutorial/README.md",
-        "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md" %>
-    for details of how this example site was built.
-  </li>
-</ul>
-<hr/>
+<%= render "header" %>
 
-<%= react_component('App', render(template: "/comments/index.json.jbuilder"),
-    generator_function: true, prerender: true) %>
+<%= react_component('RouterApp', render(template: "/comments/index.json.jbuilder"),
+    generator_function: true, prerender: true, raise_on_prerender_error: true) %>

Diff for: app/views/pages/no_router.html.erb

@@ -0,0 +1,6 @@
+<h2>Using React (Server rendering) + Redux + Rails Backend (using the
+  <a href="https://github.com/shakacode/react_on_rails">react_on_rails gem</a>)</h2>
+<%= render "header" %>
+
+<%= react_component('App', render(template: "/comments/index.json.jbuilder"),
+    generator_function: true, prerender: true) %>

Diff for: client/app/components/CommentBox.jsx

@@ -19,7 +19,11 @@ class CommentBox extends React.Component {
   componentDidMount() {
     const { fetchComments } = this.props.actions;
     fetchComments();
-    setInterval(fetchComments, this.props.pollInterval);
+    this.intervalId = setInterval(fetchComments, this.props.pollInterval);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.intervalId);
   }
 
   render() {
@@ -28,11 +32,11 @@ class CommentBox extends React.Component {
     return (
       <div className="commentBox container">
         <h2>
-          Comments { data.get('isFetching') && 'Loading...' }
+          Comments {data.get('isFetching') && 'Loading...'}
         </h2>
         <p>
-          Text take Github Flavored Markdown. Comments older than 24 hours are deleted.
-          <b>Name</b> is preserved, <b>Text</b> is reset, between submits.
+          Text take Github Flavored Markdown. Comments older than 24 hours are deleted.<br/>
+          <b>Name</b> is preserved. <b>Text</b> is reset, between submits.
         </p>
         <CommentForm
           isSaving={data.get('isSaving')}

Diff for: client/app/components/CommentScreen.jsx

@@ -1,29 +1,19 @@
 import React, { PropTypes } from 'react';
 import CommentBox from './CommentBox';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as commentsActionCreators from '../actions/commentsActionCreators';
-
-function select(state) {
-  // Which part of the Redux global state does our component want to receive as props?
-  return { data: state.$$commentsStore };
-}
 
 class CommentScreen extends React.Component {
-  static displayName = 'CommentScreen';
-
   static propTypes = {
-    dispatch: PropTypes.func.isRequired,
+    actions: PropTypes.object.isRequired,
     data: PropTypes.object.isRequired,
   };
 
   render() {
-    const { dispatch, data } = this.props;
-    const actions = bindActionCreators(commentsActionCreators, dispatch);
+    const { data, actions } = this.props;
+
     return (
       <div>
         <CommentBox
-          pollInterval={5000}
+          pollInterval={10000}
           data={data}
           actions={actions}
           ajaxCounter={data.get('ajaxCounter')}
@@ -45,5 +35,4 @@ class CommentScreen extends React.Component {
   }
 }
 
-// Don't forget to actually use connect!
-export default connect(select)(CommentScreen);
+export default CommentScreen;

Diff for: client/app/components/NonRouterCommentScreen.jsx

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import CommentScreen from './CommentScreen';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as commentsActionCreators from '../actions/commentsActionCreators';
+
+function select(state) {
+  // Which part of the Redux global state does our component want to receive as props?
+  return { data: state.$$commentsStore };
+}
+
+class NonRouterCommentScreen extends React.Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { dispatch, data } = this.props;
+    const actions = bindActionCreators(commentsActionCreators, dispatch);
+    return (
+      <CommentScreen {...{actions, data}} />
+    );
+  }
+}
+
+// Don't forget to actually use connect!
+export default connect(select)(NonRouterCommentScreen);

Diff for: client/app/components/RouterCommentScreen.jsx

@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react';
+import CommentScreen from './CommentScreen';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as commentsActionCreators from '../actions/commentsActionCreators';
+
+function select(state) {
+  // Which part of the Redux global state does our component want to receive as props?
+  return { data: state.$$commentsStore };
+}
+
+class RouterCommentScreen extends React.Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+    location: PropTypes.shape({
+      state: PropTypes.object,
+    }).isRequired,
+  };
+
+  _renderNotification() {
+    const locationState = this.props.location.state;
+    if (!locationState || !locationState.redirectFrom) return null;
+
+    return (
+      <div className="notification bg-success">
+        You've been redirected from <strong>{locationState.redirectFrom}</strong>
+      </div>
+    );
+  }
+
+  render() {
+    const { dispatch, data } = this.props;
+    const actions = bindActionCreators(commentsActionCreators, dispatch);
+
+    return (
+      <div>
+        {::this._renderNotification()}
+        <CommentScreen {...{actions, data}} />
+      </div>
+    );
+  }
+}
+
+// Don't forget to actually use connect!
+export default connect(select)(RouterCommentScreen);

Diff for: client/app/components/SimpleCommentScreen.jsx

@@ -64,8 +64,8 @@ class SimpleCommentScreen extends React.Component {
       <div className="commentBox container">
         <h2>Comments</h2>
         <p>
-          Text take Github Flavored Markdown. Comments older than 24 hours are deleted.
-          <b> Name</b> is preserved, <b>Text</b> is reset, between submits.
+          Text take Github Flavored Markdown. Comments older than 24 hours are deleted.<br/>
+          <b>Name</b> is preserved. <b>Text</b> is reset, between submits.
         </p>
         <CommentForm
           ajaxSending={this.state.ajaxSending}

Diff for: client/app/components/TestReactRouter.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default class TestReactRouter extends React.Component {
+
+  render() {
+    return (
+      <div className="container">
+        <h1>React Router is working!</h1>
+        <p>
+          Woohoo, we can use <code>react-router</code> here!
+        </p>
+      </div>
+    );
+  }
+
+}

Diff for: client/app/components/TestReactRouterRedirect.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class TestReactRouterRedirect extends React.Component {
+
+  static checkAuth(nextState, replaceState) {
+    // Hard code this to demonstrate the effect
+    const notAuthorized = true;
+    if (notAuthorized) {
+      replaceState({ redirectFrom: nextState.location.pathname }, '/');
+    }
+  }
+
+  render() {
+    return (
+      <div>Nope.</div>
+    );
+  }
+
+}

Diff for: client/app/layout/Layout.jsx

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import { IndexLink, Link } from 'react-router';
+
+export default class Layout extends React.Component {
+
+  static propTypes = {
+    children: PropTypes.object.isRequired,
+  }
+
+  render() {
+    return (
+      <section>
+        <header>
+          <ul>
+            <li>
+              <IndexLink to="/" activeClassName="active">Comments (Root URL)</IndexLink>
+            </li>
+            <li>
+              <Link to="/react-router" activeClassName="active">Test React Router ('/react-router')</Link>
+            </li>
+            <li>
+              <Link to="/react-router/redirect" activeClassName="active">Test Redirect (url to '/react-router/redirect' which goes to root '/')</Link>
+            </li>
+          </ul>
+        </header>
+        {this.props.children}
+      </section>
+    );
+  }
+}

Diff for: client/app/routes/routes.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Route, IndexRoute } from 'react-router';
+import Layout from '../layout/Layout';
+import TestReactRouter from '../components/TestReactRouter';
+import TestReactRouterRedirect from '../components/TestReactRouterRedirect';
+import RouterCommentScreen from '../components/RouterCommentScreen';
+
+export default (
+  <Route path="/" component={Layout}>
+    <IndexRoute
+      component={RouterCommentScreen}
+    />
+    <Route
+      path="react-router"
+      component={TestReactRouter}
+    />
+    <Route
+      path="react-router/redirect"
+      component={TestReactRouterRedirect}
+      onEnter={TestReactRouterRedirect.checkAuth}
+    />
+  </Route>
+);

Diff for: client/app/startup/ClientApp.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { Provider } from 'react-redux';
 
 import createStore from '../stores/commentsStore';
-import CommentScreen from '../components/CommentScreen';
+import NonRouterCommentScreen from '../components/NonRouterCommentScreen';
 
 const App = props => {
   const store = createStore(props);
   return (
       <Provider store={store}>
-        <CommentScreen />
+        <NonRouterCommentScreen />
       </Provider>
   );
 };