Merge remote-tracking branch 'shakacode/master'

Author: thiagoc7

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"
 

Gemfile.lock

@@ -43,15 +43,15 @@ GEM
     ast (2.1.0)
     astrolabe (1.3.1)
       parser (~> 2.2)
-    autoprefixer-rails (6.1.0.1)
+    autoprefixer-rails (6.1.1)
       execjs
       json
     awesome_print (1.6.1)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootstrap-sass (3.3.5.1)
-      autoprefixer-rails (>= 5.0.0.1)
-      sass (>= 3.3.0)
+    bootstrap-sass (3.3.6)
+      autoprefixer-rails (>= 5.2.1)
+      sass (>= 3.3.4)
     brakeman (3.1.2)
       erubis (~> 2.6)
       fastercsv (~> 1.5)
@@ -139,12 +139,12 @@ GEM
     mail (2.6.3)
       mime-types (>= 1.16, < 3)
     method_source (0.8.2)
-    mime-types (2.6.2)
+    mime-types (2.99)
     mini_portile (0.6.2)
-    minitest (5.8.2)
+    minitest (5.8.3)
     multi_json (1.11.2)
     netrc (0.11.0)
-    nokogiri (1.6.6.3)
+    nokogiri (1.6.6.4)
       mini_portile (~> 0.6.0)
     parser (2.2.3.0)
       ast (>= 1.1, < 3.0)
@@ -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)
@@ -213,7 +213,7 @@ GEM
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 3.0)
       netrc (~> 0.7)
-    rspec-core (3.4.0)
+    rspec-core (3.4.1)
       rspec-support (~> 3.4.0)
     rspec-expectations (3.4.0)
       diff-lcs (>= 1.2.0, < 2.0)
@@ -229,7 +229,7 @@ GEM
       rspec-expectations (~> 3.4.0)
       rspec-mocks (~> 3.4.0)
       rspec-support (~> 3.4.0)
-    rspec-support (3.4.0)
+    rspec-support (3.4.1)
     rubocop (0.35.1)
       astrolabe (~> 1.3)
       parser (>= 2.2.3.0, < 3.0)
@@ -255,7 +255,7 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    scss_lint (0.42.2)
+    scss_lint (0.43.0)
       rainbow (~> 2.0)
       sass (~> 3.4.15)
     sdoc (0.4.1)
@@ -276,10 +276,10 @@ GEM
       temple (~> 0.7.3)
       tilt (>= 1.3.3, < 2.1)
     slop (3.6.0)
-    spring (1.4.3)
+    spring (1.4.4)
     spring-commands-rspec (1.0.4)
       spring (>= 0.9.1)
-    sprockets (3.4.0)
+    sprockets (3.4.1)
       rack (> 1, < 3)
     sprockets-rails (2.3.3)
       actionpack (>= 3.0)
@@ -307,7 +307,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.1)
-    unicorn (5.0.0)
+    unicorn (5.0.1)
       kgio (~> 2.6)
       rack
       raindrops (~> 0.7)
@@ -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

README.md

@@ -3,7 +3,7 @@
 [![Coverage Status](https://coveralls.io/repos/shakacode/react-webpack-rails-tutorial/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react-webpack-rails-tutorial?branch=master)
 [![Dependency Status](https://gemnasium.com/shakacode/react-webpack-rails-tutorial.svg)](https://gemnasium.com/shakacode/react-webpack-rails-tutorial)
 # React, Redux, React-Bootstrap, ES7, Webpack Rails
-## Servering Rendering via the react_on_rails gem
+## Server Rendering via the react_on_rails gem
 
 By Justin Gordon and the Shaka Code Team, http://www.shakacode.com
 

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

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>

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/>
+

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) %>

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) %>

client/app/actions/commentsActionCreators.js

@@ -1,15 +1,15 @@
 import commentsManager from '../utils/commentsManager';
 import * as actionTypes from '../constants/commentsConstants';
 
-export function incrementAjaxCounter() {
+export function setIsFetching() {
   return {
-    type: actionTypes.INCREMENT_AJAX_COUNTER,
+    type: actionTypes.SET_IS_FETCHING,
   };
 }
 
-export function decrementAjaxCounter() {
+export function setIsSaving() {
   return {
-    type: actionTypes.DECREMENT_AJAX_COUNTER,
+    type: actionTypes.SET_IS_SAVING,
   };
 }
 
@@ -43,6 +43,7 @@ export function submitCommentFailure(error) {
 
 export function fetchComments() {
   return dispatch => {
+    dispatch(setIsFetching());
     return (
       commentsManager
         .fetchComments()
@@ -54,13 +55,12 @@ export function fetchComments() {
 
 export function submitComment(comment) {
   return dispatch => {
-    dispatch(incrementAjaxCounter());
+    dispatch(setIsSaving());
     return (
       commentsManager
         .submitComment(comment)
         .then(res => dispatch(submitCommentSuccess(res.data)))
         .catch(res => dispatch(submitCommentFailure(res.data)))
-        .then(() => dispatch(decrementAjaxCounter()))
     );
   };
 }

client/app/components/CommentBox.jsx

@@ -2,14 +2,11 @@ import React, { PropTypes } from 'react';
 
 import CommentForm from './CommentForm';
 import CommentList from './CommentList';
-import _ from 'lodash';
 
 class CommentBox extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.state = {};
-
-    _.bindAll(this, '_ajaxCounter', '_isSendingAjax');
   }
 
   static displayName = 'CommentBox';
@@ -22,15 +19,11 @@ class CommentBox extends React.Component {
   componentDidMount() {
     const { fetchComments } = this.props.actions;
     fetchComments();
-    setInterval(fetchComments, this.props.pollInterval);
-  }
-
-  _ajaxCounter() {
-    return this.props.data.get('ajaxCounter');
+    this.intervalId = setInterval(fetchComments, this.props.pollInterval);
   }
 
-  _isSendingAjax() {
-    return this._ajaxCounter() > 0;
+  componentWillUnmount() {
+    clearInterval(this.intervalId);
   }
 
   render() {
@@ -39,14 +32,14 @@ class CommentBox extends React.Component {
     return (
       <div className="commentBox container">
         <h2>
-          Comments {this._isSendingAjax() && `SENDING AJAX REQUEST! Ajax Counter is ${this._ajaxCounter()}`}
+          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
-          ajaxSending={this._isSendingAjax()}
+          isSaving={data.get('isSaving')}
           error={data.get('submitCommentError')}
           actions={actions}
         />