Add react-code-splitting + some cleanup

didierfranc · Feb 5, 2017 · 55c85b4 · 55c85b4
1 parent 00feeab
commit 55c85b4
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.0.0",
     "babel-jest": "^18.0.0",
-    "babel-loader": "^6.2.9",
+    "babel-loader": "^6.2.10",
     "babel-plugin-styled-components": "0.0.3-0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
@@ -45,14 +45,15 @@
     "html-webpack-plugin": "^2.24.1",
     "jest": "^18.0.0",
     "react-test-renderer": "^15.4.1",
-    "serve": "^3.2.2",
-    "webpack": "2.2.0",
-    "webpack-dev-server": "2.2.0-rc.0"
+    "serve": "3.2.2",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
   },
   "dependencies": {
     "lodash": "^4.17.4",
     "offline-plugin": "^4.5.5",
     "react": "^15.4.1",
+    "react-code-splitting": "^1.0.3",
     "react-dom": "^15.4.1",
     "react-redux": "^5.0.2",
     "react-router-dom": "4.0.0-beta.3",

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,5 +1,5 @@
 import { actionTypes as types, urls } from '../constants'
-import { getToken, post } from '../helpers'
+import { post } from '../helpers'
 
 export const signup = ({ email, password }) => (dispatch) => {
   dispatch({ type: types.SIGNUP_REQUEST })
@@ -23,12 +23,10 @@ export const login = ({ email, password }) => (dispatch) => {
   })
 }
 
