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 = () => ( - - - - -) +import { BrowserRouter } from 'react-router-dom' +import AppRoutes from './routes' const ReactRouterApp = () => ( 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 = () => + +const Transactions = Loadable({ + loader: () => import('./transactions/components/Layout'), + loading: Loading, +}) + +const Routes = () => ( + + + + + +) + +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 ( +
I am transactions Layout
+ ) + } +} + +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 { )} /> + + + );