Merge pull request #950 from sharetribe/translations-configuration

Review translations configuration and documentation

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
 

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.
+```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';
+```
+
+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:
+
+```js
+import messages from '../translations/es.json';
+```

src/components/SearchMap/ReusableMapContainer.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { node, string } from 'prop-types';
-import mapValues from 'lodash/mapValues';
+import { node, string, object } from 'prop-types';
 import { IntlProvider } from 'react-intl';
-import messages from '../../translations/en.json';
 import config from '../../config';
 
 import css from './SearchMap.css';
@@ -60,15 +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';
-
-      // 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 = (
-        <IntlProvider locale={config.locale} messages={localeMessages}>
+        <IntlProvider locale={config.locale} messages={this.props.messages}>
           {this.props.children}
         </IntlProvider>
       );
@@ -128,6 +119,7 @@ ReusableMapContainer.propTypes = {
   children: node.isRequired,
   className: string,
   reusableMapHiddenHandle: string.isRequired,
+  messages: object.isRequired,
 };
 
 export default ReusableMapContainer;

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}
       >
         <SearchMapWithMapbox
           className={classes}
@@ -225,6 +227,7 @@ SearchMapComponent.propTypes = {
   onMapMoveEnd: func.isRequired,
   zoom: number,
   mapsConfig: object,
+  messages: object.isRequired,
 
   // from withRouter
   history: shape({

src/containers/SearchPage/SearchPage.js

@@ -234,6 +234,7 @@ export class SearchPageComponent extends Component {
                   onCloseAsModal={() => {
                     onManageDisableScrolling('SearchPage.map', false);
                   }}
+                  messages={intl.messages}
                 />
               ) : null}
             </div>

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 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() });