From 1eb41654d6a1f73f455f5ff0c6a87ff9f59e6322 Mon Sep 17 00:00:00 2001
From: Mauro Daprotis <maurodaprotis@gmail.com>
Date: Thu, 13 Sep 2018 10:19:15 -0300
Subject: [PATCH 1/2] Add with-context-api example

---
 examples/with-context-api/README.md           | 44 +++++++++++++++++++
 .../components/CounterProvider.js             | 43 ++++++++++++++++++
 examples/with-context-api/package.json        | 15 +++++++
 examples/with-context-api/pages/_app.js       | 19 ++++++++
 examples/with-context-api/pages/index.js      | 20 +++++++++
 5 files changed, 141 insertions(+)
 create mode 100644 examples/with-context-api/README.md
 create mode 100644 examples/with-context-api/components/CounterProvider.js
 create mode 100644 examples/with-context-api/package.json
 create mode 100644 examples/with-context-api/pages/_app.js
 create mode 100644 examples/with-context-api/pages/index.js

diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md
new file mode 100644
index 0000000000000..d58a12e91b310
--- /dev/null
+++ b/examples/with-context-api/README.md
@@ -0,0 +1,44 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-context-api)
+
+# Hello World example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-context-api with-context-api-app
+# or
+yarn create next-app --example with-context-api with-context-api-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-context-api
+cd with-context-api
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to use react context api in our app. Based on WesBos example.
diff --git a/examples/with-context-api/components/CounterProvider.js b/examples/with-context-api/components/CounterProvider.js
new file mode 100644
index 0000000000000..7566aa7b76fbb
--- /dev/null
+++ b/examples/with-context-api/components/CounterProvider.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+
+/* First we will make a new context */
+const CounterContext = React.createContext()
+
+/* Then create a provider Component */
+class CounterProvider extends Component {
+  state = {
+    count: 0
+  }
+
+  increase = () => {
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+
+  decrease = () => {
+    this.setState({
+      count: this.state.count - 1
+    })
+  }
+
+  render () {
+    return (
+      <CounterContext.Provider
+        value={{
+          count: this.state.count,
+          increase: this.increase,
+          decrease: this.decrease
+        }}
+      >
+        {this.props.children}
+      </CounterContext.Provider>
+    )
+  }
+}
+
+/* then make a consumer which will surface it */
+const CounterConsumer = CounterContext.Consumer
+
+export default CounterProvider
+export { CounterConsumer }
diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json
new file mode 100644
index 0000000000000..eebf70729608f
--- /dev/null
+++ b/examples/with-context-api/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "with-context-api",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}
diff --git a/examples/with-context-api/pages/_app.js b/examples/with-context-api/pages/_app.js
new file mode 100644
index 0000000000000..0444ef008bce4
--- /dev/null
+++ b/examples/with-context-api/pages/_app.js
@@ -0,0 +1,19 @@
+import App, { Container } from 'next/app'
+/* First we import our provider */
+import NoteProvider from '../components/CounterProvider'
+
+class MyApp extends App {
+  render () {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        {/* Then we wrap our components with the provider */}
+        <NoteProvider>
+          <Component {...pageProps} />
+        </NoteProvider>
+      </Container>
+    )
+  }
+}
+
+export default MyApp
diff --git a/examples/with-context-api/pages/index.js b/examples/with-context-api/pages/index.js
new file mode 100644
index 0000000000000..82be896891386
--- /dev/null
+++ b/examples/with-context-api/pages/index.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+/* First we import the consumer */
+import { CounterConsumer } from '../components/CounterProvider'
+
+export default class index extends Component {
+  render () {
+    return (
+      /* Then we use our context through render props */
+      <CounterConsumer>
+        {({ count, increase, decrease }) => (
+          <div>
+            <p>Counter: {count}</p>
+            <button onClick={increase}>Increase</button>
+            <button onClick={decrease}>Decrease</button>
+          </div>
+        )}
+      </CounterConsumer>
+    )
+  }
+}

From 2cf2c88c0c411feb3229f5934bda0ce7dd195b6c Mon Sep 17 00:00:00 2001
From: Mauro Daprotis <maurodaprotis@gmail.com>
Date: Thu, 13 Sep 2018 11:45:40 -0300
Subject: [PATCH 2/2] Change next dependency to canary and fix CounterProvider
 import

---
 examples/with-context-api/package.json  | 2 +-
 examples/with-context-api/pages/_app.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json
index eebf70729608f..9af55aa846fc3 100644
--- a/examples/with-context-api/package.json
+++ b/examples/with-context-api/package.json
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
+    "next": "^7.0.0-canary.16",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
diff --git a/examples/with-context-api/pages/_app.js b/examples/with-context-api/pages/_app.js
index 0444ef008bce4..06f4901ee8789 100644
--- a/examples/with-context-api/pages/_app.js
+++ b/examples/with-context-api/pages/_app.js
@@ -1,6 +1,6 @@
 import App, { Container } from 'next/app'
 /* First we import our provider */
-import NoteProvider from '../components/CounterProvider'
+import CounterProvider from '../components/CounterProvider'
 
 class MyApp extends App {
   render () {
@@ -8,9 +8,9 @@ class MyApp extends App {
     return (
       <Container>
         {/* Then we wrap our components with the provider */}
-        <NoteProvider>
+        <CounterProvider>
           <Component {...pageProps} />
-        </NoteProvider>
+        </CounterProvider>
       </Container>
     )
   }