-export const loginWithToken = () => (dispatch) => {
-  const token = getToken()
-  if (!token) {
-    dispatch({ type: types.LOGIN_FAILURE })
-    return
-  }
+export const loginWithToken = () => (dispatch, getState) => {
+  const token = getState().user.token
+
+  if (typeof token === 'undefined') return
 
   dispatch({ type: types.LOGIN_REQUEST })
   post({

diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Route, Redirect } from 'react-router-dom'
+import Async from 'react-code-splitting'
+
+import Login from './Auth/Login'
+import Signup from './Auth/Signup'
+import Header from './Header'
+import { Body } from './Styled'
+
+const Home = () => <Async load={import('./Home')} />
+
+const App = ({ user }) => (
+  <Body>
+    <Header />
+    {user.token ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
+    <Route path="/signup" component={Signup} />
+    <Route path="/login" component={Login} />
+  </Body>
+)
+
+App.propTypes = {
+  user: React.PropTypes.shape({}).isRequired,
+}
+
+export default connect(state => ({ user: state.user }))(App)
diff --git a/src/components/Form.js → src/components/Auth/Form.js b/src/components/Form.js → src/components/Auth/Form.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { TextField, Submit } from './Styled'
+import { TextField, Submit } from '../Styled'
 
 const Form = ({ onSubmit }) => (
   <form onSubmit={onSubmit}>

diff --git a/src/components/Login.js → src/components/Auth/Login.js b/src/components/Login.js → src/components/Auth/Login.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 
-import { login } from '../actions'
+import { login } from '../../actions'
 
-import { FormTitle, FooterLink } from './Styled'
+import { FormTitle, FooterLink } from '../Styled'
 import Form from './Form'
 
 const Login = ({ user, login }) => {

diff --git a/src/components/Signup.js → src/components/Auth/Signup.js b/src/components/Signup.js → src/components/Auth/Signup.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 
-import { signup } from '../actions'
+import { signup } from '../../actions'
 
-import { FormTitle, FooterLink } from './Styled'
+import { FormTitle, FooterLink } from '../Styled'
 import Form from './Form'
 
 const Signup = ({ user, signup }) => {

diff --git a/src/components/Github.js → src/components/Header/Github.js b/src/components/Github.js → src/components/Header/Github.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { GithubButton, GithubCount, GithubLink } from './Styled'
+import { GithubButton, GithubCount, GithubLink } from '../Styled'
 
 class Github extends React.Component {
   state = {

diff --git a/src/components/__test__/Github.test.js → ...components/Header/__test__/Github.test.js b/src/components/__test__/Github.test.js → ...components/Header/__test__/Github.test.js
diff --git a/..._test__/__snapshots__/Github.test.js.snap → ..._test__/__snapshots__/Github.test.js.snap b/..._test__/__snapshots__/Github.test.js.snap → ..._test__/__snapshots__/Github.test.js.snap
diff --git a/src/components/Header.js → src/components/Header/index.js b/src/components/Header.js → src/components/Header/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Title } from './Styled'
+import { Title } from '../Styled'
 import Github from './Github'
 
 const Header = () => (

diff --git a/src/helpers/persist.js b/src/helpers/persist.js
@@ -1,7 +1,3 @@
-export const storeToken = token => sessionStorage.setItem('token', token)
-export const getToken = () => sessionStorage.getItem('token')
-export const clearToken = () => sessionStorage.removeItem('token')
-
 export const saveState = (state) => {
   try {
     const serializedState = JSON.stringify(state)

diff --git a/src/index.js b/src/index.js
@@ -2,27 +2,18 @@ import Offline from 'offline-plugin/runtime'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { render } from 'react-dom'
-import { BrowserRouter, Route } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 
 import { store } from './store'
 
-import Home from './components/Home'
-import Signup from './components/Signup'
-import Login from './components/Login'
-import Header from './components/Header'
-import { Body } from './components/Styled'
+import App from './components/App'
 
 if (process.env.NODE_ENV === 'production') Offline.install()
 
 export const Root = () => (
   <Provider store={store}>
     <BrowserRouter>
-      <Body>
-        <Header />
-        <Route path="/" component={Home} />
-        <Route path="/signup" component={Signup} />
-        <Route path="/login" component={Login} />
-      </Body>
+      <App />
     </BrowserRouter>
   </Provider>
 )

diff --git a/src/reducers/user.js b/src/reducers/user.js
@@ -1,22 +1,15 @@
-import { getToken, storeToken, clearToken } from '../helpers'
 import { actionTypes as types } from '../constants'
 
-const initialState = {
-  token: getToken(),
-}
-
-const auth = (state = initialState, action) => {
+const user = (state = {}, action) => {
   switch (action.type) {
     case types.SIGNUP_SUCCESS:
     case types.LOGIN_SUCCESS:
-      storeToken(action.data.token)
       return action.data
     case types.LOGIN_FAILURE:
-      clearToken()
       return {}
     default:
       return state
   }
 }
 
-export default auth
+export default user
diff --git a/yarn.lock b/yarn.lock
@@ -80,6 +80,10 @@ ansi-escapes@^1.1.0, ansi-escapes@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
+[email protected]:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -446,7 +450,7 @@ babel-jest@^18.0.0:
     babel-plugin-istanbul "^3.0.0"
     babel-preset-jest "^18.0.0"
 
-babel-loader@^6.2.9:
+babel-loader@^6.2.10:
   version "6.2.10"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
   dependencies:
@@ -1901,15 +1905,15 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-config-airbnb-base@^11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-11.0.1.tgz#5401dba284c6b7d7c8fb1c2ee19aba018f9dfa21"
+eslint-config-airbnb-base@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-11.1.0.tgz#dc9b3ec70b8c74dcbe6d6257c9da3992c39ca2ca"
 
 eslint-config-airbnb@^14.0.0:
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-14.0.0.tgz#bfd87a71102ba3ee19c3733357000b3d5e39790f"
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-14.1.0.tgz#355d290040bbf8e00bf8b4b19f4b70cbe7c2317f"
   dependencies:
-    eslint-config-airbnb-base "^11.0.1"
+    eslint-config-airbnb-base "^11.1.0"
 
 eslint-import-resolver-node@^0.2.0:
   version "0.2.3"
@@ -2549,6 +2553,10 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-entities@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+
 html-minifier@^3.2.3:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.3.0.tgz#a9b5b8eda501362d4c5699db02a8dc72013d1fab"
@@ -3334,7 +3342,7 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-loader-runner@^2.2.0:
+loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
@@ -4053,8 +4061,8 @@ pretty-format@^18.1.0:
     ansi-styles "^2.2.1"
 
 private@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
 
 process-nextick-args@~1.0.6:
   version "1.0.7"
@@ -4166,6 +4174,16 @@ rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
+react-code-splitting@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-code-splitting/-/react-code-splitting-1.0.3.tgz#cec35e0a6a8366f9ee5dbc1c603ed61cee3eca86"
+  dependencies:
+    babel-core "^6.22.1"
+    babel-loader "^6.2.10"
+    babel-preset-es2015 "^6.22.0"
+    babel-preset-react "^6.22.0"
+    babel-preset-stage-0 "^6.22.0"
+
 react-dom@^15.4.1:
   version "15.4.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"
@@ -4559,7 +4577,7 @@ serve-static@~1.11.2:
     parseurl "~1.3.1"
     send "0.14.2"
 
-serve@^3.2.2:
+[email protected]:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/serve/-/serve-3.2.2.tgz#00d1bed2e1fcebd2e0f9260dcb5f5e2b89878eb0"
   dependencies:
@@ -5172,14 +5190,16 @@ webpack-dev-middleware@^1.9.0:
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
-webpack-dev-server@2.2.0-rc.0:
-  version "2.2.0-rc.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.2.0-rc.0.tgz#ea8a11e211d9524b8999945fe5645481a51fdf46"
+webpack-dev-server@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.3.0.tgz#0437704bbd4d941a6e4c061eb3cc232ed7d06101"
   dependencies:
+    ansi-html "0.0.7"
     chokidar "^1.6.0"
     compression "^1.5.2"
     connect-history-api-fallback "^1.3.0"
     express "^4.13.3"
+    html-entities "^1.2.0"
     http-proxy-middleware "~0.17.1"
     opn "4.0.2"
     portfinder "^1.0.9"
@@ -5199,9 +5219,9 @@ webpack-sources@^0.1.4:
     source-list-map "~0.1.7"
     source-map "~0.5.3"
 
-[email protected].0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.0.tgz#09246336b5581c9002353f75bcadb598a648f977"
+webpack@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.1.tgz#7bb1d72ae2087dd1a4af526afec15eed17dda475"
   dependencies:
     acorn "^4.0.4"
     acorn-dynamic-import "^2.0.0"
@@ -5211,7 +5231,7 @@ [email protected]:
     enhanced-resolve "^3.0.0"
     interpret "^1.0.0"
     json-loader "^0.5.4"
-    loader-runner "^2.2.0"
+    loader-runner "^2.3.0"
     loader-utils "^0.2.16"
     memory-fs "~0.4.1"
     mkdirp "~0.5.0"