Multi language support

Infrastructure Setup ( ~20hrs)

To setup infrastructure we followed the guide by React-i18Next, following these steps

1. Install i18next and react-18next using the command

   1. npm install react-i18next i18next i18next-parser --save

2. i18next-parser will allow a user to scan for new translations in any part of the webapp, using either the useTranslation hook or the withTranslation Higher Order Component. For example, if I have a t('KEY_A') which is not located in the lang/en/translation.json running npm run i18n will create a new entry in the translation.json.

3. Create the base configuration file needed to run the parser script taking this as base template, the only modifications done were changing the defaultValue (which is the value that the parser will use for any translation not found) to “MISSING” and adding locales for en, es, pt and fr.

4. Run in webapp npm run i18n

5. Insert withTranslation HOC and useTranslation hooks in every component in the app.

6. TAG every Label, or visible text in the app with an appropiate key. Try to separate the views in different objects of the translation For example, if working on a login component wrap every translation for the Login in a “LOGIN” object, you can find various examples of this practice in the current translation.json.

7. Re-run npm run i18n and checkout the lang/en/translation.json which will have all tags that were added.

8. Translate those tags within the translation file.

WHEN YOU : Add new components, Add more text or Find text that has not been translated Perform steps 6 to 8 in the case no new component was added, or 5 to 8 in the case a new component was added.

Adding a new language (~30mins)

Adding a new language after the initial configuration was done should be a simple process.

1. Include the new language locale (using the first 2 letters of it) in the locales array located in the i18next-parser.config.js which looks like this

     locales: ['en', 'es', 'pt', 'fr']

2. Run npm run i18n which should create a new folder with 2 files lang/[your_locale]/translation.json and lang/[your_locale]/common.json.

3. Modify the lang/i18n.js file, to include the new locale in the app.

   1. Import both files in the beggining on the file doing

      import [your_locale] from './[your_locale]/translation.json';
      import [your_locale]_common from './[your_locale]/common.json';

   2. Include the new locale in the resources object, like so:

      fr:{
        translation: fr,
        common: fr_common
      }, //INCLUDE THE CODE BELOW
      [your_locale]:{
        translation: [your_locale],
        common: [your_locale]_common
      }

4. After that you can proceed to translate the files that were created and making a PR on our repo.