From 9fa38d64e403fadba2dba630fe6749bdab798ef6 Mon Sep 17 00:00:00 2001 From: Rustam Gilyaziev Date: Mon, 23 Jul 2018 23:59:01 +0300 Subject: [PATCH 1/2] Update with-react-intl example --- examples/with-react-intl/README.md | 1 + examples/with-react-intl/lib/withIntl.js | 11 ++++++ examples/with-react-intl/package.json | 1 + examples/with-react-intl/pages/_app.js | 7 ++-- examples/with-react-intl/pages/index.js | 45 +++++++++++++++--------- 5 files changed, 46 insertions(+), 19 deletions(-) create mode 100644 examples/with-react-intl/lib/withIntl.js diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md index 4206d96768c9e..12f1a65f6da93 100644 --- a/examples/with-react-intl/README.md +++ b/examples/with-react-intl/README.md @@ -50,6 +50,7 @@ This example app shows how to integrate [React Intl][] with Next. - `` creation with `locale`, `messages`, and `initialNow` props - Default message extraction via `babel-plugin-react-intl` integration - Translation management via build script and customized Next server +- withIntl HOC for pages because injectIntl do not hoist static methods. ### Translation Management diff --git a/examples/with-react-intl/lib/withIntl.js b/examples/with-react-intl/lib/withIntl.js new file mode 100644 index 0000000000000..16d9a0cd07ed2 --- /dev/null +++ b/examples/with-react-intl/lib/withIntl.js @@ -0,0 +1,11 @@ +import hoistNonReactStatics from 'hoist-non-react-statics' +import { injectIntl } from 'react-intl' + +export const hoistStatics = (higherOrderComponent) => (BaseComponent) => { + const NewComponent = higherOrderComponent(BaseComponent) + hoistNonReactStatics(NewComponent, BaseComponent) + + return NewComponent +} + +export default hoistStatics(injectIntl) diff --git a/examples/with-react-intl/package.json b/examples/with-react-intl/package.json index e1aabdb41dd42..9f8eaeedbceb9 100644 --- a/examples/with-react-intl/package.json +++ b/examples/with-react-intl/package.json @@ -10,6 +10,7 @@ "accepts": "^1.3.3", "babel-plugin-react-intl": "^2.3.1", "glob": "^7.1.1", + "hoist-non-react-statics": "^3.0.0-rc.1", "intl": "^1.2.5", "next": "latest", "react": "^16.0.0", diff --git a/examples/with-react-intl/pages/_app.js b/examples/with-react-intl/pages/_app.js index 4e8972e148c93..ea9fac8578fe5 100644 --- a/examples/with-react-intl/pages/_app.js +++ b/examples/with-react-intl/pages/_app.js @@ -12,7 +12,7 @@ if (typeof window !== 'undefined' && window.ReactIntlLocaleData) { } export default class MyApp extends App { - static async getInitialProps ({ Component, router, ctx }) { + static async getInitialProps({ Component, router, ctx }) { let pageProps = {} if (Component.getInitialProps) { @@ -22,14 +22,15 @@ export default class MyApp extends App { // Get the `locale` and `messages` from the request object on the server. // In the browser, use the same values that the server serialized. const { req } = ctx - const { locale, messages } = req || window.__NEXT_DATA__.props.pageProps + const { locale, messages } = req || window.__NEXT_DATA__.props return { pageProps, locale, messages } } - render () { + render() { const { Component, pageProps, locale, messages } = this.props const now = Date.now() + return ( diff --git a/examples/with-react-intl/pages/index.js b/examples/with-react-intl/pages/index.js index 61a67d68de9f0..cace0dd3323a8 100644 --- a/examples/with-react-intl/pages/index.js +++ b/examples/with-react-intl/pages/index.js @@ -1,25 +1,38 @@ -import React from 'react' -import {FormattedMessage, FormattedNumber, defineMessages, injectIntl} from 'react-intl' +import React, { Component } from 'react' +import { FormattedMessage, FormattedNumber, defineMessages } from 'react-intl' import Head from 'next/head' import Layout from '../components/Layout' +import withIntl from '../lib/withIntl' -const {description} = defineMessages({ +const { description } = defineMessages({ description: { id: 'description', defaultMessage: 'An example app integrating React Intl with Next.js' } }) -export default injectIntl(({intl}) => ( - - - - -

- -

-

- -

- -)) +class Index extends Component { + static getInitialProps() { + // Do something + } + + render() { + const { intl } = this.props + + return ( + + + + +

+ +

+

+ +

+ + ) + } +} + +export default withIntl(Index) From a44d00b69bdf5eda70b6d6662960751448b0ae7e Mon Sep 17 00:00:00 2001 From: Rustam Gilyaziev Date: Tue, 24 Jul 2018 00:10:08 +0300 Subject: [PATCH 2/2] Fix linter warnings --- examples/with-react-intl/pages/_app.js | 6 +++--- examples/with-react-intl/pages/index.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/with-react-intl/pages/_app.js b/examples/with-react-intl/pages/_app.js index ea9fac8578fe5..7fcc17ef7113e 100644 --- a/examples/with-react-intl/pages/_app.js +++ b/examples/with-react-intl/pages/_app.js @@ -12,7 +12,7 @@ if (typeof window !== 'undefined' && window.ReactIntlLocaleData) { } export default class MyApp extends App { - static async getInitialProps({ Component, router, ctx }) { + static async getInitialProps ({ Component, router, ctx }) { let pageProps = {} if (Component.getInitialProps) { @@ -22,12 +22,12 @@ export default class MyApp extends App { // Get the `locale` and `messages` from the request object on the server. // In the browser, use the same values that the server serialized. const { req } = ctx - const { locale, messages } = req || window.__NEXT_DATA__.props + const { locale, messages } = req || window.__NEXT_DATA__.props.pageProps return { pageProps, locale, messages } } - render() { + render () { const { Component, pageProps, locale, messages } = this.props const now = Date.now() diff --git a/examples/with-react-intl/pages/index.js b/examples/with-react-intl/pages/index.js index cace0dd3323a8..3cfc88905dcc9 100644 --- a/examples/with-react-intl/pages/index.js +++ b/examples/with-react-intl/pages/index.js @@ -12,11 +12,11 @@ const { description } = defineMessages({ }) class Index extends Component { - static getInitialProps() { + static getInitialProps () { // Do something } - render() { + render () { const { intl } = this.props return (