From 05b8675b809450471604092feab3d981c29c5623 Mon Sep 17 00:00:00 2001 From: pkellner Date: Thu, 17 Jan 2019 10:37:53 -0800 Subject: [PATCH 1/3] Updated the example to demonstrate the context being shared in two places (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 | 11 +++++++- 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, 54 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 d58a12e91b310..805acb76f5dba 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 7566aa7b76fbb..cc6be18106688 100644 --- a/examples/with-context-api/components/CounterProvider.js +++ b/examples/with-context-api/components/CounterProvider.js @@ -15,6 +15,14 @@ class CounterProvider extends Component { }) } + increaseBy = (val) => { + this.setState({ + count: this.state.count + val + }) + } + + + decrease = () => { this.setState({ count: this.state.count - 1 @@ -27,7 +35,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 76ec104d25460..d3d90d3cffe4c 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 0000000000000..4183ab9d85e98 --- /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 */ + + {({ count, increase, increaseBy }) => ( +
+

ABOUT

+

Counter: {count}

+ + +

+ Home +

+
+ )} + + ) + } +} diff --git a/examples/with-context-api/pages/index.js b/examples/with-context-api/pages/index.js index 82be896891386..bc37797785368 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 { {({ count, increase, decrease }) => (
+

HOME

Counter: {count}

+

+ About +

)} From a9c01ffd530e026d0933071013689041f697cd26 Mon Sep 17 00:00:00 2001 From: pkellner Date: Thu, 17 Jan 2019 10:48:05 -0800 Subject: [PATCH 2/3] fixed quoting issues and spacing --- examples/with-context-api/pages/about.js | 6 +++--- examples/with-context-api/pages/index.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/with-context-api/pages/about.js b/examples/with-context-api/pages/about.js index 4183ab9d85e98..af63ff8f0464d 100644 --- a/examples/with-context-api/pages/about.js +++ b/examples/with-context-api/pages/about.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' /* First we import the consumer */ import { CounterConsumer } from '../components/CounterProvider' -import Link from "next/link"; +import Link from 'next/link' export default class about extends Component { render () { @@ -14,9 +14,9 @@ export default class about extends Component {

Counter: {count}

-

+

Home

diff --git a/examples/with-context-api/pages/index.js b/examples/with-context-api/pages/index.js index bc37797785368..6e2a73fa6a5ca 100644 --- a/examples/with-context-api/pages/index.js +++ b/examples/with-context-api/pages/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import Link from 'next/link'; +import Link from 'next/link' /* First we import the consumer */ import { CounterConsumer } from '../components/CounterProvider' @@ -14,7 +14,7 @@ export default class index extends Component {

Counter: {count}

-

+

About

From 3c9375693102e97003d953a86897f0d84797c264 Mon Sep 17 00:00:00 2001 From: pkellner Date: Thu, 17 Jan 2019 10:50:18 -0800 Subject: [PATCH 3/3] fixed blank line problem --- examples/with-context-api/components/CounterProvider.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/with-context-api/components/CounterProvider.js b/examples/with-context-api/components/CounterProvider.js index cc6be18106688..278649087086c 100644 --- a/examples/with-context-api/components/CounterProvider.js +++ b/examples/with-context-api/components/CounterProvider.js @@ -21,8 +21,6 @@ class CounterProvider extends Component { }) } - - decrease = () => { this.setState({ count: this.state.count - 1