From 7ea3c3b30dae627578497808bdf3d15271bf3f8d Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Fri, 24 Nov 2017 12:01:06 +0200
Subject: [PATCH] Improve and document changing locale

---
 docs/README.md                                |  1 +
 docs/i18n.md                                  | 22 +++++++++++++++
 src/app.js                                    | 28 +++++++++++++++----
 .../DateRangeInputField/DateRangeInput.js     |  3 +-
 src/config.js                                 | 15 ++++++++++
 5 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 docs/i18n.md

diff --git a/docs/README.md b/docs/README.md
index 166570a8..1e3b2f61 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -16,3 +16,4 @@ Documentation for specific topics can be found in the following files:
  - [Static pages](static-pages.md)
  - [Analytics](analytics.md)
  - [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md)
+ - [i18n](i18n.md)
diff --git a/docs/i18n.md b/docs/i18n.md
new file mode 100644
index 00000000..28a81954
--- /dev/null
+++ b/docs/i18n.md
@@ -0,0 +1,22 @@
+# i18n
+
+The application supports having a single language for the UI. By
+default the language is English.
+
+We are using the [react-intl](https://github.com/yahoo/react-intl)
+package to translate UI texts and to format dates, numbers, money
+values, etc.
+
+To change the language, do the following:
+
+1. Copy the default
+   [src/translations/en.json](../src/translations/en.json) English
+   translation messages file into some other file like `es.json`.
+
+1. Change the messages in the new messages file to your language.
+
+1. In [src/config.js](../src/config.js), change the `locale` variable value
+
+1. In [src/app.js](../src/app.js), change the translation imports to
+   come from the correct `react-intl` locale and the new messages file
+   you created.
diff --git a/src/app.js b/src/app.js
index a77e2b64..277ac632 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,18 +4,34 @@ import ReactDOMServer from 'react-dom/server';
 import Helmet from 'react-helmet';
 import { BrowserRouter, StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import moment from 'moment';
 import { IntlProvider, addLocaleData } from 'react-intl';
-import en from 'react-intl/locale-data/en';
-import localeData from './translations/en.json';
 import configureStore from './store';
 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.
+import localeData from 'react-intl/locale-data/en';
+import messages from './translations/en.json';
+
+const setupLocale = () => {
+  // Add the translation messages
+  addLocaleData([...localeData]);
+
+  // Set the Moment locale globally
+  // See: http://momentjs.com/docs/#/i18n/changing-locale/
+  moment.locale(config.locale);
+};
 
 export const ClientApp = props => {
   const { store } = props;
-  addLocaleData([...en]);
+  setupLocale();
   return (
-    <IntlProvider locale="en" messages={localeData}>
+    <IntlProvider locale={config.locale} messages={messages}>
       <Provider store={store}>
         <BrowserRouter>
           <Routes routes={routeConfiguration()} />
@@ -31,9 +47,9 @@ ClientApp.propTypes = { store: any.isRequired };
 
 export const ServerApp = props => {
   const { url, context, store } = props;
-  addLocaleData([...en]);
+  setupLocale();
   return (
-    <IntlProvider locale="en" messages={localeData}>
+    <IntlProvider locale={config.locale} messages={messages}>
       <Provider store={store}>
         <StaticRouter location={url} context={context}>
           <Routes routes={routeConfiguration()} />
diff --git a/src/components/DateRangeInputField/DateRangeInput.js b/src/components/DateRangeInputField/DateRangeInput.js
index 883c134c..ada5196e 100644
--- a/src/components/DateRangeInputField/DateRangeInput.js
+++ b/src/components/DateRangeInputField/DateRangeInput.js
@@ -11,6 +11,7 @@ import { DateRangePicker, isInclusivelyAfterDay, isInclusivelyBeforeDay } from '
 import classNames from 'classnames';
 import moment from 'moment';
 import { START_DATE, END_DATE } from '../../util/dates';
+import config from '../../config';
 
 import NextMonthIcon from './NextMonthIcon';
 import PreviousMonthIcon from './PreviousMonthIcon';
@@ -58,7 +59,7 @@ const defaultProps = {
   daySize: 38,
   isRTL: false,
   initialVisibleMonth: null,
-  firstDayOfWeek: 0, // 0 .. 6, 0 is Sunday. TODO: This should come from some localization config.
+  firstDayOfWeek: config.i18n.firstDayOfWeek,
   numberOfMonths: 1,
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
diff --git a/src/config.js b/src/config.js
index dc6864a6..1ed8a508 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,6 +1,19 @@
 const env = process.env.REACT_APP_ENV || 'production';
 const dev = process.env.REACT_APP_ENV === 'development';
 
+// If you want to change the language, remember to also change the
+// locale data and the messages in the app.js file.
+const locale = 'en';
+const i18n = {
+  /*
+    0: Sunday
+    1: Monday
+    ...
+    6: Saturday
+  */
+  firstDayOfTheWeek: 0,
+};
+
 // To pass environment variables to the client app in the build
 // script, react-scripts (and the sharetribe-scripts fork of
 // react-scripts) require using the REACT_APP_ prefix to avoid
@@ -219,6 +232,8 @@ const facebookAppId = null;
 const config = {
   env,
   dev,
+  locale,
+  i18n,
   sdk: { clientId: sdkClientId, baseUrl: sdkBaseUrl },
   currency,
   currencyConfig,