Different user languages

[julevdl]

User story

1. As an international user
2. I want / need to read the textual components in my native language
3. So that I can better understand the software

Acceptance criteria

• Languages: German, English (for now)
• Button in the top right corner of every page to switch from German to English and vice versa

Definition of done

• Documentation conform with tsdoc
• Reviewed with 4 eyes principle
• Understandable documentation for developers

[CatoLeanTruetschel]

To implement localization, we need to replace all strings that are currently hard-coded in the UI components with a lookup by some arbitrary, but unique key into some global dictionary. The dictionary maps the keys in the context of a language to a display string that can than be shown to the user. Additionally, there has to be support for placeholder in the display string, that can be replaced with dynamic values when the display string is put into the UI. This approach allows to replace the complete dictionary with another dictionary, that localizes all strings to a dedicated language.

There are basically two major frameworks that make this easy to be integrated in React apps.

• react-i18next is a full blown localization framework with react support and lot's of features. An introduction can be found here
• react-localization seems to be the standard and default way to implement localization in React-Apps.

Both frameworks support the basic use-case above. react-localization has no hook injection like react-i18next but is more precise in its APIs. As we have dependency injection implemented anyway, missing hooks would not be of any problem for our project. Language dictionaries need to be provided in the source code basically. react-i18next has support for requesting language dictionaries from the backend via HTTP too.

On top of this, there need to be some kind of language select that a user can switch the language with. This information then needs to be persisted (for example via local-storage) and used both, on application startup as well as on reaction to language switches to move from the current language dictionary to the required one (or a fallback one, if the desired one is not available).