<commit_before># 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) for a complete example.

1. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && npm 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")
  ```

  Add following lines to `config/application.rb`, this will help you to generate `translations.js` & `default.js` automatically when you starts the server.

  ```js
  module YourModule
    class Application < Rails::Application
      ...
      config.after_initialize do
        ReactOnRails::LocalesToJs.new
      end
    end
  end
  ```

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) }
  )
  ```
<commit_msg>Update i18n.md<commit_after># 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 && npm 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")
  ```

  Add following lines to `config/application.rb`, this will help you to generate `translations.js` & `default.js` automatically when you starts the server.

  ```js
  module YourModule
    class Application < Rails::Application
      ...
      config.after_initialize do
        ReactOnRails::LocalesToJs.new
      end
    end
  end
  ```

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) }
  )
  ```

{'fraction_non_alphanumeric': 0.13906520484708598, 'fraction_numerical': 0.010771302173494902, 'mean_word_length': 2.9097744360902253, 'pattern_counts': {'":': 6, '<': 11, '<?xml version=': 0, '>': 19, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2927913', 'n_tokens_mistral': 1747, 'n_tokens_neox': 1675, 'n_words': 464}