Skip to content

Commit 8d48a20

Browse files
committed
feat: add multi-language support
1 parent 75916b4 commit 8d48a20

File tree

8 files changed

+130
-6
lines changed

8 files changed

+130
-6
lines changed

app/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@
1515
"proxy": "https://localhost:8443",
1616
"dependencies": {
1717
"@improbable-eng/grpc-web": "0.12.0",
18+
"i18next": "19.4.1",
19+
"i18next-browser-languagedetector": "4.0.2",
1820
"mobx": "5.15.4",
1921
"mobx-react": "6.2.2",
2022
"react": "^16.13.1",
2123
"react-dom": "^16.13.1",
24+
"react-i18next": "11.3.4",
2225
"react-scripts": "3.4.1"
2326
},
2427
"devDependencies": {
@@ -48,6 +51,7 @@
4851
"src/**/*.{js,jsx,ts,tsx}",
4952
"!src/**/*.d.ts",
5053
"!src/types/**/*.{js,ts}",
54+
"!src/i18n/**/*.{js,ts}",
5155
"!src/index.tsx"
5256
]
5357
},

app/src/App.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useEffect } from 'react';
22
import { observer } from 'mobx-react';
33
import './App.css';
4+
import usePrefixedTranslation from 'hooks/usePrefixedTranslation';
45
import { channel, node, swap } from 'action';
56
import store from 'store';
67

