Merge pull request shakacode#99 from shakacode/bump-react_on_rails

Bump react_on_rails gem version to 1.0.3

Author: dylangrafmyre

.gitignore

@@ -15,8 +15,6 @@
 /log/*.log
 /tmp
 /public/assets
-client-bundle.js
-client-bundle.js.map
 .env
 node_modules
 npm-debug.log
@@ -27,3 +25,6 @@ vendor/ruby
 
 # RVM gemset
 .ruby-gemset
+
+# Generated js bundles
+/app/assets/javascripts/generated/*

.travis.yml

@@ -5,10 +5,16 @@ rvm:
 install:
   - bundle install
   - npm install
-  - cd client && $(npm bin)/webpack --config webpack.rails.config.js
+  - cd client && NODE_ENV=production $(npm bin)/webpack --config webpack.rails.config.js
+  - NODE_ENV=production $(npm bin)/webpack --config webpack.server.config.js
+
 env:
   - export RAILS_ENV=test
+
+before_script:
+   - export DISPLAY=:99.0
+   - sh -e /etc/init.d/xvfb start
 script:
   - bundle exec rake db:schema:load
-  - bundle exec rake
+  - DRIVER=selenium_firefox bundle exec rake
   - bundle exec rake lint

Gemfile

@@ -39,10 +39,13 @@ gem "rails-html-sanitizer"
 # Use Unicorn as the app server
 gem "unicorn"
 
-gem "react_on_rails", "~> 0.1.1"
+gem "react_on_rails", "~> 0.1.3"
+gem "therubyracer"
 
 gem "autoprefixer-rails"
 
+gem "awesome_print"
+
 # Use Capistrano for deployment
 # gem "capistrano-rails", group: :development
 group :production do
@@ -84,8 +87,8 @@ group :test  do
   gem "rspec-rails"
   gem "capybara"
   gem "capybara-screenshot"
-  gem "poltergeist"
-  gem "phantomjs", require: "phantomjs/poltergeist"
+  gem "selenium-webdriver"
+  gem "chromedriver-helper"
   gem "database_cleaner"
   gem "launchy"
 end

Gemfile.lock

@@ -37,13 +37,16 @@ GEM
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     addressable (2.3.8)
+    archive-zip (0.7.0)
+      io-like (~> 0.3.0)
     arel (6.0.2)
     ast (2.0.0)
     astrolabe (1.3.1)
       parser (~> 2.2)
     autoprefixer-rails (5.2.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)
@@ -74,7 +77,11 @@ GEM
     capybara-screenshot (1.0.11)
       capybara (>= 1.0, < 3)
       launchy
-    cliver (0.3.2)
+    childprocess (0.5.6)
+      ffi (~> 1.0, >= 1.0.11)
+    chromedriver-helper (1.0.0)
+      archive-zip (~> 0.7.0)
+      nokogiri (~> 1.6)
     coffee-rails (4.1.0)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0, < 5.0)
@@ -106,6 +113,7 @@ GEM
       factory_girl (~> 4.5.0)
       railties (>= 3.0.0)
     fastercsv (1.5.5)
+    ffi (1.9.10)
     foreman (0.78.0)
       thor (~> 0.19.1)
     globalid (0.3.5)
@@ -116,13 +124,15 @@ GEM
     http-cookie (1.0.2)
       domain_name (~> 0.5)
     i18n (0.7.0)
+    io-like (0.3.0)
     jbuilder (2.3.1)
       activesupport (>= 3.0.0, < 5)
       multi_json (~> 1.2)
     json (1.8.3)
     kgio (2.9.3)
     launchy (2.4.3)
       addressable (~> 2.3)
+    libv8 (3.16.14.11)
     loofah (2.0.2)
       nokogiri (>= 1.5.9)
     mail (2.6.3)
@@ -137,12 +147,6 @@ GEM
     parser (2.2.2.6)
       ast (>= 1.1, < 3.0)
     pg (0.18.2)
-    phantomjs (1.9.8.0)
-    poltergeist (1.6.0)
-      capybara (~> 2.1)
-      cliver (~> 0.3.1)
-      multi_json (~> 1.0)
-      websocket-driver (>= 0.2.0)
     powerpack (0.1.1)
     rack (1.6.4)
     rack-test (0.6.3)
@@ -180,9 +184,10 @@ GEM
     raindrops (0.15.0)
     rake (10.4.2)
     rdoc (4.2.0)
-    react_on_rails (0.1.1)
+    react_on_rails (0.1.3)
       execjs (~> 2.5)
       rails (~> 4.2)
+    ref (2.0.0)
     rest-client (1.8.0)
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 3.0)
@@ -219,6 +224,7 @@ GEM
       sexp_processor (~> 4.0)
     ruby_parser (3.7.0)
       sexp_processor (~> 4.1)
+    rubyzip (1.1.7)
     sass (3.4.16)
     sass-rails (5.0.3)
       railties (>= 4.0.0, < 5.0)
@@ -232,6 +238,11 @@ GEM
     sdoc (0.4.1)
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
+    selenium-webdriver (2.47.1)
+      childprocess (~> 0.5)
+      multi_json (~> 1.0)
+      rubyzip (~> 1.0)
+      websocket (~> 1.0)
     sexp_processor (4.6.0)
     simplecov (0.10.0)
       docile (~> 1.1.0)
@@ -252,6 +263,9 @@ GEM
     term-ansicolor (1.3.2)
       tins (~> 1.0)
     terminal-table (1.5.2)
+    therubyracer (0.12.2)
+      libv8 (~> 3.16.14.0)
+      ref
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (1.4.1)
@@ -275,9 +289,7 @@ GEM
       binding_of_caller (>= 0.7.2)
       railties (>= 4.0)
       sprockets-rails (>= 2.0, < 4.0)
-    websocket-driver (0.6.2)
-      websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.2)
+    websocket (1.2.2)
     xpath (2.0.0)
       nokogiri (~> 1.3)
 
@@ -286,12 +298,14 @@ PLATFORMS
 
 DEPENDENCIES
   autoprefixer-rails
+  awesome_print
   bootstrap-sass (~> 3.3.1)
   brakeman
   bundler-audit
   byebug
   capybara
   capybara-screenshot
+  chromedriver-helper
   coffee-rails
   coveralls
   database_cleaner
@@ -301,22 +315,22 @@ DEPENDENCIES
   jbuilder
   launchy
   pg
-  phantomjs
-  poltergeist
   rails (~> 4.2)
   rails-html-sanitizer
   rails_12factor
   rainbow
-  react_on_rails (~> 0.1.1)
+  react_on_rails (~> 0.1.3)
   rspec-rails
   rubocop
   ruby-lint
   sass-rails
   scss_lint
   sdoc
+  selenium-webdriver
   spring
   spring-commands-rspec
   sqlite3
+  therubyracer
   turbolinks
   uglifier (~> 2.7.2)
   unicorn

Procfile.dev

@@ -1,3 +1,4 @@
 web: rails s -p 4000
 client: sh -c 'cd client && $(npm bin)/webpack -w --config webpack.rails.config.js'
+server: sh -c 'cd client && $(npm bin)/webpack -w --config webpack.server.config.js'
 hot: sh -c 'cd client && node server.js'

app/views/pages/index.html.erb

@@ -16,4 +16,4 @@
   </li>
 </ul>
 <hr/>
-<%= react_component('App', {}, prerender: false) %>
+<%= react_component('App', {}, generator_function: true, prerender: true) %>

client/assets/javascripts/App.jsx renamed to client/assets/javascripts/ClientApp.jsx

@@ -13,7 +13,5 @@ const App = () => {
   return reactComponent;
 };
 
-window.App = App;
-
 // Export is needed for the hot reload server
 export default App;

client/assets/javascripts/ServerApp.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import CommentScreen from './components/CommentScreen';
+import CommentStore from './stores/CommentStore';
+
+const App = () => {
+  const reactComponent = (
+    <Provider store={CommentStore}>
+      {() => <CommentScreen />}
+    </Provider>
+  );
+  return reactComponent;
+};
+
+// Export is needed for the hot reload server
+export default App;

client/assets/javascripts/actions/CommentActionCreators.js

@@ -43,9 +43,10 @@ export function submitCommentFailure(error) {
 
 export function fetchComments() {
   return dispatch => {
-    return CommentsManager.fetchComments().then(
-      comments => dispatch(fetchCommentsSuccess(comments)),
-      error => dispatch(fetchCommentsFailure(error))
+    return (
+      CommentsManager.fetchComments()
+        .then(res => dispatch(fetchCommentsSuccess(res.data)))
+        .catch(res => dispatch(fetchCommentsFailure(res.data)))
     );
   };
 }
@@ -57,10 +58,11 @@ function dispatchDecrementAjaxCounter(dispatch) {
 export function submitComment(comment) {
   return dispatch => {
     dispatch(incrementAjaxCounter());
-    return CommentsManager.submitComment(comment)
-      .then(
-        _comment => dispatch(submitCommentSuccess(_comment)),
-        error => dispatch(submitCommentFailure(error)))
-      .then(() => dispatchDecrementAjaxCounter(dispatch));
+    return (
+      CommentsManager.submitComment(comment)
+        .then(res => dispatch(submitCommentSuccess(res.data)))
+        .catch(res => dispatch(submitCommentFailure(res.data)))
+        .then(() => dispatchDecrementAjaxCounter(dispatch))
+    );
   };
 }

client/assets/javascripts/clientGlobals.jsx

@@ -0,0 +1,3 @@
+import App from './ClientApp';
+
+window.App = App;

client/assets/javascripts/serverGlobals.jsx

@@ -0,0 +1,7 @@
+// Example of React + Redux
+// Shows the mapping from the exported object to the name used by the server rendering.
+import App from './ServerApp';
+
+// We can use the node global object for exposing.
+// NodeJs: https://nodejs.org/api/globals.html#globals_global
+global.App = App;

client/assets/javascripts/utils/CommentsManager.js

@@ -1,4 +1,4 @@
-import $ from 'jquery';
+import request from 'axios';
 
 const API_URL = 'comments.json';
 
@@ -10,10 +10,11 @@ const CommentsManager = {
    * @returns {Promise} - jqXHR result of ajax call.
    */
   fetchComments() {
-    return Promise.resolve($.ajax({
+    return request({
+      method: 'GET',
       url: API_URL,
-      dataType: 'json',
-    }));
+      responseType: 'json',
+    });
   },
 
   /**
@@ -23,13 +24,34 @@ const CommentsManager = {
    * @returns {Promise} - jqXHR result of ajax call.
    */
   submitComment(comment) {
-    return Promise.resolve($.ajax({
+    return request({
+      method: 'POST',
       url: API_URL,
-      dataType: 'json',
-      type: 'POST',
-      data: {comment: comment},
-    }));
+      responseType: 'json',
+      headers: {
+        'X-CSRF-Token': this.getCSRFToken(),
+      },
+      data: { comment },
+    });
   },
+
+  /**
+   * Get CSRF Token from the DOM.
+   *
+   * @returns {String} - CSRF Token.
+   */
+  getCSRFToken() {
+    const metas = document.getElementsByTagName('meta');
+    for (let i = 0; i < metas.length; i++) {
+      const meta = metas[i];
+      if (meta.getAttribute('name') === 'csrf-token') {
+        return meta.getAttribute('content');
+      }
+    }
+
+    return null;
+  },
+
 };
 
 export default CommentsManager;