diff --git a/src/app.js b/src/app.js index a3cffc8d..71497cf4 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,7 @@ import 'react-dates/initialize'; import Helmet from 'react-helmet'; import { BrowserRouter, StaticRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; +import difference from 'lodash/difference'; import mapValues from 'lodash/mapValues'; import moment from 'moment'; import { IntlProvider, addLocaleData } from 'react-intl'; @@ -17,16 +18,50 @@ import routeConfiguration from './routeConfiguration'; import Routes from './Routes'; import config from './config'; -// If you want to change the language, Change the imports to the match -// the wanted locale. -// -// Remember to also change the language in the config.js file. +// Flex template application uses English translations as default. +import defaultMessages from './translations/en.json'; + +// If you want to change the language, change the imports to match the wanted locale: +// 1) Change the language in the config.js file! +// 2) Import correct locale rules for React Intl library +// 3) Import correct locale rules for Moment library +// 4) Use the `messagesInLocale` import to add the correct translation file. + +// Step 2: +// Import locale rules for React Intl library import localeData from 'react-intl/locale-data/en'; -import messages from './translations/en.json'; + +// Step 3: // If you are using a non-english locale with moment library, // you should also import time specific formatting rules for that locale // e.g. for French: import 'moment/locale/fr'; +// Step 4: +// If you are using a non-english locale, point `messagesInLocale` to correct .json file +import messagesInLocale from './translations/fr.json'; + +// If translation key is missing from `messagesInLocale` (e.g. fr.json), +// corresponding key will be added to messages from `defaultMessages` (en.json) +// to prevent missing translation key errors. +const addMissingTranslations = (sourceLangTranslations, targetLangTranslations) => { + const sourceKeys = Object.keys(sourceLangTranslations); + const targetKeys = Object.keys(targetLangTranslations); + const missingKeys = difference(sourceKeys, targetKeys); + + const addMissingTranslation = (translations, missingKey) => ({ + ...translations, + [missingKey]: sourceLangTranslations[missingKey], + }); + + return missingKeys.reduce(addMissingTranslation, targetLangTranslations); +}; + +const isDefaultLanguageInUse = config.locale === 'en'; + +const messages = isDefaultLanguageInUse + ? defaultMessages + : addMissingTranslations(defaultMessages, messagesInLocale); + const isTestEnv = process.env.NODE_ENV === 'test'; // Locale should not affect the tests. We ensure this by providing