Client refactoring

.travis.yml

@@ -5,12 +5,10 @@ rvm:
 install:
   - bundle install
   - npm install
-  - cd client && NODE_ENV=production $(npm bin)/webpack --config webpack.rails.config.js
-  - NODE_ENV=production $(npm bin)/webpack --config webpack.server.config.js
-
+  - cd client && npm run build:client
+  - npm run build:server
 env:
   - export RAILS_ENV=test
-
 before_script:
    - export DISPLAY=:99.0
    - sh -e /etc/init.d/xvfb start

Gemfile

@@ -39,7 +39,7 @@ gem "rails-html-sanitizer"
 # Use Unicorn as the app server
 gem "unicorn"
 
-gem "react_on_rails", "~> 0.1.3"
+gem "react_on_rails", "~> 0.1.6"
 gem "therubyracer"
 
 gem "autoprefixer-rails"

Gemfile.lock

@@ -206,7 +206,7 @@ GEM
     raindrops (0.15.0)
     rake (10.4.2)
     rdoc (4.2.0)
-    react_on_rails (0.1.3)
+    react_on_rails (0.1.6)
       execjs (~> 2.5)
       rails (~> 4.2)
     ref (2.0.0)
@@ -351,7 +351,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_12factor
   rainbow
-  react_on_rails (~> 0.1.3)
+  react_on_rails (~> 0.1.6)
   rspec-rails
   rubocop
   ruby-lint

Procfile.dev

@@ -1,4 +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'
+client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
+server: sh -c 'cd client && npm run build:dev:server'
+hot: sh -c 'cd client && npm start'

README.md

@@ -102,7 +102,7 @@ the JS bundle. We've chosen to let Rails handle CSS, SCSS, images, fonts.
 
 ```
 cd client
-$(npm bin)/webpack -w --config webpack.rails.config.js
+npm run build:dev
 ```
 
 `client-bundle.js` is generated and saved to `app/assets/javascripts`. This is included in the
