Implement React [email protected]

package.json

@@ -35,8 +35,9 @@
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "react-redux": "5.0.5",
-    "react-router": "3.0.5",
-    "react-router-redux": "4.0.8",
+    "react-router": "4.2.0",
+    "react-router-dom": "4.0.0",
+    "react-router-redux": "5.0.0-alpha.6",
     "redux": "3.6.0",
     "redux-thunk": "2.1.0"
   },
@@ -55,18 +56,19 @@
     "babel-preset-react-hmre": "1.1.1",
     "babel-preset-stage-1": "6.16.0",
     "browser-sync": "2.18.5",
-    "chalk": "1.1.3",
+    "chalk": "2.0.1",
     "connect-history-api-fallback": "1.3.0",
-    "coveralls": "2.11.15",
-    "css-loader": "0.26.1",
-    "enzyme": "2.8.2",
-    "eslint": "3.12.2",
-    "eslint-plugin-import": "2.2.0",
-    "eslint-plugin-react": "6.8.0",
-    "eslint-watch": "2.1.14",
-    "extract-text-webpack-plugin": "2.1.0",
-    "file-loader": "0.9.0",
-    "html-webpack-plugin": "2.24.1",
+    "coveralls": "2.13.1",
+    "css-loader": "0.28.4",
+    "enzyme": "2.9.1",
+    "eslint": "4.2.0",
+    "eslint-plugin-import": "2.7.0",
+    "eslint-plugin-react": "7.1.0",
+    "eslint-watch": "3.1.2",
+    "extract-text-webpack-plugin": "3.0.0-rc.2",
+    "file-loader": "0.11.2",
+    "history": "4.6.0",
+    "html-webpack-plugin": "2.29.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "18.1.0",
     "json-loader": "0.5.4",

src/components/AboutPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router-dom';
 import '../styles/about-page.css';
 
 // Since this component is simple and static, there's no parent container for it.

