Adds navigation in the example

Florian Didron · Florian Didron · commit fa871841ecaf · 2017-01-06T19:39:59.000+09:00
diff --git a/examples/with-mobx/components/Clock.js b/examples/with-mobx/components/Clock.js
@@ -1,15 +1,15 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 
-const Clock = inject('store')(observer(({store}) => {
+export default (props) => {
   return (
-    <div className={store.light ? 'light' : ''}>
-      {format(new Date(store.lastUpdate))}
+    <div className={props.light ? 'light' : ''}>
+      {format(new Date(props.lastUpdate))}
       <style jsx>{`
         div {
           padding: 15px;
-          display: inline-block;
           color: #82FA58;
+          display: inline-block;
           font: 50px menlo, monaco, monospace;
           background-color: #000;
         }
@@ -20,10 +20,8 @@ const Clock = inject('store')(observer(({store}) => {
       `}</style>
     </div>
   )
-}))
+}
 
 const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`
 
 const pad = n => n < 10 ? `0${n}` : n
-
-export default Clock
diff --git a/examples/with-mobx/components/Page.js b/examples/with-mobx/components/Page.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import Link from 'next/link'
+import { inject, observer } from 'mobx-react'
+import Clock from '../components/Clock'
+
+@inject('store') @observer
+class Page extends React.Component {
+
+  componentDidMount () {
+    this.props.store.start()
+  }
+
+  componentWillUnmount () {
+    this.props.store.stop()
+  }
+
+  render () {
+    return (
+      <div>
+        <h1>{this.props.title}</h1>
+        <Clock lastUpdate={this.props.store.lastUpdate} light={this.props.store.light} />
+        <nav>
+          <Link href={this.props.linkTo}>Navigate</Link>
+        </nav>
+      </div>
+    )
+  }
+}
+
+export default Page
diff --git a/examples/with-mobx/pages/index.js b/examples/with-mobx/pages/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Provider } from 'mobx-react'
 import { initStore } from '../store'
-import Clock from '../components/Clock'
+import Page from '../components/Page'
 
 export default class Counter extends React.Component {
   static getInitialProps ({ req }) {
@@ -15,18 +15,10 @@ export default class Counter extends React.Component {
     this.store = initStore(props.isServer, props.lastUpdate)
   }
 
-  componentDidMount () {
-    this.store.start()
-  }
-
-  componentWillUnmount () {
-    this.store.stop()
-  }
-
   render () {
     return (
       <Provider store={this.store}>
-        <Clock />
+        <Page title="Index Page" linkTo="/other" />
       </Provider>
     )
   }
diff --git a/examples/with-mobx/pages/other.js b/examples/with-mobx/pages/other.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Provider } from 'mobx-react'
+import { initStore } from '../store'
+import Page from '../components/Page'
+
+export default class Counter extends React.Component {
+  static getInitialProps ({ req }) {
+    const isServer = !!req
+    const store = initStore(isServer)
+    return { lastUpdate: store.lastUpdate, isServer }
+  }
+
+  constructor (props) {
+    super(props)
+    this.store = initStore(props.isServer, props.lastUpdate)
+  }
+
+  render () {
+    return (
+      <Provider store={this.store}>
+        <Page title="Other Page" linkTo="/" />
+      </Provider>
+    )
+  }
+}
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
@@ -6,7 +6,7 @@ class Store {
   @observable lastUpdate = 0
   @observable light = false
 
-  constructor(isServer, lastUpdate) {
+  constructor (isServer, lastUpdate) {
     this.lastUpdate = lastUpdate
   }
 
@@ -20,7 +20,7 @@ class Store {
   stop = () => clearInterval(this.timer)
 }
 
-export function initStore(isServer, lastUpdate = Date.now()) {
+export function initStore (isServer, lastUpdate = Date.now()) {
   if (isServer && typeof window === 'undefined') {
     return new Store(isServer, lastUpdate)
   } else {

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ class Store {`
`6`	`6`	`@observable lastUpdate = 0`
`7`	`7`	`@observable light = false`
`8`	`8`
`9`		`- constructor(isServer, lastUpdate) {`
	`9`	`+ constructor (isServer, lastUpdate) {`
`10`	`10`	`this.lastUpdate = lastUpdate`
`11`	`11`	`}`
`12`	`12`
`@@ -20,7 +20,7 @@ class Store {`
`20`	`20`	`stop = () => clearInterval(this.timer)`
`21`	`21`	`}`
`22`	`22`
`23`		`-export function initStore(isServer, lastUpdate = Date.now()) {`
	`23`	`+export function initStore (isServer, lastUpdate = Date.now()) {`
`24`	`24`	`if (isServer && typeof window === 'undefined') {`
`25`	`25`	`return new Store(isServer, lastUpdate)`
`26`	`26`	`} else {`