# How to add I18n

Here's a summary of adding the I18n functionality.

You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340) for a complete example.

1. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && yarn install`.

  ```js
  "dependencies": {
    ...
    "intl": "^1.2.5",
    "react-intl": "^2.1.5",
    ...
  }
  ```

2. In `client/webpack.client.base.config.js`, set `react-intl` as an entry point.

  ```js
  module.exports = {
    ...
    entry: {
      ...
      vendor: [
        ...
        'react-intl',
      ],
      ...
  ```

3. `react-intl` requires locale files in json format. React on Rails will help you to generate or update `translations.js` & `default.js` automatically after you configured the following settings.
  
  > `translations.js`: All your locales in json format.
  >
  > `default.js`: Default settings in json format.
  >
  > You can add them to `.gitignore` and `.eslintignore`.
  
  Update settings in `config/initializers/react_on_rails.rb` to what you need:

  ```ruby
  # Replace the following line to the location where you keep translation.js & default.js.
  config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")
  ```

4. Javascript locale files must be generated before `yarn build`. 
  
  Once you setup `config.i18n_dir` as in the previous step, react_on_rails will help you to do this for testing and for production deployments. For development, you should adjust your Procfiles so that they run `bundle exec rake react_on_rails:locale` before running the `yarn run build:development` (webpack watch process)

  If you create your own Procfile files, you must add `bundle exec rake react_on_rails:locale` before `yarn build`.

5. In React, you need to initialize `react-intl`, and set parameters for it.

  ```js
  ...
  import { addLocaleData } from 'react-intl';
  import en from 'react-intl/locale-data/en';
  import de from 'react-intl/locale-data/de';
  import { translations } from 'path_to/i18n/translations';
  import { defaultLocale } from 'path_to/i18n/default';
  ...
  // Initizalize all locales for react-intl.
  addLocaleData([...en, ...de]);
  ...
  // set locale and messages for IntlProvider.
  const locale = method_to_get_current_locale() || defaultLocale;
  const messages = translations[locale];
  ...
  return (
    <IntlProvider locale={locale} key={locale} messages={messages}>
      <CommentScreen {...{ actions, data }} />
    </IntlProvider>
  )
  ```
  ```js
  // In your component.
  import { defaultMessages } from 'path_to/i18n/default';
  ...
  return (
    { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
  )
  ```