From 3c71e818bfc04049e805e5d22877f67eb47d5dbe Mon Sep 17 00:00:00 2001
From: David Nguyen <nndung179@gmail.com>
Date: Thu, 22 Jun 2017 00:45:06 +0700
Subject: [PATCH] Example/add high order component example (#2331)

* temporary commit

* update code

* completed example higher order component

* remove custom server
---
 .../with-higher-order-component/README.md     | 31 +++++++++++++++++++
 .../components/withApp.js                     | 26 ++++++++++++++++
 .../with-higher-order-component/package.json  | 16 ++++++++++
 .../pages/index.js                            | 20 ++++++++++++
 4 files changed, 93 insertions(+)
 create mode 100644 examples/with-higher-order-component/README.md
 create mode 100644 examples/with-higher-order-component/components/withApp.js
 create mode 100644 examples/with-higher-order-component/package.json
 create mode 100644 examples/with-higher-order-component/pages/index.js

diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md
new file mode 100644
index 0000000000..c58aa28fda
--- /dev/null
+++ b/examples/with-higher-order-component/README.md
@@ -0,0 +1,31 @@
+[![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-higher-order-component)
+
+# Higher Order Component example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+Install it and run:
+
+**npm**
+```bash
+npm install
+npm run dev
+```
+
+**yarn**
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## About example
+
+This example show you how to create Higher Order Component in next.js
diff --git a/examples/with-higher-order-component/components/withApp.js b/examples/with-higher-order-component/components/withApp.js
new file mode 100644
index 0000000000..65daabf265
--- /dev/null
+++ b/examples/with-higher-order-component/components/withApp.js
@@ -0,0 +1,26 @@
+import React from 'react'
+
+function withApp (Child) {
+  return class WrappedComponent extends React.Component {
+    static getInitialProps (context) {
+      return Child.getInitialProps(context)
+    }
+    render () {
+      return (
+        <div>
+          <header>
+            <h1>Header</h1>
+          </header>
+          <main>
+            <Child greeting='Hello From HOC' {...this.props} />
+          </main>
+          <footer>
+            <h1>Footer</h1>
+          </footer>
+        </div>
+      )
+    }
+  }
+}
+
+export default withApp
diff --git a/examples/with-higher-order-component/package.json b/examples/with-higher-order-component/package.json
new file mode 100644
index 0000000000..0a174011c2
--- /dev/null
+++ b/examples/with-higher-order-component/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-higher-order-component",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/examples/with-higher-order-component/pages/index.js b/examples/with-higher-order-component/pages/index.js
new file mode 100644
index 0000000000..40520dbf05
--- /dev/null
+++ b/examples/with-higher-order-component/pages/index.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import withApp from '../components/withApp'
+
+class Index extends React.Component {
+  static getInitialProps (context) {
+    const { isServer } = context
+    return { isServer }
+  }
+  render () {
+    const { greeting } = this.props
+    return (
+      <div>
+        <h2>Index page</h2>
+        <h3 style={{ color: 'red' }}>{greeting}</h3>
+      </div>
+    )
+  }
+}
+
+export default withApp(Index)
-- 
GitLab