[Examples] Fix with mobx

examples/with-mobx/components/Clock.js

@@ -1,7 +1,8 @@
-export default props => {
+import { observer } from 'mobx-react'
+const Clock = observer(props => {
   return (
     <div className={props.light ? 'light' : ''}>
-      {format(new Date(props.lastUpdate))}
+      {props.timeString}
       <style jsx>{`
         div {
           padding: 15px;
@@ -17,9 +18,5 @@ export default props => {
       `}</style>
     </div>
   )
-}
-
-const format = t =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
-
-const pad = n => (n < 10 ? `0${n}` : n)
+})
+export default Clock

examples/with-mobx/components/Page.js

@@ -19,7 +19,7 @@ class Page extends React.Component {
       <div>
         <h1>{this.props.title}</h1>
         <Clock
-          lastUpdate={this.props.store.lastUpdate}
+          timeString={this.props.store.timeString}
           light={this.props.store.light}
         />
         <nav>

examples/with-mobx/package.json

@@ -7,11 +7,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "mobx": "^2.7.0",
-    "mobx-react": "^4.0.4",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "license": "ISC",
   "devDependencies": {

examples/with-mobx/pages/_app.js

@@ -1,24 +1,28 @@
-import { useMemo, useEffect } from 'react'
 import { Store } from '../store'
 import { Provider } from 'mobx-react'
+import App from 'next/app'
+let store = new Store()
 
-export default function App({ Component, pageProps }) {
-  const store = useMemo(() => {
-    return new Store()
-  }, [])
+export default class MyApp extends App {
+  state = {
+    stores: { store },
+  }
 
-  useEffect(() => {
-    // If your page has Next.js data fetching methods returning a state for the Mobx store,
-    // then you can hydrate it here.
-    const { initialState } = pageProps
-    if (initialState) {
-      store.hydrate(initialState)
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {}
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
     }
-  }, [store, pageProps])
+    return { pageProps }
+  }
 
-  return (
-    <Provider store={store}>
-      <Component {...pageProps} />
-    </Provider>
-  )
+  render() {
+    const { Component, pageProps } = this.props
+    const stores = this.state.stores
+    return (
+      <Provider {...stores}>
+        <Component {...pageProps} />
+      </Provider>
+    )
+  }
 }

examples/with-mobx/store.js

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx'
+import { action, observable, computed, runInAction } from 'mobx'
 import { useStaticRendering } from 'mobx-react'
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -18,10 +18,24 @@ export class Store {
 
   @action start = () => {
     this.timer = setInterval(() => {
-      this.lastUpdate = Date.now()
-      this.light = true
+      runInAction(() => {
+        this.lastUpdate = Date.now()
+        this.light = true
+        console.log(this.lastUpdate)
+      })
     }, 1000)
   }
 
+  @computed get timeString() {
+    const pad = n => (n < 10 ? `0${n}` : n)
+    const format = t =>
+      `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(
+        t.getUTCSeconds()
+      )}`
+    let timeStr = format(new Date(this.lastUpdate))
+    console.log(timeStr)
+    return timeStr
+  }
+
   stop = () => clearInterval(this.timer)
 }