Merge pull request #282 from lifeiscontent/feature/cleanup-react-comp…

…onents

Feature/cleanup react components

Gemfile

@@ -35,4 +35,4 @@ else
   gem "turbolinks", "~> 5.0.0.beta"
 end
 gem "uglifier", ">= 2.7.2"
-gem "web-console", "~> 2.0"
+gem "web-console", "~> 2.0", group: :development

docs/additional_reading/react_router.md

@@ -30,7 +30,7 @@ const RouterApp = (props, location) => {
   // Important that you don't do this if you are redirecting or have an error.
   return (
     <Provider store={store}>
-      <RoutingContext {...routeProps} />
+      <RouterContext {...routeProps} />
     </Provider>
   );
 };

spec/dummy/client/app/components/HelloWorldContainer.jsx

@@ -6,30 +6,22 @@ import HelloWorldRedux from './HelloWorldRedux';
 
 import * as helloWorldActions from '../actions/HelloWorldActions';
 
-function select(state) {
-  // Which part of the Redux global state does our component want to receive as props?
-  return { data: state.helloWorldData };
-}
-
-class HelloWorldContainer extends React.Component {
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    data: PropTypes.object.isRequired,
-  };
+const HelloWorldContainer = ({ actions, data }) => (
+  <HelloWorldRedux {...{ actions, data }} />
+);
 
-  constructor(props, context) {
-    super(props, context);
-  }
+HelloWorldContainer.propTypes = {
+  actions: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+};
 
-  render() {
-    const { dispatch, data } = this.props;
-    const actions = bindActionCreators(helloWorldActions, dispatch);
+function mapStateToProps(state) {
+  return { data: state.helloWorldData };
+}
 
-    return (
-      <HelloWorldRedux {...{ actions, data }} />
-    );
-  }
+function mapDispatchToProps(dispatch) {
+  return { actions: bindActionCreators(helloWorldActions, dispatch) };
 }
 
 // Don't forget to actually use connect!
