Merge pull request #30 from combine/react-router-v4

Upgrade to React Router v4

Author: calvinl

.babelrc

@@ -4,6 +4,7 @@
     "react"
   ],
   "plugins": [
+    "react-hot-loader/babel",
     "transform-class-properties",
     "transform-decorators",
     "transform-object-rest-spread",

.npmrc

@@ -26,9 +26,8 @@ Direct your browser to `http://localhost:3000`.
 
 ## Directory Structure
 ```
-├── client
-│   └── index.js
-├── common
+├── client                         # Client-side code
+├── common                         # Shared code between client and server
 │   ├── css
 │   ├── fonts
 │   ├── images
@@ -40,22 +39,10 @@ Direct your browser to `http://localhost:3000`.
 │   │   ├── middleware            # Middleware for redux
 │   │   ├── reducers              # Redux reducers
 │   │   ├── routes                # Routes each have an index.js which exports a react-router Route.
-│   │   ├── selectors             # Selectors for getting state data
 │   │   └── store                 # Store configuration for production and dev.
 │   └── layouts                   # Layout files to be rendered by the server.
-├── nodemon.json
-├── package.json
-├── server
-│   ├── config.js
-│   ├── index.js
-│   └── server.js
-├── webpack
-│   ├── base.js
-│   ├── config.js
-│   ├── development.hot.js
-│   ├── development.js
-│   ├── isomorphic.js
-│   └── production.js
+├── server                        # Server-side code
+├── webpack                       # Webpack configuration files
 ```
 
 ## CSS Modules

.nvmrc

@@ -2,11 +2,13 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router';
-import { browserHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import { AppContainer } from 'react-hot-loader';
+import createHistory from 'history/createBrowserHistory';
 import configureStore from 'store';
-import routes from 'routes';
+import App from 'containers/App';
+
+const history = createHistory();
 
 /* Images
  * This space is reserved for images that are required by server rendering,
@@ -20,13 +22,26 @@ const rootElement = document.getElementById('app');
 // Creates the Redux store based on the initial state passed down by the server
 // rendering.
 const initialState = window.__INITIAL_STATE__;
-const store = configureStore(initialState);
-const history = syncHistoryWithStore(browserHistory, store);
+const store = configureStore(initialState, history);
+
+const render = (Component) => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <AppContainer>
+        <ConnectedRouter history={history}>
+          <Component />
+        </ConnectedRouter>
+      </AppContainer>
+    </Provider>,
+    rootElement
+  );
+};
+
+render(App);
 
-// Render the app!
-ReactDOM.render(
-  <Provider store={store}>
-    <Router history={history} routes={routes} />
-  </Provider>,
-  rootElement
-);
+if (module.hot) {
+  // We need to re-require the main App module.
+  module.hot.accept('../common/js/containers/App', () => {
+    render(require('../common/js/containers/App').default);
+  });
+}

README.md

@@ -0,0 +1,6 @@
+import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from 'constants';
+import generateActionCreator from 'lib/generateActionCreator';
+
+export const addTodo = generateActionCreator(ADD_TODO, 'text');
+export const removeTodo = generateActionCreator(REMOVE_TODO, 'id');
+export const toggleTodo = generateActionCreator(TOGGLE_TODO, 'id');

client/index.js

@@ -0,0 +1,35 @@
+/**
+ * 404.js
+ * Renders a 404 page.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ERROR_MESSAGES = {
+  404: 'The page you requested was not found.',
+  500: 'The server encountered an error.'
+};
+
+const ErrorPage = (props) => {
+  const { message } = props;
+
+  return (
+    <div>
+      <h1>Sorry!</h1>
+      <p>{message}</p>
+    </div>
+  );
+};
+
+ErrorPage.propTypes = {
+  code: PropTypes.number,
+  message: PropTypes.string
+};
+
+ErrorPage.defaultProps = {
+  code: 404,
+  message: ERROR_MESSAGES[404]
+};
+
+export default ErrorPage;