Example/update unstated (#11534)

* Updated components and deps

* Updated readme

examples/with-unstated/README.md

@@ -1,8 +1,8 @@
 # Unstated 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 Next](https://github.com/jamiebuilds/unstated-next) with Next.js.
 
-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.
+There are two pages, `/` and `/about`, both render a counter and a timer, the state is saved for the current page and resetted when switching to a different page. To keep a shared state between pages you can add the state providers to `pages/_app.js` instead of using the page.
 
 ## Deploy your own
 

examples/with-unstated/components/Clock.js

@@ -1,11 +1,16 @@
-export default ({
-  clock: {
-    state: { lastUpdate, light },
-  },
-}) => {
+import ClockContainer from '../containers/clock'
+
+const pad = n => (n < 10 ? `0${n}` : n)
+
+const format = t =>
+  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
+
+export default function Clock() {
+  const clock = ClockContainer.useContainer()
+
   return (
-    <div className={light ? 'light' : ''}>
-      {format(new Date(lastUpdate))}
+    <div className={clock.light ? 'light' : ''}>
+      {format(new Date(clock.lastUpdate))}
       <style jsx>{`
         div {
           padding: 15px;
@@ -21,8 +26,3 @@ export default ({
     </div>
   )
 }
-
-const format = t =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
-
-const pad = n => (n < 10 ? `0${n}` : n)

examples/with-unstated/components/Counter.js

@@ -1,10 +1,16 @@
-export default ({ counter }) => (
-  <div>
-    <h1>
-      Count: <span>{counter.state.count}</span>
-    </h1>
-    <button onClick={() => counter.decrement()}>-1</button>
-    <button onClick={() => counter.increment()}>+1</button>
-    <button onClick={() => counter.reset()}>Reset</button>
-  </div>
-)
+import CounterContainer from '../containers/counter'
+
+export default function Counter() {
+  const counter = CounterContainer.useContainer()
+
+  return (
+    <div>
+      <h1>
+        Count: <span>{counter.count}</span>
+      </h1>
+      <button onClick={() => counter.decrement()}>-1</button>
+      <button onClick={() => counter.increment()}>+1</button>
+      <button onClick={() => counter.reset()}>Reset</button>
+    </div>
+  )
+}

examples/with-unstated/containers/clock.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+import { createContainer } from 'unstated-next'
+
+function useClock() {
+  const [data, setData] = useState({ lastUpdate: 0, light: false })
+
+  useEffect(() => {
+    let interval = setInterval(() => {
+      setData({ lastUpdate: Date.now(), light: !data.light })
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [data.light])
+
+  return data
+}
+
+export default createContainer(useClock)

examples/with-unstated/containers/counter.js

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+import { createContainer } from 'unstated-next'
+
+function useCounter() {
+  const [count, setCount] = useState(0)
+  const decrement = () => setCount(count - 1)
+  const increment = () => setCount(count + 1)
+  const reset = () => setCount(0)
+
+  return { count, decrement, increment, reset }
+}
+
+export default createContainer(useCounter)

examples/with-unstated/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "unstated": "^2.1.1"
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "unstated-next": "1.1.0"
   }
 }

examples/with-unstated/pages/about.js

@@ -1,33 +1,25 @@
-import React from 'react'
 import Link from 'next/link'
-import { Subscribe } from 'unstated'
-import { ClockContainer, CounterContainer } from '../containers'
-import { Clock, Counter } from '../components'
+import ClockContainer from '../containers/clock'
+import CounterContainer from '../containers/counter'
+import Clock from '../components/Clock'
+import Counter from '../components/Counter'
 
-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 function Index() {
+  return (
+    <CounterContainer.Provider>
+      <ClockContainer.Provider>
+        <div>
+          <Link href="/">
+            <a>go to Index</a>
+          </Link>
+          <br />
+          <br />
+          <div>
+            <Clock />
+            <Counter />
+          </div>
+        </div>
+      </ClockContainer.Provider>
+    </CounterContainer.Provider>
+  )
 }
-
-export default About

examples/with-unstated/pages/index.js

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