From a7d1ca169c065bf0fc5cffc8329bca029ea70e20 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 24 Jan 2017 17:51:42 +0200 Subject: [PATCH 1/3] Add react-intl to package.json --- package.json | 3 ++- yarn.lock | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index b62c6f25..ec8df08b 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,12 @@ "express": "^4.14.0", "helmet": "^3.3.0", "lodash": "^4.17.4", - "qs": "^6.3.0", "path-to-regexp": "^1.5.3", + "qs": "^6.3.0", "react": "^15.4.2", "react-dom": "^15.4.2", "react-helmet": "^4.0.0", + "react-intl": "^2.2.3", "react-redux": "^5.0.2", "react-router": "4.0.0-alpha.6", "react-test-renderer": "^15.4.2", diff --git a/yarn.lock b/yarn.lock index c4ce50c7..b2e19905 100644 --- a/yarn.lock +++ b/yarn.lock @@ -909,14 +909,14 @@ babel-register@^6.16.0, babel-register@^6.22.0: mkdirp "^0.5.1" source-map-support "^0.4.2" -babel-runtime@6.11.6, babel-runtime@^6.0.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1: +babel-runtime@6.11.6, babel-runtime@^6.9.1: version "6.11.6" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.11.6.tgz#6db707fef2d49c49bfa3cb64efdb436b518b8222" dependencies: core-js "^2.4.0" regenerator-runtime "^0.9.5" -babel-runtime@^6.18.0, babel-runtime@^6.22.0: +babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.9.0: version "6.22.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611" dependencies: @@ -2829,7 +2829,27 @@ interpret@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c" -invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1: +intl-format-cache@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.0.5.tgz#b484cefcb9353f374f25de389a3ceea1af18d7c9" + +intl-messageformat-parser@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.2.0.tgz#5906b7f953ab7470e0dc8549097b648b991892ff" + +intl-messageformat@1.3.0, intl-messageformat@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-1.3.0.tgz#f7d926aded7a3ab19b2dc601efd54e99a4bd4eae" + dependencies: + intl-messageformat-parser "1.2.0" + +intl-relativeformat@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-1.3.0.tgz#893dc7076fccd380cf091a2300c380fa57ace45b" + dependencies: + intl-messageformat "1.3.0" + +invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -4901,6 +4921,15 @@ react-helmet@^4.0.0: object-assign "^4.0.1" react-side-effect "^1.1.0" +react-intl@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.2.3.tgz#8eebb03cddc38b337ed22fab78037ab53a594270" + dependencies: + intl-format-cache "^2.0.5" + intl-messageformat "^1.3.0" + intl-relativeformat "^1.3.0" + invariant "^2.1.1" + react-redux@^5.0.2: version "5.0.2" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.2.tgz#3d9878f5f71c6fafcd45de1fbb162ea31f389814" From c02ae5148ceea21f3a91e151aa5db87967458bf9 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 24 Jan 2017 18:12:37 +0200 Subject: [PATCH 2/3] Initial React-Intl setup --- src/app.js | 37 ++++++++++++++--------- src/containers/LandingPage/LandingPage.js | 8 ++++- src/translations/en.json | 3 ++ 3 files changed, 33 insertions(+), 15 deletions(-) create mode 100644 src/translations/en.json diff --git a/src/app.js b/src/app.js index ff1438c1..601910d9 100644 --- a/src/app.js +++ b/src/app.js @@ -3,20 +3,26 @@ import ReactDOMServer from 'react-dom/server'; import Helmet from 'react-helmet'; import { BrowserRouter, ServerRouter } from 'react-router'; import { Provider } from 'react-redux'; +import { IntlProvider, addLocaleData } from 'react-intl'; +import en from 'react-intl/locale-data/en'; import configureStore from './store'; import Routes from './Routes'; import routesConfiguration from './routesConfiguration'; +import localeData from './translations/en.json'; export const ClientApp = props => { const { store } = props; + addLocaleData([ ...en ]); return ( - - {({ router }) => ( - - - - )} - + + + {({ router }) => ( + + + + )} + + ); }; @@ -26,14 +32,17 @@ ClientApp.propTypes = { store: any.isRequired }; export const ServerApp = props => { const { url, context, store } = props; + addLocaleData([ ...en ]); return ( - - {({ router }) => ( - - - - )} - + + + {({ router }) => ( + + + + )} + + ); }; diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index 3d583503..1ea32d03 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/src/containers/LandingPage/LandingPage.js @@ -1,9 +1,15 @@ import React from 'react'; +import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router'; import { PageLayout } from '../../components'; export default () => ( - Find studios + + + ) diff --git a/src/translations/en.json b/src/translations/en.json new file mode 100644 index 00000000..e8eb922f --- /dev/null +++ b/src/translations/en.json @@ -0,0 +1,3 @@ +{ + "landingpage.examplelink": "Show nice studios! (from json)" +} From 2a60fcdc3b79ef7adbece6acc0a8b216419aa8de Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 24 Jan 2017 18:51:08 +0200 Subject: [PATCH 3/3] Snapshot tests need IntlProvider - even when using default locales --- src/containers/LandingPage/LandingPage.test.js | 9 ++++++--- .../LandingPage/__snapshots__/LandingPage.test.js.snap | 4 +++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/containers/LandingPage/LandingPage.test.js b/src/containers/LandingPage/LandingPage.test.js index bce166df..632904c7 100644 --- a/src/containers/LandingPage/LandingPage.test.js +++ b/src/containers/LandingPage/LandingPage.test.js @@ -1,15 +1,18 @@ import React from 'react'; import { BrowserRouter } from 'react-router'; import renderer from 'react-test-renderer'; +import { IntlProvider } from 'react-intl'; import LandingPage from './LandingPage'; describe('LandingPage', () => { it('matches snapshot', () => { const component = renderer.create( ( - - - + + + + + ), ); const tree = component.toJSON(); diff --git a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap index e44f93ea..90f926b5 100644 --- a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap +++ b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap @@ -128,7 +128,9 @@ exports[`LandingPage matches snapshot 1`] = ` href="/s?location=helsinki" onClick={[Function]} style={Object {}}> - Find studios + + Show nice studios! (default) + `;