78
const App = () => {
9+
const { l } = usePrefixedTranslation('App');
810
useEffect(() => {
911
// fetch node info when the component is mounted
1012
const fetchInfo = async () => await node.getInfo();
@@ -13,25 +15,25 @@ const App = () => {
1315

1416
return (
1517
<div className="App">
16-
<p>Node Info</p>
18+
<p>{l('App.nodeInfo')}</p>
1719
{store.info && (
1820
<>
1921
<table className="App-table">
2022
<tbody>
2123
<tr>
22-
<th>Pubkey</th>
24+
<th>{l('pubkey')}</th>
2325
<td>{store.info.identityPubkey}</td>
2426
</tr>
2527
<tr>
26-
<th>Alias</th>
28+
<th>{l('alias')}</th>
2729
<td>{store.info.alias}</td>
2830
</tr>
2931
<tr>
30-
<th>Version</th>
32+
<th>{l('version')}</th>
3133
<td>{store.info.version}</td>
3234
</tr>
3335
<tr>
34-
<th># Channels</th>
36+
<th>{l('numChannels')}</th>
3537
<td>{store.info.numActiveChannels}</td>
3638
</tr>
3739
</tbody>
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useCallback } from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
4+
/**
5+
* A hook which returns a `t` function that inserts a prefix in each key lookup
6+
* @param prefix the prefix to use for all translation keys
7+
*/
8+
const usePrefixedTranslation = (prefix: string) => {
9+
const { t } = useTranslation();
10+
// the new `t` function that will append the prefix
11+
const translate = useCallback(
12+
(key: string, options?: string | object) => {
13+
// if the key contains a '.', then don't add the prefix
14+
return key.includes('.') ? t(key, options) : t(`${prefix}.${key}`, options);
15+
},
16+
[prefix, t],
17+
);
18+
19+
return {
20+
l: translate,
21+
};
22+
};
23+
24+
export default usePrefixedTranslation;

app/src/i18n/index.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { initReactI18next } from 'react-i18next';
2+
import i18n, { InitOptions } from 'i18next';
3+
import LanguageDetector from 'i18next-browser-languagedetector';
4+
import enUS from './locales/en-US.json';
5+
6+
const defaultLanguage = 'en-US';
7+
8+
export const languages: { [index: string]: string } = {
9+
'en-US': 'English',
10+
};
11+
12+
/**
13+
* create a mapping of locales -> translations
14+
*/
15+
const resources = Object.keys(languages).reduce((acc: { [key: string]: any }, lang) => {
16+
switch (lang) {
17+
case 'en-US':
18+
acc[lang] = { translation: enUS };
19+
break;
20+
}
21+
return acc;
22+
}, {});
23+
24+
/**
25+
* create an array of allowed languages
26+
*/
27+
const whitelist = Object.keys(languages).reduce((acc: string[], lang) => {
28+
acc.push(lang);
29+
30+
if (lang.includes('-')) {
31+
acc.push(lang.substring(0, lang.indexOf('-')));
32+
}
33+
34+
return acc;
35+
}, []);
36+
37+
const config: InitOptions = {
38+
lng: defaultLanguage,
39+
resources,
40+
whitelist,
41+
fallbackLng: defaultLanguage,
42+
keySeparator: false,
43+
interpolation: {
44+
escapeValue: false,
45+
},
46+
};
47+
48+
i18n.use(LanguageDetector).use(initReactI18next).init(config);
49+
50+
export default i18n;

app/src/i18n/locales/en-US.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"App.nodeInfo": "Node Info",
3+
"App.pubkey": "Pubkey",
4+
"App.alias": "Alias",
5+
"App.version": "Version",
6+
"App.numChannels": "# Channels"
7+
}

app/src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import 'mobx-react/batchingForReactDom';
4+
import './i18n';
45
import './index.css';
56
import App from './App';
67

app/src/setupTests.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ import 'mobx-react-lite/batchingForReactDom';
55
// expect(element).toHaveTextContent(/react/i)
66
// learn more: https://github.com/testing-library/jest-dom
77
import '@testing-library/jest-dom/extend-expect';
8+
// enable i18n translations in unit tests
9+
import './i18n';

app/yarn.lock

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -899,7 +899,7 @@
899899
dependencies:
900900
regenerator-runtime "^0.13.4"
901901

902-
"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
902+
"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
903903
version "7.9.2"
904904
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
905905
integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -5003,6 +5003,13 @@ html-minifier-terser@^5.0.1:
50035003
relateurl "^0.2.7"
50045004
terser "^4.6.3"
50055005

5006+
html-parse-stringify2@2.0.1:
5007+
version "2.0.1"
5008+
resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
5009+
integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
5010+
dependencies:
5011+
void-elements "^2.0.1"
5012+
50065013
html-webpack-plugin@4.0.0-beta.11:
50075014
version "4.0.0-beta.11"
50085015
resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
@@ -5102,6 +5109,20 @@ https-browserify@^1.0.0:
51025109
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
51035110
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
51045111

5112+
i18next-browser-languagedetector@4.0.2:
5113+
version "4.0.2"
5114+
resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.0.2.tgz#eb02535cc5e57dd534fc60abeede05a3823a8551"
5115+
integrity sha512-AK4IZ3XST4HIKShgpB2gOFeDPrMOnZx56GLA6dGo/8rvkiczIlq05lV8w77c3ShEZxtTZeUVRI4Q/cBFFVXS/w==
5116+
dependencies:
5117+
"@babel/runtime" "^7.5.5"
5118+
5119+
i18next@19.4.1:
5120+
version "19.4.1"
5121+
resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.4.1.tgz#4929d15d3d01e4712350a368d005cefa50ff5455"
5122+
integrity sha512-dC3ue15jkLebN2je4xEjfjVYd/fSAo+UVK9f+JxvceCJRowkI+S0lGohgKejqU+FYLfvw9IAPylIIEWwR8Djrg==
5123+
dependencies:
5124+
"@babel/runtime" "^7.3.1"
5125+
51055126
iconv-lite@0.4.24, iconv-lite@^0.4.24:
51065127
version "0.4.24"
51075128
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8572,6 +8593,14 @@ react-error-overlay@^6.0.7:
85728593
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
85738594
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
85748595

8596+
react-i18next@11.3.4:
8597+
version "11.3.4"
8598+
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.3.4.tgz#355df5fe5133e5e30302d166f529678100ffc968"
8599+
integrity sha512-IRZMD7PAM3C+fJNzRbyLNi1ZD0kc3Z3obBspJjEl+9H+ME41PhVor3BpdIqv/Rm7lUoGhMjmpu42J45ooJ61KA==
8600+
dependencies:
8601+
"@babel/runtime" "^7.3.1"
8602+
html-parse-stringify2 "2.0.1"
8603+
85758604
react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
85768605
version "16.13.1"
85778606
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10353,6 +10382,11 @@ vm-browserify@^1.0.1:
1035310382
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
1035410383
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
1035510384

10385+
void-elements@^2.0.1:
10386+
version "2.0.1"
10387+
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
10388+
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
10389+
1035610390
w3c-hr-time@^1.0.1:
1035710391
version "1.0.2"
1035810392
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

0 commit comments

Comments
 (0)