-export default connect(select)(HelloWorldContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(HelloWorldContainer);

spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 // Example of logging and throw error handling
+
 class HelloWorldWithLogAndThrow extends React.Component {
   constructor(props, context) {
     super(props, context);

spec/dummy/client/app/components/RouterFirstPage.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 
-export default class RouterFirstPage extends React.Component {
+const RouterFirstPage = () => (
+  <div className="container">
+    <h2>React Router First Page</h2>
+    <p>
+      This page brought to you by React Router
+    </p>
+  </div>
+);
 
-  render() {
-    return (
-      <div className="container">
-        <h2>React Router First Page</h2>
-        <p>
-          This page brought to you by React Router
-        </p>
-      </div>
-    );
-  }
-
-}
+export default RouterFirstPage;

spec/dummy/client/app/components/RouterLayout.jsx

@@ -1,39 +1,36 @@
 import React from 'react';
 import { Link } from 'react-router';
 
-export default class RouterLayout extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.object,
-  };
+const RouterLayout = ({ children }) => (
+  <div className="container">
+    <h1>React Router is working!</h1>
+    <p>
+      Woohoo, we can use <code>react-router</code> here!
+    </p>
+    <ul>
+      <li>
+        <Link to="/react_router">
+          React Router Layout Only
+        </Link>
+      </li>
+      <li>
+        <Link to="/react_router/first_page">
+          Router First Page
+        </Link>
+      </li>
+      <li>
+        <Link to="/react_router/second_page">
+          Router Second Page
+        </Link>
+      </li>
+    </ul>
+    <hr />
+    {children}
+  </div>
+);
 
-  render() {
-    return (
-      <div className="container">
-        <h1>React Router is working!</h1>
-        <p>
-          Woohoo, we can use <code>react-router</code> here!
-        </p>
-        <ul>
-          <li>
-            <Link to="/react_router">
-              React Router Layout Only
-            </Link>
-          </li>
-          <li>
-            <Link to="/react_router/first_page">
-              Router First Page
-            </Link>
-          </li>
-          <li>
-            <Link to="/react_router/second_page">
-              Router Second Page
-            </Link>
-          </li>
-        </ul>
-        <hr />
-        {this.props.children}
-      </div>
-    );
-  }
+RouterLayout.propTypes = {
+  children: React.PropTypes.object,
+};
 
-}
+export default RouterLayout;

spec/dummy/client/app/components/RouterSecondPage.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 
-export default class RouterSecondPage extends React.Component {
+const RouterSecondPage = () => (
+  <div className="container">
+    <h2>React Router Second Page</h2>
+    <p>
+      This page brought to you by React Router
+    </p>
+  </div>
+);
 
-  render() {
-    return (
-      <div className="container">
-        <h2>React Router Second Page</h2>
-        <p>
-          This page brought to you by React Router
-        </p>
-      </div>
-    );
-  }
-
-}
+export default RouterSecondPage;

spec/dummy/client/app/startup/ClientReduxApp.jsx

@@ -2,9 +2,7 @@
 // Compare this to the ./ServerApp.jsx file which is used for server side rendering.
 
 import React from 'react';
-import { combineReducers } from 'redux';
-import { applyMiddleware } from 'redux';
-import { createStore } from 'redux';
+import { combineReducers, applyMiddleware, createStore } from 'redux';
 import { Provider } from 'react-redux';
 import middleware from 'redux-thunk';
 

spec/dummy/client/app/startup/ClientRouterApp.jsx

@@ -1,12 +1,7 @@
 import React from 'react';
-import Router from 'react-router';
-import createHistory from 'history/lib/createBrowserHistory';
+import Router, { browserHistory } from 'react-router';
 import routes from '../routes/routes';
 
-export default (props) => {
-  const history = createHistory();
-
-  return (
-    <Router history={history} children={routes} {...props} />
-  );
-};
+export default (props) => (
+  <Router history={browserHistory} children={routes} {...props} />
+);

spec/dummy/client/app/startup/ServerReduxApp.jsx

@@ -4,9 +4,7 @@
 // render.
 
 import React from 'react';
-import { combineReducers } from 'redux';
-import { applyMiddleware } from 'redux';
-import { createStore } from 'redux';
+import { combineReducers, applyMiddleware, createStore } from 'redux';
 import { Provider } from 'react-redux';
 import middleware from 'redux-thunk';
 

spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx

@@ -12,7 +12,6 @@ import { Provider } from 'react-redux';
  *  React will see that the state is the same and not do anything.
  */
 export default () => {
-
   // This is where we get the existing store.
   const store = ReactOnRails.getStore('SharedReduxStore');
 

spec/dummy/client/app/startup/ServerRouterApp.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { match, RoutingContext } from 'react-router';
+import { match, RouterContext } from 'react-router';
 
 import routes from '../routes/routes';
 
@@ -24,6 +24,6 @@ export default (props, location) => {
 
   // Important that you don't do this if you are redirecting or have an error.
   return (
-    <RoutingContext {...routeProps} />
+    <RouterContext {...routeProps} />
   );
 };

spec/dummy/client/app/startup/serverRegistration.jsx

@@ -23,7 +23,7 @@ import RouterApp from './ServerRouterApp';
 
 import PureComponent from '../components/PureComponent';
 
-import SharedReduxStore from '../stores/SharedReduxStore'
+import SharedReduxStore from '../stores/SharedReduxStore';
 
 ReactOnRails.register({
   HelloWorld,
@@ -38,6 +38,5 @@ ReactOnRails.register({
 });
 
 ReactOnRails.registerStore({
-  SharedReduxStore
+  SharedReduxStore,
 });
-

spec/dummy/client/app/stores/SharedReduxStore.jsx

@@ -1,6 +1,4 @@
-import { combineReducers } from 'redux';
-import { applyMiddleware } from 'redux';
-import { createStore } from 'redux';
+import { combineReducers, applyMiddleware, createStore } from 'redux';
 import middleware from 'redux-thunk';
 
 import reducers from '../reducers/reducersIndex';