Improve and document changing locale

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)

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.

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

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,

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,