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 diff --git a/docs/translations.md b/docs/translations.md index c70e540e..5e8e2c8e 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. +```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'; +``` diff --git a/src/components/SearchMap/ReusableMapContainer.js b/src/components/SearchMap/ReusableMapContainer.js index cbfdd49c..2cc2aabd 100644 --- a/src/components/SearchMap/ReusableMapContainer.js +++ b/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 = ( - + {this.props.children} ); @@ -128,6 +119,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} diff --git a/src/util/test-helpers.js b/src/util/test-helpers.js index 72605de6..2b288bd5 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 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() });