Upgrade depenencies

.babelrc

@@ -1,16 +1,9 @@
 {
   "env": {
     "test": {
-      "presets": [
-        "es2015",
-        "next/babel"
-      ]
+      "presets": [["next/babel", { "preset-env": { "modules": true } }]]
     }
   },
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    "transform-decorators-legacy"
-  ]
+  "presets": ["next/babel"],
+  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
 }

appcache.js

@@ -1,6 +1,6 @@
 const fs = require('fs')
 
-const stats = JSON.parse(fs.readFileSync('.next/build-stats.json'))
+const stats = JSON.parse(fs.readFileSync('.next/build-manifest.json'))
 
 const files = Object.entries(stats).map(([ file, { hash } ]) => {
   return `/_next/${hash}/${file}`

components/Page.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
+import ReactDOM from 'react-dom'
 import { isSpace } from '../libs/utils'
 import StopWatch from './StopWatch'
-import ReactDOM from 'react-dom'
 import Records from './Records'
 
 @inject('store')
@@ -18,22 +18,22 @@ export default class Page extends React.Component {
     document.addEventListener('touchstart', this.onTouchStart, true)
   }
 
-  onKeyDown = (event) => {
+  onKeyDown = event => {
     if (isSpace(event)) {
       event.preventDefault()
       this.hold()
     }
   }
 
-  onKeyUp = (event) => {
+  onKeyUp = event => {
     if (isSpace(event)) {
       event.preventDefault()
       this.release()
     }
   }
 
-  onTouchStart = (event) => {
-      // This is preventing zoom out in iOS Safari
+  onTouchStart = event => {
+    // This is preventing zoom out in iOS Safari
     if (event.touches.length > 1) {
       event.preventDefault()
       return
@@ -86,19 +86,24 @@ export default class Page extends React.Component {
 
   render () {
     return (
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '1rem'
-      }}>
-        <div ref='content'
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '1rem'
+        }}
+      >
+        <div
+          ref='content'
           style={{
             background: '#FFF',
             color: '#d9d9d9',
-            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 25px 50px 0px'
-          }}>
+            boxShadow:
+              'rgba(0, 0, 0, 0.2) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 25px 50px 0px'
+          }}
+        >
           <StopWatch />
           <Records />
         </div>

components/Panel.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
-import Button from 'material-ui/Button'
+import Button from '@material-ui/core/Button'
 
 @inject('store')
 @inject('recordsStore')
@@ -18,13 +18,19 @@ export default class Panel extends React.Component {
       return null
     }
     return (
-      <div className='timebar' style={{
-        display: 'flex',
-        justifyContent: 'center'
-      }}>
-        <Button onClick={this.clear}
+      <div
+        className='timebar'
+        style={{
+          display: 'flex',
+          justifyContent: 'center'
+        }}
+      >
+        <Button
+          onClick={this.clear}
+          color='secondary'
           disabled={running}
-          style={{ width: '100%' }}>
+          style={{ width: '100%' }}
+        >
           Clear
         </Button>
       </div>

components/Root.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Provider } from 'mobx-react'
+import { initStore, initRecordsStore } from '../stores'
+import Page from './Page'
+import { initGA, ReactGA } from '../libs/utils'
+
+export default class Root extends React.Component {
+  constructor (props) {
+    super(props)
+    this.store = initStore(this.props.isServer)
+    this.recordsStore = initRecordsStore(this.props.isServer)
+  }
+
+  render () {
+    return (
+      <Provider store={this.store} recordsStore={this.recordsStore}>
+        <Page {...{ initGA, ReactGA }} />
+      </Provider>
+    )
+  }
+}

components/__tests__/Panel.test.js

@@ -4,7 +4,7 @@ import Panel from '../Panel'
 import { spy } from 'sinon'
 import { shallow } from 'enzyme'
 import renderer from 'react-test-renderer'
-import Button from 'material-ui/Button'
+import Button from '@material-ui/core/Button'
 
 describe('Panel', () => {
   it(

components/__tests__/__snapshots__/Panel.test.js.snap

@@ -11,7 +11,7 @@ exports[`Panel render clear and call clear onClick 1`] = `
   }
 >
   <button
-    className="MuiButtonBase-root-15 MuiButton-root-1"
+    className="MuiButtonBase-root-23 MuiButton-root-1 MuiButton-textSecondary-4 MuiButton-flat-5 MuiButton-flatSecondary-7"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
@@ -22,23 +22,23 @@ exports[`Panel render clear and call clear onClick 1`] = `
     onMouseLeave={[Function]}
     onMouseUp={[Function]}
     onTouchEnd={[Function]}
+    onTouchMove={[Function]}
     onTouchStart={[Function]}
-    role="button"
     style={
       Object {
         "width": "100%",
       }
     }
-    tabIndex={0}
+    tabIndex="0"
     type="button"
   >
     <span
-      className="MuiButton-label-3"
+      className="MuiButton-label-2"
     >
       Clear
     </span>
     <span
-      className="MuiTouchRipple-root-17"
+      className="MuiTouchRipple-root-26"
     />
   </button>
 </div>

components/__tests__/__snapshots__/Records.test.js.snap

@@ -3,7 +3,6 @@
 exports[`Record render correct style 1`] = `
 <div
   className="timebar"
-  style={undefined}
 >
   <span
     style={

libs/LocalProfile.js

@@ -1,4 +1,4 @@
-import storedObservable from 'mobx-stored'
+import { localStored } from 'mobx-stored'
 
 const defaultProfile = {
   lapse: 0,
@@ -30,7 +30,7 @@ export const get = (key, defaultValue) => {
   return defaultValue
 }
 
-export const initLocalProfile = (updateInterval = 500, createObservable = storedObservable) => {
+export const initLocalProfile = (updateInterval = 500, createObservable = localStored) => {
   if (observableProfile === null) {
     observableProfile = createObservable('profile', defaultProfile, updateInterval)
   }

package.json

@@ -9,39 +9,43 @@
     "start": "NODE_ENV=production node server.js",
     "deploy": "now --token=$NOW_TOKEN --name=cube-timer-$CI",
     "test": "yarn lint && yarn testonly",
-    "testonly": "jest",
+    "testonly": "NODE_ENV=test jest",
     "test-watch": "yarn testonly --watch",
     "lintfix": "yarn lint --fix",
     "lint": "standard"
   },
   "dependencies": {
-    "auth0-js": "^8.10.1",
-    "express": "^4.15.4",
-    "material-ui": "^1.0.0-beta.16",
-    "mobx": "^3.3.1",
-    "mobx-react": "^4.3.3",
-    "mobx-stored": "^0.9.6",
-    "next": "^4.0.3",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-ga": "^2.3.5"
+    "@material-ui/core": "^1.2.0",
+    "auth0-js": "^9.6.0",
+    "express": "^4.16.3",
+    "mobx": "^4.3.1",
+    "mobx-react": "5.2.0",
+    "mobx-stored": "^1.0.2",
+    "next": "^6.0.3",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-ga": "^2.5.3"
   },
   "devDependencies": {
-    "babel-eslint": "^8.0.1",
-    "babel-jest": "^21.2.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^8.2.3",
+    "babel-jest": "^23.0.1",
+    "babel-loader": "8.0.0-beta.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "codeclimate-test-reporter": "^0.5.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "jasmine-check": "^1.0.0-rc.0",
-    "jest": "^21.2.1",
-    "now": "^8.3.7",
+    "jest": "^23.1.0",
+    "jest-localstorage-mock": "^2.2.0",
+    "now": "^11.2.1",
     "react-addons-test-utils": "16.0.0-alpha.3",
-    "react-test-renderer": "^16.0.0",
-    "sinon": "^4.0.0",
-    "standard": "^10.0.3"
+    "react-test-renderer": "^16.4.0",
+    "sinon": "^5.1.0",
+    "standard": "^11.0.1"
   },
   "standard": {
     "parser": "babel-eslint"

pages/index.js

@@ -1,26 +1,18 @@
 import React from 'react'
-import { Provider } from 'mobx-react'
-import { initStore, initRecordsStore } from '../stores'
-import Page from '../components/Page'
-import { initGA, ReactGA } from '../libs/utils'
+import dynamic from 'next/dynamic'
 
 export default class CubeTimer extends React.Component {
-  static getInitialProps ({ req }) {
-    const isServer = !!req
-    return { isServer }
-  }
+  state = { isServer: true }
 
-  constructor (props) {
-    super(props)
-    this.store = initStore(props.isServer)
-    this.recordsStore = initRecordsStore(props.isServer)
+  componentDidMount () {
+    this.setState({ isServer: false })
   }
 
   render () {
-    return (
-      <Provider store={this.store} recordsStore={this.recordsStore}>
-        <Page {...{ initGA, ReactGA }} />
-      </Provider>
-    )
+    if (this.state.isServer) {
+      return 'Loading...'
+    }
+    const Root = dynamic(import('../components/Root'))
+    return <Root />
   }
 }

test_setup.js

@@ -1,3 +1,4 @@
+import 'jest-localstorage-mock'
 import Enzyme from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'