From 5d8ae4456eec0f0aea839d2da4366d3e7128b0f1 Mon Sep 17 00:00:00 2001
From: tylim <5227509+tylim88@users.noreply.github.com>
Date: Sun, 6 Jan 2019 23:58:06 +0800
Subject: [PATCH] improve with-unstated example (#5998)

improve the example so that it can preserve unstated from server to client unstated
---
 examples/with-carlo/pages/about.js            |  2 +-
 examples/with-unstated/README.md              |  3 +--
 .../containers/CounterContainer.js            |  9 +++++++
 examples/with-unstated/pages/_app.js          | 26 ++++++++++++++++---
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/examples/with-carlo/pages/about.js b/examples/with-carlo/pages/about.js
index 6e3ff1a8..9c851c3f 100644
--- a/examples/with-carlo/pages/about.js
+++ b/examples/with-carlo/pages/about.js
@@ -2,7 +2,7 @@ import * as React from 'react'
 import Link from 'next/link'
 
 export default class About extends React.Component {
-  state = { name: '' };
+  state = { name: '' }
 
   async componentDidMount () {
     const name = await window.getName()
diff --git a/examples/with-unstated/README.md b/examples/with-unstated/README.md
index 68e742da..26681184 100644
--- a/examples/with-unstated/README.md
+++ b/examples/with-unstated/README.md
@@ -43,5 +43,4 @@ now
 
 This example shows how to integrate Unstated in Next.js. For more info about Unstated you can visit [here](https://github.com/jamiebuilds/unstated). The example is basically same as [redux example](https://github.com/zeit/next.js/tree/canary/examples/with-redux).
 
-This example also shows how to share state within different page, you can expect the same state for Counter when switching between Index and About.
-
+The "counter" shows you how to preserve state from server to client and share the state within different page, you can expect the same state for "counter" when switching between Index and About page, observe that "counter" behaves differently from the "clock" example.
diff --git a/examples/with-unstated/containers/CounterContainer.js b/examples/with-unstated/containers/CounterContainer.js
index 82d33d7a..34d62b31 100644
--- a/examples/with-unstated/containers/CounterContainer.js
+++ b/examples/with-unstated/containers/CounterContainer.js
@@ -16,4 +16,13 @@ export default class CounterContainer extends Container {
   reset = () => {
     this.setState({ count: 0 })
   }
+
+  // this two methods are not setState as they work only before rendering
+  initState = count => {
+    this.state = { count }
+  }
+  resetState = () => {
+    this.initState(0)
+  }
 }
+export const counterStore = new CounterContainer()
diff --git a/examples/with-unstated/pages/_app.js b/examples/with-unstated/pages/_app.js
index 5713993f..48237abd 100644
--- a/examples/with-unstated/pages/_app.js
+++ b/examples/with-unstated/pages/_app.js
@@ -1,16 +1,34 @@
 import App, { Container } from 'next/app'
 import React from 'react'
 import { Provider } from 'unstated'
-import { CounterContainer } from '../containers'
-
-const counter = new CounterContainer()
+import { counterStore } from '../containers/CounterContainer'
 
 class MyApp extends App {
+  static async getInitialProps () {
+    // do your server state here
+    if (!process.browser) {
+      // reset state for each request
+      counterStore.resetState()
+      // process state, in this case counter start with 999
+      counterStore.initState(999)
+      return { serverState: counterStore.state }
+    } else {
+      return {}
+    }
+  }
+  constructor (props) {
+    super(props)
+    // pass the state to client store
+    // serverState will be reset when client navigate with Link
+    if (process.browser) {
+      counterStore.initState(props.serverState.count)
+    }
+  }
   render () {
     const { Component, pageProps } = this.props
     return (
       <Container>
-        <Provider inject={[counter]}>
+        <Provider inject={[counterStore]}>
           <Component {...pageProps} />
         </Provider>
       </Container>