upgrade

Author: bertho-zero

README.md

@@ -24,7 +24,6 @@ This is a starter boilerplate app I've put together using the following technolo
 * [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)
 * [Redux](https://github.com/reactjs/redux)'s futuristic [Flux](https://facebook.github.io/react/blog/2014/05/06/flux.html) implementation
 * [Redux Dev Tools](https://github.com/reactjs/redux-devtools) for next generation DX (developer experience). Watch [Dan Abramov's talk](https://www.youtube.com/watch?v=xsSnOQynTHs).
-* [React Router Redux](https://github.com/reactjs/react-router-redux) Redux/React Router bindings.
 * [ESLint](http://eslint.org) to maintain a consistent code style
 * [react-final-form](https://github.com/final-form/react-final-form) to manage form state
 * [lru-memoize](https://github.com/erikras/lru-memoize) to speed up form validation

package.json

@@ -64,14 +64,13 @@
     "classnames": "^2.2.5",
     "compression": "^1.6.2",
     "cookie-parser": "^1.4.3",
-    "cookies": "^0.7.1",
     "cookies-js": "^1.2.3",
     "core-js": "^3.0.1",
     "express": "^4.15.4",
     "express-session": "^1.15.5",
     "feathers-authentication-hooks": "^0.3.0",
     "feathers-hooks-common": "^4.10.0",
-    "feathers-nedb": "^3.1.0",
+    "feathers-nedb": "^4.0.1",
     "final-form": "^4.6.1",
     "history": "^4.7.2",
     "http-proxy": "^1.16.2",
@@ -90,22 +89,20 @@
     "react": "^16.8.6",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.8.6",
-    "react-final-form": "^3.4.0",
+    "react-final-form": "^4.1.0",
     "react-helmet": "^5.0.3",
     "react-loadable": "^5.3.0",
-    "react-redux": "^5.0.6",
-    "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.9",
+    "react-redux": "^7.0.2",
+    "react-router": "^5.0.0",
+    "react-router-bootstrap": "^0.25.0",
+    "react-router-config": "^5.0.0",
+    "react-router-dom": "^5.0.0",
     "recompose": "^0.30.0",
     "redial": "^0.5.0",
     "redux": "^4.0.0",
     "redux-auth-wrapper": "^2.0.2",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.3.4",
-    "redux-persist-cookie-storage": "^1.0.0",
     "regenerator-runtime": "^0.13.2",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.2",
@@ -141,18 +138,18 @@
     "bootstrap-loader": "^2.1.0",
     "bootstrap-sass": "^3.3.7",
     "chai": "^4.1.1",
-    "clean-webpack-plugin": "^0.1.15",
+    "clean-webpack-plugin": "^2.0.1",
     "concurrently": "^4.0.1",
     "cross-env": "^5.1.1",
     "css-loader": "^1.0.0",
     "eslint": "^5.2.0",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-loader": "^2.0.0",
-    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-import": "^2.17.1",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.2.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^2.0.0",
+    "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "^3.1.0",
     "husky": "^1.3.1",
@@ -161,13 +158,13 @@
     "jest-cli": "^24.7.1",
     "less": "^3.0.0-alpha.3",
     "less-loader": "^4.0.3",
-    "lighthouse": "^3.0.3",
-    "lint-staged": "^7.0.1",
-    "mini-css-extract-plugin": "^0.4.2",
+    "lighthouse": "^4.3.0",
+    "lint-staged": "^8.1.5",
+    "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.9.0",
     "piping": "^1.0.0-rc.4",
     "postcss": "^7.0.2",
-    "postcss-browser-reporter": "^0.5.0",
+    "postcss-browser-reporter": "^0.6.0",
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^12.0.0",
     "postcss-loader": "^3.0.0",
@@ -176,14 +173,11 @@
     "prettier-eslint-cli": "^4.6.1",
     "react-a11y": "^1.0.0",
     "react-hot-loader": "^4.0.0",
-    "redux-devtools": "^3.3.2",
-    "redux-devtools-dock-monitor": "^1.1.1",
-    "redux-devtools-log-monitor": "^1.2.0",
     "resolve-url-loader": "^2.2.1",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.23.0",
     "sw-precache-webpack-plugin": "^0.11.3",
-    "uglifyjs-webpack-plugin": "^1.1.6",
+    "terser-webpack-plugin": "^1.2.3",
     "url-loader": "^1.0.1",
     "webpack": "^4.7.0",
     "webpack-cli": "^3.0.0",

src/app.js

@@ -22,19 +22,19 @@ export function createApp(req) {
   }
 
   if (__SERVER__ && req) {
+    const token = req.header('authorization') || (req.cookies && req.cookies['feathers-jwt']);
     const app = configureApp(
       rest(host('/api')).axios(
         axios.create({
           headers: {
             Cookie: req.get('cookie'),
-            authorization: req.header('authorization') || ''
+            Authorization: token
           }
         })
       )
     );
 
-    const accessToken = req.header('authorization') || (req.cookies && req.cookies['feathers-jwt']);
-    app.set('accessToken', accessToken);
+    app.set('accessToken', token);
 
     return app;
   }

src/client.js

@@ -5,26 +5,26 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ConnectedRouter } from 'react-router-redux';
+import { Router } from 'react-router';
 import { renderRoutes } from 'react-router-config';
 import { trigger } from 'redial';
 import { createBrowserHistory } from 'history';
 import Loadable from 'react-loadable';
 import { AppContainer as HotEnabler } from 'react-hot-loader';
 import { getStoredState } from 'redux-persist';
-import { CookieStorage } from 'redux-persist-cookie-storage';
-import Cookies from 'cookies-js';
+import localForage from 'localforage';
 import { socket, createApp } from 'app';
 import createStore from 'redux/create';
 import apiClient from 'helpers/apiClient';
 import routes from 'routes';
 import isOnline from 'utils/isOnline';
 import asyncMatchRoutes from 'utils/asyncMatchRoutes';
-import { ReduxAsyncConnect, Provider } from 'components';
+import { RouterTrigger, Provider } from 'components';
+import NProgress from 'nprogress';
 
 const persistConfig = {
   key: 'root',
-  storage: new CookieStorage(Cookies),
+  storage: localForage,
   stateReconciler(inboundState, originalState) {
     // Ignore state from cookies, only use preloadedState from window object
     return originalState;
@@ -76,44 +76,59 @@ initSocket();
     persistConfig
   });
 
-  const hydrate = async _routes => {
-    const { components, match, params } = await asyncMatchRoutes(_routes, history.location.pathname);
-    const triggerLocals = {
-      ...providers,
-      store,
-      match,
-      params,
-      history,
-      location: history.location
-    };
+  const hydrate = _routes => {
+    const triggerHooks = async (pathname, indicator = true) => {
+      if (indicator) {
+        NProgress.start();
+      }
+
+      const { components, match, params } = await asyncMatchRoutes(_routes, pathname);
+      const triggerLocals = {
+        ...providers,
+        store,
+        match,
+        params,
+        history,
+        location: history.location
+      };
 
-    // Don't fetch data for initial route, server has already done the work:
-    if (window.__PRELOADED__) {
-      // Delete initial data so that subsequent data fetches can occur:
-      delete window.__PRELOADED__;
-    } else {
-      // Fetch mandatory data dependencies for 2nd route change onwards:
-      await trigger('fetch', components, triggerLocals);
-    }
-    await trigger('defer', components, triggerLocals);
+      await trigger('inject', components, triggerLocals);
+
+      // Don't fetch data for initial route, server has already done the work:
+      if (window.__PRELOADED__) {
+        // Delete initial data so that subsequent data fetches can occur:
+        delete window.__PRELOADED__;
+      } else {
+        // Fetch mandatory data dependencies for 2nd route change onwards:
+        await trigger('fetch', components, triggerLocals);
+      }
+      await trigger('defer', components, triggerLocals);
+
+      if (indicator) {
+        NProgress.done();
+      }
+    };
 
-    ReactDOM.hydrate(
+    const element = (
       <HotEnabler>
         <Provider store={store} {...providers}>
-          <ConnectedRouter history={history}>
-            <ReduxAsyncConnect routes={_routes} store={store} helpers={providers}>
-              {renderRoutes(_routes)}
-            </ReduxAsyncConnect>
-          </ConnectedRouter>
+          <Router history={history}>
+            <RouterTrigger trigger={triggerHooks}>{renderRoutes(_routes)}</RouterTrigger>
+          </Router>
         </Provider>
-      </HotEnabler>,
-      dest
+      </HotEnabler>
     );
+
+    if (dest.hasChildNodes()) {
+      ReactDOM.hydrate(element, dest);
+    } else {
+      ReactDOM.render(element, dest);
+    }
   };
 
   await Loadable.preloadReady();
 
-  await hydrate(routes);
+  hydrate(routes);
 
   // Hot reload
   if (module.hot) {
@@ -128,27 +143,6 @@ initSocket();
   // Server-side rendering check
   if (process.env.NODE_ENV !== 'production') {
     window.React = React; // enable debugger
-
-    if (!dest || !dest.firstChild || !dest.firstChild.attributes || !dest.firstChild.attributes['data-reactroot']) {
-      console.error(
-        'Server-side React render was discarded.\n'
-          + 'Make sure that your initial render does not contain any client-side code.'
-      );
-    }
-  }
-
-  // Dev tools
-  if (__DEVTOOLS__ && !window.devToolsExtension) {
-    const devToolsDest = document.createElement('div');
-    window.document.body.insertBefore(devToolsDest, null);
-    let DevTools = require('./containers/DevTools/DevTools');
-    DevTools = DevTools.__esModule ? DevTools.default : DevTools;
-    ReactDOM.hydrate(
-      <Provider store={store}>
-        <DevTools />
-      </Provider>,
-      devToolsDest
-    );
   }
 
   // Service worker