@@ -182,7 +182,7 @@ jQuery and jQuery-ujs are not required within `app/assets/javascript/application
 and have been moved under`/client` and managed by npm. The modules are exposed via entry point
 by `webpack.common.config.js`.
 
-In `application.js`, it's critical that any libraries that depend on jQuery come after the inclusion 
+In `application.js`, it's critical that any libraries that depend on jQuery come after the inclusion
 of the Webpack bundle, such as the twitter bootstrap javascript.
 
 Please refer to [Considerations for jQuery with Rails and Webpack](http://forum.railsonmaui.com/t/considerations-for-jquery-with-rails-and-webpack/344) for further info.
@@ -260,7 +260,7 @@ Run the tests with `rspec`.
 ### RubyMine/Webstorm Linting Configuration
   * I started out trying to make RubyMine and WebStorm catch and fix linting errors. However, I find
     it faster to just do this with the command line. Your mileage may vary.
-  * Create a custom scope like this for RubyMine, named "Inspection Scope" 
+  * Create a custom scope like this for RubyMine, named "Inspection Scope"
 
     file[react-rails-tutorial]:*/&&!file[react-rails-tutorial]:tmp//*&&!file[react-rails-tutorial]:log//*&&!file[react-rails-tutorial]:client/node_modules//*&&!file[react-rails-tutorial]:client/assets/fonts//*&&!file[react-rails-tutorial]:app/assets/fonts//*&&!file[react-rails-tutorial]:bin//*&&!file[react-rails-tutorial]:app/assets/javascripts//*
 
@@ -289,7 +289,7 @@ WebStorm opened up to the `client` directory to focus on JSX and Sass files.
 
 # Misc Tips
 
-## Cleanup local branches merged to master 
+## Cleanup local branches merged to master
 ```
 alias git-cleanup-merged-branches='git branch --merged master | grep -v master | xargs git branch -d'
 ```

app/assets/javascripts/application.js

@@ -13,7 +13,9 @@
 // Need to be on top to allow Poltergeist test to work with React.
 //= require es5-shim/es5-shim
 
-// It is important that generated/client-bundle must be before bootstrap since it is exposing jQuery and jQuery-ujs
-//= require generated/client-bundle
+// It is important that generated/vendor-bundle must be before bootstrap since it is exposing jQuery and jQuery-ujs
+//= require generated/vendor-bundle
+//= require generated/app-bundle
+
 //= require bootstrap-sprockets
 //= require turbolinks

app/controllers/pages_controller.rb

@@ -1,4 +1,5 @@
 class PagesController < ApplicationController
   def index
+    @comments = Comment.all
   end
 end

app/views/pages/index.html.erb

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

client/.eslintrc

@@ -13,4 +13,4 @@ env:
 rules:
   indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
   react/sort-comp: 0
-  react/jsx-quotes: 0
+  react/jsx-quotes: 1

client/.jscsrc

@@ -1,5 +1,7 @@
 {
   "preset": "airbnb",
   "fileExtensions": [".js", ".jsx"],
-  "excludeFiles": ["build/**", "node_modules/**"]
+  "excludeFiles": ["build/**", "node_modules/**"],
+
+  "validateQuoteMarks": null                        // Issue with JSX quotemarks: https://github.com/jscs-dev/babel-jscs/issues/12
 }

client/assets/javascripts/actions/CommentActionCreators.js → client/app/actions/commentsActionCreators.js

@@ -1,5 +1,5 @@
-import CommentsManager from '../utils/CommentsManager';
-import * as actionTypes from '../constants/ActionTypes';
+import commentsManager from '../utils/commentsManager';
+import * as actionTypes from '../constants/commentsConstants';
 
 export function incrementAjaxCounter() {
   return {
@@ -44,25 +44,23 @@ export function submitCommentFailure(error) {
 export function fetchComments() {
   return dispatch => {
     return (
-      CommentsManager.fetchComments()
+      commentsManager
+        .fetchComments()
         .then(res => dispatch(fetchCommentsSuccess(res.data)))
         .catch(res => dispatch(fetchCommentsFailure(res.data)))
     );
   };
 }
 
-function dispatchDecrementAjaxCounter(dispatch) {
-  return dispatch(decrementAjaxCounter());
-}
-
 export function submitComment(comment) {
   return dispatch => {
     dispatch(incrementAjaxCounter());
     return (
-      CommentsManager.submitComment(comment)
+      commentsManager
+        .submitComment(comment)
         .then(res => dispatch(submitCommentSuccess(res.data)))
         .catch(res => dispatch(submitCommentFailure(res.data)))
-        .then(() => dispatchDecrementAjaxCounter(dispatch))
+        .then(() => dispatch(decrementAjaxCounter()))
     );
   };
 }

client/app/components/Comment.jsx

@@ -0,0 +1,26 @@
+import React, { PropTypes } from 'react';
+import marked from 'marked';
+
+const Comment = React.createClass({
+  displayName: 'Comment',
+
+  propTypes: {
+    author: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  },
+
+  render() {
+    const { author, text } = this.props;
+    const rawMarkup = marked(text, { gfm: true, sanitize: true });
+    return (
+      <div className="comment">
+        <h2 className="comment-author">
+          {author}
+        </h2>
+        <span dangerouslySetInnerHTML={{__html: rawMarkup}}/>
+      </div>
+    );
+  },
+});
+
+export default Comment;

client/assets/javascripts/components/CommentBox.jsx → client/app/components/CommentBox.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+
 import CommentForm from './CommentForm';
 import CommentList from './CommentList';
 
 const CommentBox = React.createClass({
   displayName: 'CommentBox',
 
   propTypes: {
-    pollInterval: React.PropTypes.number.isRequired,
-    actions: React.PropTypes.object.isRequired,
-    data: React.PropTypes.object.isRequired,
+    pollInterval: PropTypes.number.isRequired,
+    actions: PropTypes.object.isRequired,
+    data: PropTypes.object.isRequired,
   },
 
   componentDidMount() {
     const { fetchComments } = this.props.actions;
     fetchComments();
-    setInterval(fetchComments,
-      this.props.pollInterval);
+    setInterval(fetchComments, this.props.pollInterval);
   },
 
   ajaxCounter() {
@@ -30,20 +30,23 @@ const CommentBox = React.createClass({
     const { actions, data } = this.props;
 
     return (
-      <div className='commentBox container'>
+      <div className="commentBox container">
         <h1>
-          Comments { this.isSendingAjax() ? `SENDING AJAX REQUEST! Ajax Counter is ${this.ajaxCounter()}` : '' }
+          Comments { this.isSendingAjax() && `SENDING AJAX REQUEST! Ajax Counter is ${this.ajaxCounter()}` }
         </h1>
         <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.</p>
+          <b>Name</b> is preserved, <b>Text</b> is reset, between submits.
+        </p>
         <CommentForm
           ajaxSending={this.isSendingAjax()}
           error={data.get('submitCommentError')}
-          actions={actions}/>
+          actions={actions}
+        />
         <CommentList
-          comments={data.get('comments')}
-          error={data.get('fetchCommentError')}/>
+          $$comments={data.get('$$comments')}
+          error={data.get('fetchCommentError')}
+        />
       </div>
     );
   },