improve Unstated example so that it can shares state when switching pages (#5822)

* add new example

* update gitignore

* fix lint

* fix linting

* fix linting again

* update unstated example

* remove unsued var

* update readme

examples/with-unstated/.gitignore

@@ -0,0 +1,2 @@
+.vscode/
+node_modules/

examples/with-unstated/README.md

@@ -41,4 +41,7 @@ now
 
 ## The idea behind the example
 
-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 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.
+

examples/with-unstated/pages/_app.js

@@ -1,13 +1,16 @@
 import App, {Container} from 'next/app'
 import React from 'react'
 import { Provider } from 'unstated'
+import { CounterContainer } from '../containers'
+
+const counter = new CounterContainer()
 
 class MyApp extends App {
   render () {
     const {Component, pageProps} = this.props
     return (
       <Container>
-        <Provider>
+        <Provider inject={[counter]}>
           <Component {...pageProps} />
         </Provider>
       </Container>

examples/with-unstated/pages/about.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import Link from 'next/link'
+import { Subscribe } from 'unstated'
+import { ClockContainer, CounterContainer } from '../containers'
+import { Clock, Counter } from '../components'
+
+class About extends React.Component {
+  componentWillUnmount () {
+    clearInterval(this.timer)
+  }
+  render () {
+    return (
+      <Subscribe to={[ClockContainer, CounterContainer]}>
+        {
+          (clock, counter) => {
+            this.timer = clock.interval
+            return (
+              <div>
+                <Link href='/index'>
+                  <button>
+                    go to Index
+                  </button>
+                </Link>
+                <div>
+                  <Clock clock={clock} />
+                  <Counter counter={counter} />
+                </div>
+              </div>
+            )
+          }
+        }
+      </Subscribe>
+    )
+  }
+}
+
+export default About

examples/with-unstated/pages/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'next/link'
 import { Subscribe } from 'unstated'
 import { ClockContainer, CounterContainer } from '../containers'
 import { Clock, Counter } from '../components'
@@ -15,8 +16,15 @@ class Index extends React.Component {
             this.timer = clock.interval
             return (
               <div>
-                <Clock clock={clock} />
+                <Link href='/about'>
-                <Counter counter={counter} />
+                  <button>
+                    go to About
+                  </button>
+                </Link>
+                <div>
+                  <Clock clock={clock} />
+                  <Counter counter={counter} />
+                </div>
               </div>
             )
           }