Add localization support for endpoint pages components (#667)

* init localization

* Update defaul to en

* Fix merge issue and import path.

* Set default to en

* Change jsx to tsx

* Update the password max length string.

* Remove languageContext as using the recoil instead.

* Add localization to component endpoints pages

* Revert default to en after testing.

* Update LoginForm.tsx

* Fix translation.

* Make lint happy
This commit is contained in:
Abner Chou 2023-07-22 15:09:45 -04:00 committed by GitHub
parent 4148c6d219
commit b64273957a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 212 additions and 67 deletions

View file

@ -3,6 +3,21 @@ import Chinese from './languages/Zh';
import Italy from './languages/It';
// === import additional language files here === //
// New method on String allow using "{\d}" placeholder for
// loading value dynamically.
interface String {
format(...replacements: string[]): string;
}
if (!String.prototype.format) {
String.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// input: language code in string
// returns an object of translated strings in the language
export const getTranslations = (langCode: string) => {
@ -21,7 +36,12 @@ export const getTranslations = (langCode: string) => {
// input: language code in string & phrase key in string
// returns an corresponding phrase value in string
export const localize = (langCode: string, phraseKey: string) => {
export const localize = (langCode: string, phraseKey: string, ...values: string[]) => {
const lang = getTranslations(langCode);
return lang[phraseKey];
if (phraseKey in lang) {
return lang[phraseKey].format(...values);
}
// Fall back logic to cover untranslated phrases
return English[phraseKey].format(...values);
};