From 8518021ae283b57bd2f19377007a1ae3d69e8c49 Mon Sep 17 00:00:00 2001
From: Adolfo Panizo <adolfo.panizo@gmail.com>
Date: Thu, 8 Mar 2018 11:54:36 +0100
Subject: [PATCH] Adding Code Splitting by routes with react-loadable

---
 .babelrc                                      |  1 +
 package-lock.json                             | 13 +++++++----
 package.json                                  |  2 ++
 src/App.js                                    | 11 ++-------
 src/routes/index.js                           | 23 +++++++++++++++++++
 src/routes/transactions/components/Layout.jsx | 11 +++++++++
 src/routes/welcome/components/Layout.jsx      |  6 +++++
 7 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 src/routes/index.js
 create mode 100644 src/routes/transactions/components/Layout.jsx

diff --git a/.babelrc b/.babelrc
index 8148cfc2..0ad85de6 100644
--- a/.babelrc
+++ b/.babelrc
@@ -10,6 +10,7 @@
     "@babel/stage-0"
   ],
   "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
     "transform-es3-member-expression-literals",
     "transform-es3-property-literals"
   ]
diff --git a/package-lock.json b/package-lock.json
index d45357d0..dabe6a32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15158,6 +15158,14 @@
         "theming": "1.3.0"
       }
     },
+    "react-loadable": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.3.1.tgz",
+      "integrity": "sha1-lpnpoI/tSbrNacqqKCA0tip2vN0=",
+      "requires": {
+        "prop-types": "15.6.1"
+      }
+    },
     "react-popper": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.2.tgz",
@@ -15204,11 +15212,6 @@
         "warning": "3.0.0"
       }
     },
-    "react-router-redux": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-4.0.8.tgz",
-      "integrity": "sha1-InQDWWtRUeGCN32rg1tdRfD4BU4="
-    },
     "react-scrollbar-size": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz",
diff --git a/package.json b/package.json
index 6bba4a7f..ca734215 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.40",
     "@babel/core": "^7.0.0-beta.40",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.40",
     "@babel/polyfill": "^7.0.0-beta.40",
     "@babel/preset-env": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
@@ -63,6 +64,7 @@
     "material-ui": "^1.0.0-beta.35",
     "material-ui-icons": "^1.0.0-beta.35",
     "react-final-form": "^3.1.2",
+    "react-loadable": "^5.3.1",
     "react-router-dom": "^4.2.2"
   },
   "jest": {
diff --git a/src/App.js b/src/App.js
index cdab358a..59ebdc40 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,6 @@
 import React from 'react'
-import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'
-import Welcome from '~/routes/welcome/components/Layout'
-
-const AppRoutes = () => (
-  <Switch>
-    <Redirect exact from="/" to="/welcome" />
-    <Route exact path='/welcome' component ={Welcome} />
-  </Switch>  
-)
+import { BrowserRouter } from 'react-router-dom'
+import AppRoutes from './routes'
 
 const ReactRouterApp = () => (
   <BrowserRouter>
diff --git a/src/routes/index.js b/src/routes/index.js
new file mode 100644
index 00000000..5e6649c6
--- /dev/null
+++ b/src/routes/index.js
@@ -0,0 +1,23 @@
+import { CircularProgress } from 'material-ui/Progress';
+import React from 'react'
+import Loadable from 'react-loadable';
+import { Switch, Redirect, Route } from 'react-router-dom'
+import Welcome from './welcome/components/Layout'
+
+const Loading = () => <CircularProgress size={50} />
+
+const Transactions = Loadable({
+  loader: () => import('./transactions/components/Layout'),
+  loading: Loading,
+})
+
+const Routes = () => (
+  <Switch>
+    <Redirect exact from="/" to="/welcome" />
+    <Route exact path='/welcome' component={Welcome} />
+    <Route exact path='/transactions' component={Transactions} />
+  </Switch>  
+)
+
+export default Routes
+
diff --git a/src/routes/transactions/components/Layout.jsx b/src/routes/transactions/components/Layout.jsx
new file mode 100644
index 00000000..5fd737f7
--- /dev/null
+++ b/src/routes/transactions/components/Layout.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+class Layout extends React.Component {
+  render() {
+    return (
+      <div>I am transactions Layout</div>
+    )
+  }
+}
+
+export default Layout
diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx
index 6295feb7..a90cdb6b 100644
--- a/src/routes/welcome/components/Layout.jsx
+++ b/src/routes/welcome/components/Layout.jsx
@@ -1,6 +1,7 @@
 import Button from 'material-ui/Button';
 import React, { Component } from 'react'
 import { Form, Field } from 'react-final-form'
+import { Link } from 'react-router-dom'
 import contract from 'truffle-contract'
 import TextField from '~/components/forms/TextField'
 import Page from '~/components/layout/Page'
@@ -104,6 +105,11 @@ class App extends Component {
               </form>
             )}
           />
+          <Link to="/transactions">
+            <Button variant="raised" color="primary">
+              Go to transactions
+            </Button>
+          </Link>
           </PageFrame>
       </Page>
     );