react: using async react

package.json

@@ -42,8 +42,8 @@
     "react-dom": "^16.5.2",
     "react-loadable": "^5.5.0",
     "react-modal": "^3.6.1",
-    "react-redux": "^5.0.6",
+    "react-redux": "^6.0.0-alpha.2a2f108",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "4.4.0-beta.4",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",

src/app.js

@@ -3,14 +3,15 @@ import 'modern-normalize/modern-normalize.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Modal from 'react-modal';
-import { history, store } from './store/configureStore';
 import Root from './components/Root';
 
-const props = { history, store };
-
 Modal.setAppElement('#app');
-const render = (Component, props = {}) => {
-  ReactDOM.render(<Component {...props} />, document.getElementById('app'));
-};
 
-render(Root, props);
+// use async React
+const root = ReactDOM.unstable_createRoot(document.getElementById('app'));
+root.render(<Root />);
+
+// const render = (Component, props = {}) => {
+//   ReactDOM.render(<Component {...props} />, document.getElementById('app'));
+// };
+// render(Root, props);

src/components/Root.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { Router, Route } from 'react-router-dom';
+import { HashRouter as Router, Route } from 'react-router-dom';
 import { hot } from 'react-hot-loader';
+// import createHistory from 'history/createHashHistory';
+// import createHistory from 'history/createBrowserHistory';
 
 import SideBar from 'c/SideBar';
 import Home from 'c/Home';
@@ -12,6 +13,8 @@ import Config from 'c/Config';
 
 import APIDiscovery from 'c/APIDiscovery';
 
+import { store } from '../store/configureStore';
+
 // testing...
 // import StyleGuide from 'c/StyleGuide';
 // import Loading from 'c/Loading';
@@ -30,18 +33,18 @@ import APIDiscovery from 'c/APIDiscovery';
 import './Root.scss';
 import s0 from './Root.module.scss';
 
