Merge pull request #352 from bertho-zero/react-router-v4

React router v4

Author: bertho-zero

.babelrc

@@ -7,15 +7,17 @@
         "targets": {
           "browsers": ["last 2 versions", "IE >= 8"],
           "node": "current"
-        }
+        },
+        "useBuiltIns": "entry"
       }
     ],
     "stage-0"
   ],
   "plugins": [
     "transform-runtime",
     "add-module-exports",
-    "transform-decorators-legacy"
+    "transform-decorators-legacy",
+    "react-loadable/babel"
   ],
   "env": {
     "development": {

.eslintrc

@@ -21,7 +21,7 @@
     "prefer-promise-reject-errors": "warn",
     "prefer-template": "warn",
     "react/forbid-prop-types": "warn",
-    "react/jsx-closing-tag-location": ["warn", "line-aligned"],
+    "react/jsx-closing-tag-location": "off",
     "react/jsx-filename-extension": "off",
     "react/jsx-no-target-blank": "warn",
     "react/no-multi-comp": ["error", {"ignoreStateless": true}],

.travis.yml

@@ -18,16 +18,26 @@ sudo: required
 
 before_install:
   - sudo apt-get -qq update
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
+
+install:
+  - yarn
 
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - export NODE_ENV=development
 
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
 script:
-  - npm run lint
-  - npm test
-  - npm run test-node
+  - yarn lint
+  - yarn test
+  - yarn test-node
 
 env:
   - TRAVIS=travis CXX=g++-4.8

README.md

@@ -134,7 +134,7 @@ We also spit out the `redux` state into a global `window.__data` variable in the
 
 #### Server-side Data Fetching
 
-The [redux-connect](https://www.npmjs.com/package/redux-connect) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redux-connect](https://www.npmjs.com/package/redux-connect) page.
+The [redial](https://www.npmjs.com/package/redial) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redial](https://www.npmjs.com/package/redial) page.
 
 #### Client Side
 

api/api.js

@@ -6,17 +6,13 @@ import cookieParser from 'cookie-parser';
 import hooks from 'feathers-hooks';
 import rest from 'feathers-rest';
 import socketio from 'feathers-socketio';
-import PrettyError from 'pretty-error';
 import config from './config';
-import middleware from './middleware';
 import services from './services';
-import * as actions from './actions';
-import mapUrl from './utils/url.js';
+import { actionHandler, logger, notFound, errorHandler } from './middleware';
 import auth from './services/authentication';
 
 process.on('unhandledRejection', error => console.error(error));
 
-const pretty = new PrettyError();
 const app = feathers();
 
 app
@@ -30,53 +26,27 @@ app
     cookie: { maxAge: 60000 }
   }))
   .use(bodyParser.urlencoded({ extended: true }))
-  .use(bodyParser.json());
-
-const actionsHandler = async (req, res, next) => {
-  const splittedUrlPath = req.url
-    .split('?')[0]
-    .split('/')
-    .slice(1);
-  const { action, params } = mapUrl(actions, splittedUrlPath);
-
-  req.app = app;
-
-  const catchError = async error => {
-    console.error('API ERROR:', pretty.render(error));
-    res.status(error.status || 500).json(error);
-  };
-
-  if (action) {
-    try {
-      try {
-        const result = await action(req, params);
-        if (result instanceof Function) {
-          result(res);
-        } else {
-          res.json(result);
-        }
-      } catch (reason) {
-        if (reason && reason.redirect) {
-          return res.redirect(reason.redirect);
-        }
-        return catchError(reason);
-      }
-    } catch (error) {
-      return catchError(error);
-    }
-  } else {
-    next();
-  }
-};
-
-app
+  .use(bodyParser.json())
+  // Core
   .configure(hooks())
   .configure(rest())
   .configure(socketio({ path: '/ws' }))
   .configure(auth)
-  .use(actionsHandler)
+  .use(actionHandler(app))
   .configure(services)
-  .configure(middleware);
+  // Final handlers
+  .use(notFound())
+  .use(logger(app))
+  .use(errorHandler({
+    json: (error, req, res) => {
+      res.json(error);
+    },
+    html: (error, req, res) => {
+      res.json(error);
+      // render your error view with the error object
+      // res.render('error', error); // set view engine of express if you want to use res.render
+    }
+  }));
 
 if (process.env.APIPORT) {
   app.listen(process.env.APIPORT, err => {

api/middleware/actionHandler.js

@@ -0,0 +1,36 @@
+import PrettyError from 'pretty-error';
+import * as actions from 'actions';
+import mapUrl from 'utils/url';
+
+const pretty = new PrettyError();
+
+export default function actionHandler(app) {
+  return async (req, res, next) => {
+    const splittedUrlPath = req.url
+      .split('?')[0]
+      .split('/')
+      .slice(1);
+    const { action, params } = mapUrl(actions, splittedUrlPath);
+
+    req.app = app;
+
+    if (action) {
+      try {
+        const result = await action(req, params);
+        if (result instanceof Function) {
+          result(res);
+        } else {
+          res.json(result);
+        }
+      } catch (error) {
+        if (error && error.redirect) {
+          return res.redirect(error.redirect);
+        }
+        console.error('API ERROR:', pretty.render(error));
+        res.status(error.status || 500).json(error);
+      }
+    } else {
+      next();
+    }
+  };
+}

api/middleware/index.js

@@ -1,20 +1,4 @@
-import errorHandler from 'feathers-errors/handler';
-import notFound from './notFound';
-import logger from './logger';
-
-export default function middleware() {
-  const app = this;
-
-  app.use(notFound());
-  app.use(logger(app));
-  app.use(errorHandler({
-    json: (error, req, res) => {
-      res.json(error);
-    },
-    html: (error, req, res) => {
-      res.json(error);
-      // render your error view with the error object
-      // res.render('error', error); // set view engine of express if you want to use res.render
-    }
-  }));
-}
+export actionHandler from './actionHandler';
+export errorHandler from 'feathers-errors/handler';
+export logger from './logger';
+export notFound from './notFound';

api/middleware/notFound.js

@@ -1,6 +1,6 @@
 const errors = require('feathers-errors');
 
-export default function notFoundHandler() {
+export default function notFound() {
   return (req, res, next) => {
     next(new errors.NotFound('Page not found'));
   };

package.json

@@ -1,7 +1,10 @@
 {
   "name": "react-redux-universal-hot-example",
   "description": "Example of an isomorphic (universal) webapp using react redux and hot reloading",
-  "author": "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
+  "author": "Kévin Berthommier <[email protected]> (http://github.com/bertho-zero)",
+  "contributors": [
+    "Erik Rasmussen <[email protected]> (http://github.com/erikras)"
+  ],
   "license": "MIT",
   "version": "0.9.0",
   "repository": {
@@ -119,9 +122,10 @@
   },
   "dependencies": {
     "async": "^2.1.4",
-    "axios": "^0.16.2",
+    "axios": "^0.17.0",
     "babel-core": "^6.26.0",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-dynamic-import-node": "^1.1.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
@@ -149,6 +153,7 @@
     "feathers-nedb": "^2.6.0",
     "feathers-rest": "^1.7.3",
     "feathers-socketio": "^2.0.0",
+    "history": "^4.7.2",
     "http-proxy": "^1.16.2",
     "is-promise": "^2.1.0",
     "js-cookie": "^2.1.3",
@@ -164,15 +169,19 @@
     "react-bootstrap": "^0.31.2",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.0.3",
+    "react-loadable": "^5.3.0",
     "react-redux": "^5.0.6",
-    "react-router": "^3.0.2",
-    "react-router-bootstrap": "^0.23.1",
-    "react-router-redux": "^4.0.8",
-    "react-router-scroll": "^0.4.1",
+    "react-router": "^4.2.0",
+    "react-router-bootstrap": "^0.24.4",
+    "react-router-config": "^1.0.0-beta.4",
+    "react-router-dom": "^4.2.2",
+    "react-router-redux": "^5.0.0-alpha.6",
+    "recompose": "^0.26.0",
+    "redial": "^0.5.0",
     "redux": "^3.6.0",
-    "redux-auth-wrapper": "^1.0.0",
-    "redux-connect": "^6.0.0",
+    "redux-auth-wrapper": "^2.0.2",
     "redux-form": "^7.1.1",
+    "redux-logger": "^3.0.6",
     "redux-persist": "^4.8.3",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.2",
@@ -211,7 +220,7 @@
     "less": "^3.0.0-alpha.3",
     "less-loader": "^4.0.3",
     "lighthouse": "^2.4.0",
-    "lint-staged": "^4.0.3",
+    "lint-staged": "^5.0.0",
     "mocha": "^4.0.1",
     "node-sass": "^4.5.0",
     "piping": "^1.0.0-rc.4",

server.babel.js

@@ -1,4 +1,5 @@
 //  enable runtime transpilation to use ES6/7 in node
+require('babel-polyfill');
 
 var fs = require('fs');
 
@@ -7,6 +8,9 @@ var config;
 
 try {
   config = JSON.parse(babelrc);
+  if (Array.isArray(config.plugins)) {
+    config.plugins.push('dynamic-import-node');
+  }
 } catch (err) {
   console.error('==>     ERROR: Error parsing your .babelrc.');
   console.error(err);