src/components/AboutPage.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import { shallow } from 'enzyme';
 import AboutPage from './AboutPage';
 
 describe('<AboutPage />', () => {

src/components/App.js

@@ -1,21 +1,36 @@
+/* eslint-disable import/no-named-as-default */
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, IndexLink } from 'react-router';
+import { Route } from 'react-router';
+import { Switch, NavLink } from 'react-router-dom';
+import HomePage from './HomePage';
+import FuelSavingsPage from '../containers/FuelSavingsPage';
+import AboutPage from './AboutPage';
+import NotFoundPage from './NotFoundPage';
 
 // This is a class-based component because the current
 // version of hot reloading won't hot reload a stateless
 // component at the top-level.
+
 class App extends React.Component {
   render() {
+    const activeStyle = { color: 'blue' };
     return (
       <div>
-        <IndexLink to="/">Home</IndexLink>
-        {' | '}
-        <Link to="/fuel-savings">Demo App</Link>
-        {' | '}
-        <Link to="/about">About</Link>
-        <br/>
-        {this.props.children}
+        <div>
+          <NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink>
+          {' | '}
+          <NavLink to="/fuel-savings" activeStyle={activeStyle}>Demo App</NavLink>
+          {' | '}
+          <NavLink to="/about" activeStyle={activeStyle}>About</NavLink>
+        </div>
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          <Route path="/fuel-savings" component={FuelSavingsPage} />
+          <Route path="/about" component={AboutPage} />
+          <Route component={NotFoundPage} />
+        </Switch>
       </div>
     );
   }

src/components/FuelSavingsForm.js

@@ -32,48 +32,48 @@ class FuelSavingsForm extends React.Component {
         <h2>Fuel Savings Analysis</h2>
         <table>
           <tbody>
-          <tr>
-            <td><label htmlFor="newMpg">New Vehicle MPG</label></td>
-            <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="newMpg" value={fuelSavings.newMpg}/>
-            </td>
-          </tr>
-          <tr>
-            <td><label htmlFor="tradeMpg">Trade-in MPG</label></td>
-            <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="tradeMpg" value={fuelSavings.tradeMpg}/>
-            </td>
-          </tr>
-          <tr>
-            <td><label htmlFor="newPpg">New Vehicle price per gallon</label></td>
-            <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="newPpg" value={fuelSavings.newPpg}/>
-            </td>
-          </tr>
-          <tr>
-            <td><label htmlFor="tradePpg">Trade-in price per gallon</label></td>
-            <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="tradePpg" value={fuelSavings.tradePpg}/>
-            </td>
-          </tr>
-          <tr>
-            <td><label htmlFor="milesDriven">Miles Driven</label></td>
-            <td>
-              <FuelSavingsTextInput
+            <tr>
+              <td><label htmlFor="newMpg">New Vehicle MPG</label></td>
+              <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="newMpg" value={fuelSavings.newMpg}/>
+              </td>
+            </tr>
+            <tr>
+              <td><label htmlFor="tradeMpg">Trade-in MPG</label></td>
+              <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="tradeMpg" value={fuelSavings.tradeMpg}/>
+              </td>
+            </tr>
+            <tr>
+              <td><label htmlFor="newPpg">New Vehicle price per gallon</label></td>
+              <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="newPpg" value={fuelSavings.newPpg}/>
+              </td>
+            </tr>
+            <tr>
+              <td><label htmlFor="tradePpg">Trade-in price per gallon</label></td>
+              <td><FuelSavingsTextInput onChange={this.fuelSavingsKeypress} name="tradePpg" value={fuelSavings.tradePpg}/>
+              </td>
+            </tr>
+            <tr>
+              <td><label htmlFor="milesDriven">Miles Driven</label></td>
+              <td>
+                <FuelSavingsTextInput
                 onChange={this.fuelSavingsKeypress}
                 name="milesDriven"
                 value={fuelSavings.milesDriven}/>
-              miles per
-              <select
+                miles per
+                <select
                 name="milesDrivenTimeframe"
                 onChange={this.onTimeframeChange}
                 value={fuelSavings.milesDrivenTimeframe}>
-                <option value="week">Week</option>
-                <option value="month">Month</option>
-                <option value="year">Year</option>
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td><label>Date Modified</label></td>
-            <td>{fuelSavings.dateModified}</td>
-          </tr>
+                  <option value="week">Week</option>
+                  <option value="month">Month</option>
+                  <option value="year">Year</option>
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td><label>Date Modified</label></td>
+              <td>{fuelSavings.dateModified}</td>
+            </tr>
           </tbody>
         </table>
 
@@ -85,11 +85,12 @@ class FuelSavingsForm extends React.Component {
     );
   }
 }
+const { func, object } = PropTypes;
 
 FuelSavingsForm.propTypes = {
-  saveFuelSavings: PropTypes.func.isRequired,
-  calculateFuelSavings: PropTypes.func.isRequired,
-  fuelSavings: PropTypes.object.isRequired
+  saveFuelSavings: func.isRequired,
+  calculateFuelSavings: func.isRequired,
+  fuelSavings: object.isRequired
 };
 
 export default FuelSavingsForm;

src/components/FuelSavingsResults.js

@@ -19,9 +19,9 @@ const FuelSavingsResults = ({savings}) => {
   return (
     <table>
       <tbody>
-      <tr>
-        <td className="fuel-savings-label">{resultLabel}</td>
-        <td>
+        <tr>
+          <td className="fuel-savings-label">{resultLabel}</td>
+          <td>
           <table>
             <tbody>
             <tr>

src/components/FuelSavingsResults.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import { shallow } from 'enzyme';
 import FuelSavingsResults from './FuelSavingsResults';
 
 describe('<FuelSavingsResults />', () => {

src/components/FuelSavingsTextInput.js

@@ -16,13 +16,15 @@ const FuelSavingsTextInput = (props) => {
   );
 };
 
+const { string, func, number, oneOfType } = PropTypes;
+
 FuelSavingsTextInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
+  name: string.isRequired,
+  onChange: func.isRequired,
+  placeholder: string,
+  value: oneOfType([
+    string,
+    number
   ])
 };
 

src/components/FuelSavingsTextInput.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import { shallow } from 'enzyme';
 import FuelSavingsTextInput from './FuelSavingsTextInput';
 
 describe('<FuelSavingsTextInput />', () => {

src/components/HomePage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router-dom';
 
 const HomePage = () => {
   return (
@@ -8,7 +8,7 @@ const HomePage = () => {
 
       <h2>Get Started</h2>
       <ol>
-        <li>Review the <Link to="fuel-savings">demo app</Link></li>
+        <li>Review the <Link to="/fuel-savings">demo app</Link></li>
         <li>Remove the demo and start coding: npm run remove-demo</li>
       </ol>
     </div>

src/components/NotFoundPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 const NotFoundPage = () => {
   return (

src/components/Root.js

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { ConnectedRouter } from 'react-router-redux';
+console.log('%cConnectedRouter', 'background:red;', ConnectedRouter);
 import { Provider } from 'react-redux';
-import routes from '../routes';
-import { Router } from 'react-router';
+import App from './App';
 
 export default class Root extends Component {
   render() {
     const { store, history } = this.props;
     return (
       <Provider store={store}>
-        <Router history={history} routes={routes} />
+        <ConnectedRouter history={history}>
+          <App />
+        </ConnectedRouter>
       </Provider>
     );
   }

src/index.js

@@ -2,21 +2,13 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import { browserHistory } from 'react-router';
 import { AppContainer } from 'react-hot-loader';
+import configureStore, { history } from './store/configureStore';
 import Root from './components/Root';
-
-import configureStore from './store/configureStore';
-require('./favicon.ico'); // Tell webpack to load favicon.ico
 import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
-import { syncHistoryWithStore } from 'react-router-redux';
-
+require('./favicon.ico'); // Tell webpack to load favicon.ico
 const store = configureStore();
 
-// Create an enhanced history that syncs navigation events with the store
-const history = syncHistoryWithStore(browserHistory, store);
-
-
 render(
   <AppContainer>
     <Root store={store} history={history} />

src/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 import fuelSavings from './fuelSavingsReducer';
-import {routerReducer} from 'react-router-redux';
+import { routerReducer } from 'react-router-redux';
 
 const rootReducer = combineReducers({
   fuelSavings,

src/store/configureStore.js

@@ -1,15 +1,20 @@
 import {createStore, compose, applyMiddleware} from 'redux';
 import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
 import thunk from 'redux-thunk';
+import createHistory from 'history/createBrowserHistory';
+// 'routerMiddleware': the new way of storing route changes with redux middlware since rrV4.
+import { routerMiddleware } from 'react-router-redux';
 import rootReducer from '../reducers';
-
+export const history = createHistory();
 function configureStoreProd(initialState) {
+  const reactRouterMiddleware = routerMiddleware(history);
   const middlewares = [
     // Add other middleware on this line...
 
     // thunk middleware can also accept an extra argument to be passed to each thunk action
     // https://github.com/gaearon/redux-thunk#injecting-a-custom-argument
     thunk,
+    reactRouterMiddleware,
   ];
 
   return createStore(rootReducer, initialState, compose(
@@ -19,6 +24,7 @@ function configureStoreProd(initialState) {
 }
 
 function configureStoreDev(initialState) {
+  const reactRouterMiddleware = routerMiddleware(history);
   const middlewares = [
     // Add other middleware on this line...
 
@@ -28,6 +34,7 @@ function configureStoreDev(initialState) {
     // thunk middleware can also accept an extra argument to be passed to each thunk action
     // https://github.com/gaearon/redux-thunk#injecting-a-custom-argument
     thunk,
+    reactRouterMiddleware,
   ];
 
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
@@ -49,4 +56,4 @@ function configureStoreDev(initialState) {
 
 const configureStore = process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;
 
-export default configureStore;
+export default configureStore;