From 206470283ebabe21c753b2b17601d66264e51df8 Mon Sep 17 00:00:00 2001
From: Brice BERNARD <brikou@gmail.com>
Date: Sat, 24 Feb 2018 13:04:17 +0100
Subject: [PATCH] [with-hocs] Revamp example to use real world hocs (#3423)

* Revamp example to use real world hocs

* Add missing sync await parts

* Remove process.browser usage

* Get parent initialProps in last position
---
 .../with-higher-order-component/README.md     |  8 +++--
 .../components/Nav.js                         | 16 ++++++++++
 .../components/withApp.js                     | 26 ----------------
 .../hocs/withLanguages.js                     | 22 +++++++++++++
 .../hocs/withUserAgent.js                     | 20 ++++++++++++
 .../lib/getDisplayName.js                     |  3 ++
 .../with-higher-order-component/package.json  |  6 ++--
 .../pages/about.js                            | 15 +++++++++
 .../pages/index.js                            | 31 ++++++++-----------
 9 files changed, 99 insertions(+), 48 deletions(-)
 create mode 100644 examples/with-higher-order-component/components/Nav.js
 delete mode 100644 examples/with-higher-order-component/components/withApp.js
 create mode 100644 examples/with-higher-order-component/hocs/withLanguages.js
 create mode 100644 examples/with-higher-order-component/hocs/withUserAgent.js
 create mode 100644 examples/with-higher-order-component/lib/getDisplayName.js
 create mode 100644 examples/with-higher-order-component/pages/about.js

diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md
index f9d96db9f0..df421ae61d 100644
--- a/examples/with-higher-order-component/README.md
+++ b/examples/with-higher-order-component/README.md
@@ -6,7 +6,8 @@
 
 ### Using `create-next-app`
 
-Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to
+bootstrap the example:
 
 ```
 npm i -g create-next-app
@@ -20,18 +21,21 @@ 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))
+Deploy it to the cloud with [now](https://zeit.co/now)
+([download](https://zeit.co/download))
 
 ```bash
 now
diff --git a/examples/with-higher-order-component/components/Nav.js b/examples/with-higher-order-component/components/Nav.js
new file mode 100644
index 0000000000..703880cacf
--- /dev/null
+++ b/examples/with-higher-order-component/components/Nav.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export const Nav = () => (
+  <ul>
+    <li>
+      <Link href='/'>
+        <a>Index</a>
+      </Link>
+    </li>
+    <li>
+      <Link href='/about'>
+        <a>About</a>
+      </Link>
+    </li>
+  </ul>
+)
diff --git a/examples/with-higher-order-component/components/withApp.js b/examples/with-higher-order-component/components/withApp.js
deleted file mode 100644
index 65daabf265..0000000000
--- a/examples/with-higher-order-component/components/withApp.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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/hocs/withLanguages.js b/examples/with-higher-order-component/hocs/withLanguages.js
new file mode 100644
index 0000000000..1ac6d55cf6
--- /dev/null
+++ b/examples/with-higher-order-component/hocs/withLanguages.js
@@ -0,0 +1,22 @@
+import accepts from 'accepts'
+
+import { getDisplayName } from '../lib/getDisplayName'
+
+export const withLanguages = Page => {
+  const WithLanguages = props => <Page {...props} />
+
+  WithLanguages.getInitialProps = async context => {
+    const languages = context.req
+      ? accepts(context.req).languages()
+      : navigator.languages
+
+    return {
+      ...(Page.getInitialProps ? await Page.getInitialProps(context) : {}),
+      languages
+    }
+  }
+
+  WithLanguages.displayName = `WithLanguages(${getDisplayName(Page)})`
+
+  return WithLanguages
+}
diff --git a/examples/with-higher-order-component/hocs/withUserAgent.js b/examples/with-higher-order-component/hocs/withUserAgent.js
new file mode 100644
index 0000000000..cda2ccecd2
--- /dev/null
+++ b/examples/with-higher-order-component/hocs/withUserAgent.js
@@ -0,0 +1,20 @@
+import { getDisplayName } from '../lib/getDisplayName'
+
+export const withUserAgent = Page => {
+  const WithUserAgent = props => <Page {...props} />
+
+  WithUserAgent.getInitialProps = async context => {
+    const userAgent = context.req
+      ? context.req.headers['user-agent']
+      : navigator.userAgent
+
+    return {
+      ...(Page.getInitialProps ? await Page.getInitialProps(context) : {}),
+      userAgent
+    }
+  }
+
+  WithUserAgent.displayName = `WithUserAgent(${getDisplayName(Page)})`
+
+  return WithUserAgent
+}
diff --git a/examples/with-higher-order-component/lib/getDisplayName.js b/examples/with-higher-order-component/lib/getDisplayName.js
new file mode 100644
index 0000000000..4689c4ea95
--- /dev/null
+++ b/examples/with-higher-order-component/lib/getDisplayName.js
@@ -0,0 +1,3 @@
+export function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Unknown'
+}
diff --git a/examples/with-higher-order-component/package.json b/examples/with-higher-order-component/package.json
index 60f5736fc9..820c131ebd 100644
--- a/examples/with-higher-order-component/package.json
+++ b/examples/with-higher-order-component/package.json
@@ -7,9 +7,11 @@
     "start": "next start"
   },
   "dependencies": {
+    "accepts": "1.3.4",
+    "lodash.flowright": "3.5.0",
     "next": "latest",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "16.2.0",
+    "react-dom": "16.2.0"
   },
   "license": "ISC"
 }
diff --git a/examples/with-higher-order-component/pages/about.js b/examples/with-higher-order-component/pages/about.js
new file mode 100644
index 0000000000..fc8175326a
--- /dev/null
+++ b/examples/with-higher-order-component/pages/about.js
@@ -0,0 +1,15 @@
+import flowRight from 'lodash.flowright'
+
+import { Nav } from '../components/Nav'
+import { withLanguages } from '../hocs/withLanguages'
+import { withUserAgent } from '../hocs/withUserAgent'
+
+const AboutPage = props => (
+  <div>
+    <Nav />
+    <h1>About</h1>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+)
+
+export default flowRight([withLanguages, withUserAgent])(AboutPage)
diff --git a/examples/with-higher-order-component/pages/index.js b/examples/with-higher-order-component/pages/index.js
index 40520dbf05..6e64db7575 100644
--- a/examples/with-higher-order-component/pages/index.js
+++ b/examples/with-higher-order-component/pages/index.js
@@ -1,20 +1,15 @@
-import React from 'react'
-import withApp from '../components/withApp'
+import flowRight from 'lodash.flowright'
 
-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>
-    )
-  }
-}
+import { Nav } from '../components/Nav'
+import { withLanguages } from '../hocs/withLanguages'
+import { withUserAgent } from '../hocs/withUserAgent'
 
-export default withApp(Index)
+const IndexPage = props => (
+  <div>
+    <Nav />
+    <h1>Index</h1>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+)
+
+export default flowRight([withLanguages, withUserAgent])(IndexPage)
-- 
GitLab