|
|
# Translations
|
|
_Updated 14.6.22_
|
|
|
|
|
|
|
|
|
# Structure
|
|
|
|
|
|
|
|
All the applications translations are in src/translations.ts file.
|
|
|
|
The file contains union `type Language` for every supported language.
|
|
|
|
|
|
|
|
Translations use `interface Translation` for the translation strings. The strings are categorized to element types (titles, buttons etc.)
|
|
|
|
|
|
|
|
Each translation is a own `Translation` object. All translation objects are combined in `const translations : Languages` object.
|
|
|
|
|
|
|
|
# Usage
|
|
|
|
|
|
|
|
Currently used language will be saved to _localStorage_ with the key "language". The item value will be the languages `type Language` string value. Language can be changed from Settings.tsx modal with a language switch.
|
|
|
|
|
|
|
|
The translation object can be loaded with the localStorage "language" value using translations.ts's `const getTranslation = (lang: keyof Languages)` function. The function returns the translation object of the given language key.
|
|
|
|
|
|
|
|
Translations are used in components with component props from App.tsx. App.tsx will listen _language-change_ event and update the current translation object to its state. App.tsx will then pass the translation to components with the props.
|
|
|
|
|
|
|
|
All strings in components that needs to be translated will be using the translation object. The string can be set like `translation.titles.challenges`. |
|
|
|
\ No newline at end of file |
