setup translation messages for i18n

.storybook/helpers/initIntlStorybook.js

@@ -1,12 +1,24 @@
 /* global document */
 import React from 'react'
-import { IntlProvider } from 'react-intl'
+import { IntlProvider, addLocaleData } from 'react-intl'
+import en from 'react-intl/locale-data/en'
+import getLocaleMessages from '../../app/helpers/getLocaleMessages'
+
+const locale = navigator.language
+addLocaleData([...en])
+const messagesByLocale = {
+  en: require('../../app/locales/en')
+}
+const messages = getLocaleMessages(messagesByLocale, locale)
 
 export default () =>
   story => {
     return (
-      <IntlProvider locale='en'>
+      <IntlProvider
+        locale={locale}
+        messages={messages}
+      >
         {story()}
       </IntlProvider>
-    );
+    )
   }

README.md

@@ -157,6 +157,8 @@ If you add a ["story"](https://storybook.js.org), please add your topic story to
 
 Check out [`app/stories/index.js`](./app/stories/index.js) for example stories, which you can copy into a new topic.
 
+NOTE: At the moment, hot-reload does not work when changing messages in `app/locales/*.json`.
+
 ### Numbers
 
 All numbers should be represented as strings and manipulated with [`bigmath`](https://github.com/ahdinosaur/bigmath).

agents/components/Profile.js

@@ -4,6 +4,7 @@ import { connect as connectFela } from 'react-fela'
 import { Field, reduxForm as connectForm } from 'redux-form'
 import { flow } from 'lodash'
 import { TextField } from 'redux-form-material-ui'
+import { FormattedMessage } from 'react-intl'
 
 import styles from '../styles/Profile'
 
@@ -38,14 +39,14 @@ class Profile extends React.Component {
         />
         <Field
           name='name'
-          floatingLabelText='Name'
+          floatingLabelText={<FormattedMessage id='agents.nameLabel' />}
           component={TextField}
           value={name}
           disabled={!isEditing}
         />
         <Field
           name='description'
-          floatingLabelText='Description'
+          floatingLabelText={<FormattedMessage id='agents.descriptionLabel' />}
           component={TextField}
           value={description}
           multiLine={true}

app/components/home.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { createComponent } from '@ahdinosaur/react-fela'
+import { FormattedMessage } from 'react-intl'
 
 import styles from '../styles/home'
 
@@ -9,6 +10,6 @@ export default function Home (props) {
   const { routes } = props
 
   return <Container>
-    Cobuy!
+    <FormattedMessage id='app.name' />
   </Container>
 }

app/components/layout.js

@@ -39,11 +39,24 @@ const mapRoutePages = map(route => {
 
 // TODO move this to some config for dogstack
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
-import { IntlProvider } from 'react-intl'
+import { IntlProvider, addLocaleData } from 'react-intl'
+import en from 'react-intl/locale-data/en'
+import getLocaleMessages from '../helpers/getLocaleMessages'
+
+const locale = navigator.language
+addLocaleData([...en])
+const messagesByLocale = {
+  en: require('../locales/en')
+}
+const messages = getLocaleMessages(messagesByLocale, locale)
+
 export default (props) => {
   return (
     <MuiThemeProvider>
-      <IntlProvider locale='en'>
+      <IntlProvider
+        locale={locale}
+        messages={messages}
+      >
         <Layout {...props} />
       </IntlProvider>
     </MuiThemeProvider>

app/helpers/getLocaleMessages.js

@@ -0,0 +1,26 @@
+import { isNil, reverse, mergeAll, any, map } from 'ramda'
+
+export default getLocaleMessages
+
+function getLocaleMessages (messagesByLocale, locale) {
+  const subLocales = getSubLocales(locale)
+  if (!any(nextLocale => !isNil(messagesByLocale[nextLocale]))(subLocales)) {
+    throw new Error(`patch-intl: ${locale} locale not found in locales`)
+  }
+  const messagesBySubLocale = map(subLocale => messagesByLocale[subLocale])(subLocales)
+  return mergeAll(reverse(messagesBySubLocale))
+}
+
+// iterate through locale and parent locales
+// for example: en-US -> [en-US, en]
+function getSubLocales (locale) {
+  var subLocales = [locale]
+  while (locale.indexOf('-') !== -1) {
+    const localeTags = locale.split('-')
+    const parentLocaleTags = localeTags.slice(0, localeTags.length - 1)
+    const parentLocale = parentLocaleTags.join('-')
+    subLocales.push(parentLocale)
+    locale = parentLocale
+  }
+  return subLocales
+}

app/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "app.name": "Cobuy",
+  "agents.nameLabel": "name",
+  "agents.descriptionLabel": "description"
+}