Page Comparison

...

The first two sections should be carried out by an engineer, while the third can be carried out by a user that is familiar with the use of Github. You’ll need a Github account to carry out any of these operations.

1. 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. Code Block
      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.

2. Adding a new language or dialect (~30mins)

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

...

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. In the case of a dialect, please concatenate the language and the locality, for example ‘pt’ for Portuguese Brazil.

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

...

Run npm run i18n which should create a new folder with several files lang/[your_locale]/[translation_namespace].json some of the current namespaces are: common, geneder, message, role, translation, etc..

...

Under this new folder, replace the en folder contents with the newly created folder contents. With this you will make sure you have all of the current namespaces, and will provide context on what you are translating.

...

In your newly created file, change usages of the word english to your new language e.g portuguese

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

Import the index you modified doing (using pt as example)

import portuguese from './pt;

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

fr:french,
 //INCLUDE THE CODE BELOW
pt:portuguese

...

After that you can proceed to translate the files that were created and making a PR on our repo as described in the next section

3. Making changes to an existing or new dictionary (~20 hours from scratch, a few minutes for individual word changes)

...