-const Root = ({ store, history }) => (
+const Root = () => (
   <Provider store={store}>
-    <Router history={history}>
+    <Router>
       <div className={s0.app}>
         <APIDiscovery />
         <Route path="/" component={SideBar} />
         <div style={{ flexGrow: '1', overflow: 'scroll' }}>
-          <Route exact path="/" component={Home} />
+          <Route exact path="/" render={() => <Home />} />
-          <Route exact path="/overview" component={Home} />
+          <Route exact path="/overview" render={() => <Home />} />
-          <Route exact path="/configs" component={Config} />
+          <Route exact path="/configs" render={() => <Config />} />
-          <Route exact path="/logs" component={Logs} />
+          <Route exact path="/logs" render={() => <Logs />} />
-          <Route exact path="/proxies" component={Proxies} />
+          <Route exact path="/proxies" render={() => <Proxies />} />
         </div>
       </div>
     </Router>
@@ -50,11 +53,6 @@ const Root = ({ store, history }) => (
 // <Route exact path="/__0" component={StyleGuide} />
 // <Route exact path="/__1" component={Loading} />
 
-Root.propTypes = {
-  store: PropTypes.object,
-  history: PropTypes.object
-};
-
 // hot export Root
 // https://github.com/gaearon/react-hot-loader/tree/v4.0.1#getting-started
 export default hot(module)(Root);

src/store/configureStore.js

@@ -1,10 +1,7 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import createHistory from 'history/createHashHistory';
-// import createHistory from 'history/createBrowserHistory';
 import rootReducer from '../ducks';
 
-// const preloadedState = loadState();
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 function configureStore() {
@@ -24,7 +21,6 @@ function configureStore() {
   return store;
 }
 
-const history = createHistory();
 const store = configureStore();
 
-export { store, history };
+export { store };

yarn.lock

@@ -2210,6 +2210,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -3233,7 +3241,7 @@ fastparse@^1.1.1:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
   integrity sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=
 
-fbjs@^0.8.16:
+fbjs@^0.8.0, fbjs@^0.8.16:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -3639,6 +3647,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
   integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.0.0.tgz#a55ecd99222f4c48fd8c01c625ce3b349d0a0e80"
@@ -3771,6 +3784,13 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
+hoist-non-react-statics@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz#fba3e7df0210eb9447757ca1a7cb607162f0a364"
+  integrity sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==
+  dependencies:
+    react-is "^16.3.2"
+
 hoopy@^0.1.2:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -4059,13 +4079,6 @@ interpret@^1.0.0, interpret@^1.1.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
   integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=
 
-invariant@^2.0.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688"
-  integrity sha512-7Z5PPegwDTyjbaeCnV0efcyS6vdKAU51kpEmS7QFib3P4822l8ICYyMn7qvJnc+WzLoDsuI9gPMKbJ8pCu8XtA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -4736,11 +4749,6 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.5:
-  version "4.17.5"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.5.tgz#9fc6e737b1c4d151d8f9cae2247305d552ce748f"
-  integrity sha512-Ez3ONp3TK9gX1HYKp6IhetcVybD+2F+Yp6GS9dfH8ue6EOCEzQtQEh4K0FYWBP9qLv+lzeQAYXw+3ySfxyZqkw==
-
 lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -6444,7 +6452,7 @@ prop-types@^15.5.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -6628,6 +6636,11 @@ react-hot-loader@^4.2.0:
     react-lifecycles-compat "^3.0.4"
     shallowequal "^1.0.2"
 
+react-is@^16.3.2, react-is@^16.4.2:
+  version "16.5.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
+  integrity sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ==
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -6650,41 +6663,41 @@ react-modal@^3.6.1:
     react-lifecycles-compat "^3.0.0"
     warning "^3.0.0"
 
-react-redux@^5.0.6:
+react-redux@^6.0.0-alpha.2a2f108:
-  version "5.0.7"
+  version "6.0.0-alpha.2a2f108"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-alpha.2a2f108.tgz#c8ae15b62bacf07533020455df83e03fd0078d68"
-  integrity sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==
+  integrity sha512-ftD3wvjV48z1Om0uDHBJNnKeliPTryBarRcI+j1vAPB6Yka/afze4ZNtBjqpTzA326pWwGUQPRfZyj13JBZSKw==
   dependencies:
-    hoist-non-react-statics "^2.5.0"
+    hoist-non-react-statics "^3.0.1"
-    invariant "^2.0.0"
+    invariant "^2.2.4"
-    lodash "^4.17.5"
-    lodash-es "^4.17.5"
     loose-envify "^1.1.0"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    react-is "^16.4.2"
+    shallow-equals "^1.0.0"
 
-react-router-dom@^4.2.2:
+react-router-dom@4.4.0-beta.4:
-  version "4.3.1"
+  version "4.4.0-beta.4"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.4.0-beta.4.tgz#2b019a27edd572a52793616edd1f93852821a7c0"
-  integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==
+  integrity sha512-YD+FdcoB4gpiIEnw6AXZbR33c5X34q7urqGHpJCmHCL6gS71YdYfyBI+yITuVXEvJTOHlCaB0ip84hjpueuBwA==
   dependencies:
     history "^4.7.2"
     invariant "^2.2.4"
     loose-envify "^1.3.1"
     prop-types "^15.6.1"
-    react-router "^4.3.1"
+    react-router "^4.4.0-beta.4"
     warning "^4.0.1"
 
-react-router@^4.3.1:
+react-router@^4.4.0-beta.4:
-  version "4.3.1"
+  version "4.4.0-beta.4"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.4.0-beta.4.tgz#9000e42880135e1ee8404f74e6b91eb6b97d6cc4"
-  integrity sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==
+  integrity sha512-Ktdx4prUdHc/mY/M4G3Dge3y/ubO7+WVV/RpJQRVQeJXErAXspgn3fYmdBRuMdGBHwOqskdTqwkE+dEmkgdrxA==
   dependencies:
+    create-react-context "^0.2.2"
     history "^4.7.2"
     hoist-non-react-statics "^2.5.0"
     invariant "^2.2.4"
     loose-envify "^1.3.1"
     path-to-regexp "^1.7.0"
-    prop-types "^15.6.1"
     warning "^4.0.1"
 
 react@^16.5.2:
@@ -7286,6 +7299,11 @@ shallow-clone@^1.0.0:
     kind-of "^5.0.0"
     mixin-object "^2.0.1"
 
+shallow-equals@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-equals/-/shallow-equals-1.0.0.tgz#24b74bf1c634c11ed4c7182a6df6fb300dce4390"
+  integrity sha1-JLdL8cY0wR7Uxxgqbfb7MA3OQ5A=
+
 shallowequal@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"