[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

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

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

examples/with-higher-order-component/components/withApp.js

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

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

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

examples/with-higher-order-component/lib/getDisplayName.js

@@ -0,0 +1,3 @@
+export function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Unknown'
+}

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

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)

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)