From 53f2d8856622b07cb133bae69b8f4e0ee2a24e73 Mon Sep 17 00:00:00 2001
From: Peter Kellner <peter@peterkellner.net>
Date: Thu, 17 Jan 2019 13:13:34 -0800
Subject: [PATCH] Updated with-context-api to include an about page and also
 events that pass data to context provider (#6082)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…aces (home and about pages). This makes it the example more clear and why someone might want to use _app.js in the first place.  Also, added a button on the about page that allows for passing and arbitrary value from the about page to the context provider. I disagree with the naming convention of calling the class CounterProvider. It includes both a Provider and Consumer so it should have some name that covers both.  Maybe it should be called CounterContext but I did not change that. I've seen other examples of the same naming conversion so figure I'm the odd duck here (still think it's wrong no matter how many people do it).
---
 examples/with-context-api/README.md           | 13 +++++++--
 .../components/CounterProvider.js             |  9 ++++++-
 examples/with-context-api/package.json        |  2 +-
 examples/with-context-api/pages/about.js      | 27 +++++++++++++++++++
 examples/with-context-api/pages/index.js      |  5 ++++
 5 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 examples/with-context-api/pages/about.js

diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md
index d58a12e9..805acb76 100644
--- a/examples/with-context-api/README.md
+++ b/examples/with-context-api/README.md
@@ -39,6 +39,15 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
 now
 ```
 
-## The idea behind the example
+## The idea behind the example*
 
-This example shows how to use react context api in our app. Based on WesBos example.
+This example shows how to use react context api in our app. 
+
+It provides an example of using `pages/_app.js` to include include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
+
+The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
+
+The `pages/about.js` shows how to, from the about page, how to pass an increment value from the about page into the context provider itself.
+
+
+**Based on WesBos example*.
diff --git a/examples/with-context-api/components/CounterProvider.js b/examples/with-context-api/components/CounterProvider.js
index 7566aa7b..27864908 100644
--- a/examples/with-context-api/components/CounterProvider.js
+++ b/examples/with-context-api/components/CounterProvider.js
@@ -15,6 +15,12 @@ class CounterProvider extends Component {
     })
   }
 
+  increaseBy = (val) => {
+    this.setState({
+      count: this.state.count + val
+    })
+  }
+
   decrease = () => {
     this.setState({
       count: this.state.count - 1
@@ -27,7 +33,8 @@ class CounterProvider extends Component {
         value={{
           count: this.state.count,
           increase: this.increase,
-          decrease: this.decrease
+          decrease: this.decrease,
+          increaseBy: this.increaseBy
         }}
       >
         {this.props.children}
diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json
index 76ec104d..d3d90d3c 100644
--- a/examples/with-context-api/package.json
+++ b/examples/with-context-api/package.json
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^7.0.0-canary.16",
+    "next": "^7.0.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
diff --git a/examples/with-context-api/pages/about.js b/examples/with-context-api/pages/about.js
new file mode 100644
index 00000000..af63ff8f
--- /dev/null
+++ b/examples/with-context-api/pages/about.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+/* First we import the consumer */
+import { CounterConsumer } from '../components/CounterProvider'
+import Link from 'next/link'
+
+export default class about extends Component {
+  render () {
+    return (
+      /* Then we use our context through render props */
+      <CounterConsumer>
+        {({ count, increase, increaseBy }) => (
+          <div>
+            <h1>ABOUT</h1>
+            <p>Counter: {count}</p>
+            <button onClick={increase}>Increase</button>
+            <button onClick={() => {
+              increaseBy(15)
+            }}>Increase By 15</button>
+            <p><Link href='/'>
+              <a>Home</a>
+            </Link></p>
+          </div>
+        )}
+      </CounterConsumer>
+    )
+  }
+}
diff --git a/examples/with-context-api/pages/index.js b/examples/with-context-api/pages/index.js
index 82be8968..6e2a73fa 100644
--- a/examples/with-context-api/pages/index.js
+++ b/examples/with-context-api/pages/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import Link from 'next/link'
 /* First we import the consumer */
 import { CounterConsumer } from '../components/CounterProvider'
 
@@ -9,9 +10,13 @@ export default class index extends Component {
       <CounterConsumer>
         {({ count, increase, decrease }) => (
           <div>
+            <h1>HOME</h1>
             <p>Counter: {count}</p>
             <button onClick={increase}>Increase</button>
             <button onClick={decrease}>Decrease</button>
+            <p><Link href='/about'>
+              <a>About</a>
+            </Link></p>
           </div>
         )}
       </CounterConsumer>