Updated with-context-api to include an about page and also events that pass data to context provider (#6082)

…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

@@ -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*.

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}

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"
   },

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>
+    )
+  }
+}

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>