[WIP] Swap alt with redux

.gitignore

@@ -23,3 +23,6 @@ npm-debug.log
 
 # Ignore bundle dependencies
 vendor/ruby
+
+# RVM gemset
+.ruby-gemset

CHANGELOG.md

@@ -1,3 +1,8 @@
 v1.1 - Sunday, March 22, 2015
 ------------------------------
 1. Changed /webpack directory to /client
+
+
+This is out of date.
+
+See: [pull requests](https://github.com/justin808/react-webpack-rails-tutorial/pulls?utf8=%E2%9C%93&q=is%3Apr)

Gemfile

@@ -80,6 +80,7 @@ group :test  do
   gem "capybara"
   gem "capybara-screenshot"
   gem "poltergeist"
+  gem "phantomjs", require: "phantomjs/poltergeist"
   gem "database_cleaner"
   gem "launchy"
 end

Gemfile.lock

@@ -129,6 +129,7 @@ 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)
@@ -274,6 +275,7 @@ DEPENDENCIES
   jquery-rails
   launchy
   pg
+  phantomjs
   poltergeist
   rails (~> 4.2)
   rails-html-sanitizer
@@ -292,6 +294,3 @@ DEPENDENCIES
   uglifier
   unicorn
   web-console
-
-BUNDLED WITH
-   1.10.6

README.md

@@ -1,15 +1,17 @@
 # React, React-Bootstrap, and ES-6 on Rails via WebPack
 
+## Now with Redux!
+
 By Justin Gordon and the Rails On Maui Team, http://www.railsonmaui.com
 
-- If you came to here from the blog article, this example project has evolved. See CHANGELOG.md for 
-  what's changed.
-- Please email us at [justin@railsonmaui.com](mailto:justin@railsonmaui.com) if you have a ReactJs +
-  Rails project.
-- Please file issues for problems and feature requests.
-- Pull requests are welcome!
+- If you came to here from the blog article, this example project has evolved.
+  See [pull requests](https://github.com/justin808/react-webpack-rails-tutorial/pulls?utf8=%E2%9C%93&q=is%3Apr).
 - If this work interests you and you are looking for full or part-time remote work, please
   [click here](http://forum.railsonmaui.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156).
+- Please email us at [justin@railsonmaui.com](mailto:justin@railsonmaui.com) if you have a ReactJs +
+  Rails project and are interested in help from our experienced team.
+- Please file issues for problems and feature requests.
+- Pull requests are welcome! (and a great way to get on the team)
 - Feel free to open discussions at [forum.railsonmaui.com](http://www.forum.railsonmaui.com).
 - We now have a [gitter chat room for this topic](https://gitter.im/justin808/react-webpack-rails-tutorial).
 
@@ -33,7 +35,7 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
 
 In no particular order:
 
-- Example of Rails 4.2 with ReactJs/Flux with Webpack and ES6.
+- Example of Rails 4.2 with ReactJs/Redux with Webpack and ES6.
 - Enable development of a JS client independently from Rails using Webpack Hot Module Reload.
 - Easily enable use of npm modules with a Rails application.
 - Easily enable retrofitting such a JS framework into an existing Rails app.

app/views/pages/index.html.erb

@@ -1,7 +1,21 @@
-<h1>Using React</h1>
+<h1>Using React + Redux + Rails Backend</h1>
+<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.railsonmaui.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156" %>
+    and
+    <%= link_to "here",
+     "http://forum.railsonmaui.com/t/railsonmaui-is-hiring-and-partnering-part-time-remote-is-ok/156/2" %>.
+  </li>
+  <li>
+    Please see the
+    <%= link_to "github.com/react-webpack-rails-tutorial/README.md",
+        "https://github.com/justin808/react-webpack-rails-tutorial/blob/master/README.md" %>
+    for details of how this example site was built.
+  </li>
+</ul>
 <hr/>
-
-
 <div id="content"></div>
 
 

client/.babelrc

@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}

client/.eslintrc

@@ -1,4 +1,16 @@
-{
-  "extends": "airbnb",
+---
+parser: babel-eslint
 
-}
+extends: eslint-config-airbnb
+
+plugins:
+  - react
+
+env:
+  browser: true
+  node: true
+
+rules:
+  indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
+  react/sort-comp: 0
+  react/jsx-quotes: 0

client/assets/javascripts/App.jsx

@@ -1,29 +1,19 @@
 import $ from 'jquery';
+
 import React from 'react';
-import CommentBox from './components/CommentBox';
+import { Provider } from 'react-redux';
+
+import CommentScreen from './components/CommentScreen';
+import CommentStore from './stores/CommentStore';
 
 $(function onLoad() {
   function render() {
     if ($('#content').length > 0) {
-      React.render(
-        <div>
-          <CommentBox url='comments.json' pollInterval={5000}/>
-
-          <div className='container'>
-            <a href='http://www.railsonmaui.com'>
-              <h3 className='open-sans-light'>
-                <div className='logo'/>
-                Example of styling using image-url and Open Sans Light custom font
-              </h3>
-            </a>
-            <a href='https://twitter.com/railsonmaui'>
-              <div className='twitter-image'/>
-              Rails On Maui on Twitter
-            </a>
-          </div>
-        </div>,
-        document.getElementById('content')
-      );
+      React.render((
+        <Provider store={CommentStore}>
+          { () => <CommentScreen /> }
+        </Provider>
+      ), document.getElementById('content'));
     }
   }
 

client/assets/javascripts/actions/CommentActionCreators.js

@@ -0,0 +1,66 @@
+import CommentsManager from '../utils/CommentsManager';
+import * as actionTypes from '../constants/ActionTypes';
+
+export function incrementAjaxCounter() {
+  return {
+    type: actionTypes.INCREMENT_AJAX_COUNTER,
+  };
+}
+
+export function decrementAjaxCounter() {
+  return {
+    type: actionTypes.DECREMENT_AJAX_COUNTER,
+  };
+}
+
+export function fetchCommentsSuccess(comments) {
+  return {
+    type: actionTypes.FETCH_COMMENTS_SUCCESS,
+    comments,
+  };
+}
+
+export function fetchCommentsFailure(error) {
+  return {
+    type: actionTypes.FETCH_COMMENTS_FAILURE,
+    error,
+  };
+}
+
+export function submitCommentSuccess(comment) {
+  return {
+    type: actionTypes.SUBMIT_COMMENT_SUCCESS,
+    comment,
+  };
+}
+
+export function submitCommentFailure(error) {
+  return {
+    type: actionTypes.SUBMIT_COMMENT_FAILURE,
+    error,
+  };
+}
+
+export function fetchComments() {
+  return dispatch => {
+    return CommentsManager.fetchComments().then(
+      comments => dispatch(fetchCommentsSuccess(comments)),
+      error => dispatch(fetchCommentsFailure(error))
+    );
+  };
+}
+
+function dispatchDecrementAjaxCounter(dispatch) {
+  return dispatch(decrementAjaxCounter());
+}
+
+export function submitComment(comment) {
+  return dispatch => {
+    dispatch(incrementAjaxCounter());
+    return CommentsManager.submitComment(comment)
+      .then(
+        _comment => dispatch(submitCommentSuccess(_comment)),
+        error => dispatch(submitCommentFailure(error)))
+      .then(() => dispatchDecrementAjaxCounter(dispatch));
+  };
+}