From aa4ff59618f1f8ad04e410c81256c43c6c87c7a0 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 13 Nov 2018 15:25:17 +0200 Subject: [PATCH 1/7] Pass translations to ReusableMapContainer in props --- src/components/SearchMap/ReusableMapContainer.js | 5 +++-- src/components/SearchMap/SearchMap.js | 3 +++ src/containers/SearchPage/SearchPage.js | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/SearchMap/ReusableMapContainer.js b/src/components/SearchMap/ReusableMapContainer.js index cbfdd49c..0e2f669b 100644 --- a/src/components/SearchMap/ReusableMapContainer.js +++ b/src/components/SearchMap/ReusableMapContainer.js @@ -1,9 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { node, string } from 'prop-types'; +import { node, string, object } from 'prop-types'; import mapValues from 'lodash/mapValues'; import { IntlProvider } from 'react-intl'; -import messages from '../../translations/en.json'; import config from '../../config'; import css from './SearchMap.css'; @@ -62,6 +61,7 @@ class ReusableMapContainer extends React.Component { const renderChildren = () => { const isTestEnv = process.env.NODE_ENV === 'test'; + const messages = this.props.messages; // Locale should not affect the tests. We ensure this by providing // messages with the key as the value of each message. const testMessages = mapValues(messages, (val, key) => key); @@ -128,6 +128,7 @@ ReusableMapContainer.propTypes = { children: node.isRequired, className: string, reusableMapHiddenHandle: string.isRequired, + messages: object.isRequired, }; export default ReusableMapContainer; diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js index 3c7a4b6c..d1317cf8 100644 --- a/src/components/SearchMap/SearchMap.js +++ b/src/components/SearchMap/SearchMap.js @@ -125,6 +125,7 @@ export class SearchMapComponent extends Component { zoom, mapsConfig, activeListingId, + messages, } = this.props; const classes = classNames(rootClassName || css.root, className); @@ -169,6 +170,7 @@ export class SearchMapComponent extends Component { className={reusableContainerClassName} reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE} onReattach={forceUpdateHandler} + messages={messages} > { onManageDisableScrolling('SearchPage.map', false); }} + messages={intl.messages} /> ) : null} From 19f67fe64ef67db706b9287e7cf3c7799402d880 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 13 Nov 2018 15:46:19 +0200 Subject: [PATCH 2/7] Add a note about translations in tests --- src/util/test-helpers.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/util/test-helpers.js b/src/util/test-helpers.js index 72605de6..005091a4 100644 --- a/src/util/test-helpers.js +++ b/src/util/test-helpers.js @@ -8,6 +8,10 @@ import en from 'react-intl/locale-data/en'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; import configureStore from '../store'; + +// In case you have translated the template and have new translations that +// are missing from the en translations fiel, the language for the tests can +// ge changed here so that there are no missing translation keys in tests import messages from '../translations/en.json'; Enzyme.configure({ adapter: new Adapter() }); From f177f6a6ead6ee36d8eb022b1acfad40f1c7052a Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 13 Nov 2018 15:52:38 +0200 Subject: [PATCH 3/7] Remove translation handling for tests Translations are passed as props so the handling for translations in tests is already done in test-helpers.js. --- src/components/SearchMap/ReusableMapContainer.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/SearchMap/ReusableMapContainer.js b/src/components/SearchMap/ReusableMapContainer.js index 0e2f669b..2cc2aabd 100644 --- a/src/components/SearchMap/ReusableMapContainer.js +++ b/src/components/SearchMap/ReusableMapContainer.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { node, string, object } from 'prop-types'; -import mapValues from 'lodash/mapValues'; import { IntlProvider } from 'react-intl'; import config from '../../config'; @@ -59,16 +58,8 @@ class ReusableMapContainer extends React.Component { // NOTICE: Children rendered with ReactDOM.render doesn't have Router access // You need to provide onClick functions and URLs as props. const renderChildren = () => { - const isTestEnv = process.env.NODE_ENV === 'test'; - - const messages = this.props.messages; - // Locale should not affect the tests. We ensure this by providing - // messages with the key as the value of each message. - const testMessages = mapValues(messages, (val, key) => key); - const localeMessages = isTestEnv ? testMessages : messages; - const children = ( - + {this.props.children} ); From 8909b5c693a175e5d8d15d73123e6f24085642bb Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 13 Nov 2018 16:55:35 +0200 Subject: [PATCH 4/7] Update translations documentation --- docs/translations.md | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/docs/translations.md b/docs/translations.md index c70e540e..fd220c95 100644 --- a/docs/translations.md +++ b/docs/translations.md @@ -132,13 +132,32 @@ More information about adding static content to the application can be found fro For changing the language of the template application: -1. Copy the default [src/translations/en.json](../src/translations/en.json) English translations - file into some other file like `es.json`. +* Copy the default [src/translations/en.json](../src/translations/en.json) English translations file + into some other file like `es.json`. -1. Change the messages in the new translations file to the desired language. +* Change the messages in the new translations file to the desired language. -1. In [src/config.js](../src/config.js), change the `locale` variable value to match the new locale - (the name of the new translations file, without the extension). +* In [src/config.js](../src/config.js), change the `locale` variable value to match the new locale + (the name of the new translations file, without the extension), for example: -1. In [src/app.js](../src/app.js), change the translation imports to point to the correct - `react-intl` locale and the new translations file you created. +``` +const locale = 'es'; +``` + +* In [src/app.js](../src/app.js), change the translation imports to point to the correct + `react-intl` locale and the new translations file you created, for example: + +``` +import localeData from 'react-intl/locale-data/es'; +import messages from './translations/es.json'; +``` + +Also, in case you will translate the application and develop it forward it is wise to change the +translations file that the tests use. Normally tests are language agnostic as they use translation +keys as values. However, when adding new translations you can end up with missing translation keys +in tests. To change the translation file used in tests change the `messages` variable in +[src/util/test-helpers.js](../src/util/test-helpers.js) to match your language in use, for example: + +``` +import messages from '../translations/es.json'; +``` From c2d29804d8594c07640ae3405d90084199bd16a1 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Wed, 14 Nov 2018 15:53:35 +0200 Subject: [PATCH 5/7] Add JS annotation to code snippets in docs --- docs/translations.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/translations.md b/docs/translations.md index fd220c95..5e8e2c8e 100644 --- a/docs/translations.md +++ b/docs/translations.md @@ -140,14 +140,14 @@ For changing the language of the template application: * In [src/config.js](../src/config.js), change the `locale` variable value to match the new locale (the name of the new translations file, without the extension), for example: -``` +```js const locale = 'es'; ``` * In [src/app.js](../src/app.js), change the translation imports to point to the correct `react-intl` locale and the new translations file you created, for example: -``` +```js import localeData from 'react-intl/locale-data/es'; import messages from './translations/es.json'; ``` @@ -158,6 +158,6 @@ keys as values. However, when adding new translations you can end up with missin in tests. To change the translation file used in tests change the `messages` variable in [src/util/test-helpers.js](../src/util/test-helpers.js) to match your language in use, for example: -``` +```js import messages from '../translations/es.json'; ``` From 3513dfcfaa43e2626586f0350df8fa867e6f63e7 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Wed, 14 Nov 2018 15:55:50 +0200 Subject: [PATCH 6/7] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33cb3c83..17d01261 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,8 @@ way to update this template, but currently, we follow a pattern: * [fix] the alignment of arrows in FieldDateRangeInput and refactoring arrow icon code. [#951](https://github.com/sharetribe/flex-template-web/pull/951) +* [change] Remove unnecessary language configuration and improve translations documentation. + [#950](https://github.com/sharetribe/flex-template-web/pull/950) ## v2.3.0 2018-11-13 From 501d5b08f47eb02740bf80411be5a1dece06c75c Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Wed, 14 Nov 2018 16:13:05 +0200 Subject: [PATCH 7/7] Fix a few typos in a comment --- src/util/test-helpers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/util/test-helpers.js b/src/util/test-helpers.js index 005091a4..2b288bd5 100644 --- a/src/util/test-helpers.js +++ b/src/util/test-helpers.js @@ -10,8 +10,8 @@ import { Provider } from 'react-redux'; import configureStore from '../store'; // In case you have translated the template and have new translations that -// are missing from the en translations fiel, the language for the tests can -// ge changed here so that there are no missing translation keys in tests +// are missing from the en translations file, the language for the tests can +// be changed here so that there are no missing translation keys in tests. import messages from '../translations/en.json'; Enzyme.configure({ adapter: new Adapter() });