diff --git a/app/package.json b/app/package.json index cbabe509..98e0d4e4 100644 --- a/app/package.json +++ b/app/package.json @@ -15,10 +15,13 @@ "proxy": "https://localhost:8443", "dependencies": { "@improbable-eng/grpc-web": "0.12.0", + "i18next": "19.4.1", + "i18next-browser-languagedetector": "4.0.2", "mobx": "5.15.4", "mobx-react": "6.2.2", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-i18next": "11.3.4", "react-scripts": "3.4.1" }, "devDependencies": { @@ -48,6 +51,7 @@ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts", "!src/types/**/*.{js,ts}", + "!src/i18n/**/*.{js,ts}", "!src/index.tsx" ] }, diff --git a/app/src/App.tsx b/app/src/App.tsx index 41082072..f787514a 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,10 +1,12 @@ import React, { useEffect } from 'react'; import { observer } from 'mobx-react'; import './App.css'; +import usePrefixedTranslation from 'hooks/usePrefixedTranslation'; import { channel, node, swap } from 'action'; import store from 'store'; const App = () => { + const { l } = usePrefixedTranslation('App'); useEffect(() => { // fetch node info when the component is mounted const fetchInfo = async () => await node.getInfo(); @@ -13,25 +15,25 @@ const App = () => { return (
-

Node Info

+

{l('App.nodeInfo')}

{store.info && ( <> - + - + - + - + diff --git a/app/src/hooks/usePrefixedTranslation.ts b/app/src/hooks/usePrefixedTranslation.ts new file mode 100644 index 00000000..45246514 --- /dev/null +++ b/app/src/hooks/usePrefixedTranslation.ts @@ -0,0 +1,24 @@ +import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +/** + * A hook which returns a `t` function that inserts a prefix in each key lookup + * @param prefix the prefix to use for all translation keys + */ +const usePrefixedTranslation = (prefix: string) => { + const { t } = useTranslation(); + // the new `t` function that will append the prefix + const translate = useCallback( + (key: string, options?: string | object) => { + // if the key contains a '.', then don't add the prefix + return key.includes('.') ? t(key, options) : t(`${prefix}.${key}`, options); + }, + [prefix, t], + ); + + return { + l: translate, + }; +}; + +export default usePrefixedTranslation; diff --git a/app/src/i18n/index.ts b/app/src/i18n/index.ts new file mode 100644 index 00000000..0c4cb2b8 --- /dev/null +++ b/app/src/i18n/index.ts @@ -0,0 +1,50 @@ +import { initReactI18next } from 'react-i18next'; +import i18n, { InitOptions } from 'i18next'; +import LanguageDetector from 'i18next-browser-languagedetector'; +import enUS from './locales/en-US.json'; + +const defaultLanguage = 'en-US'; + +export const languages: { [index: string]: string } = { + 'en-US': 'English', +}; + +/** + * create a mapping of locales -> translations + */ +const resources = Object.keys(languages).reduce((acc: { [key: string]: any }, lang) => { + switch (lang) { + case 'en-US': + acc[lang] = { translation: enUS }; + break; + } + return acc; +}, {}); + +/** + * create an array of allowed languages + */ +const whitelist = Object.keys(languages).reduce((acc: string[], lang) => { + acc.push(lang); + + if (lang.includes('-')) { + acc.push(lang.substring(0, lang.indexOf('-'))); + } + + return acc; +}, []); + +const config: InitOptions = { + lng: defaultLanguage, + resources, + whitelist, + fallbackLng: defaultLanguage, + keySeparator: false, + interpolation: { + escapeValue: false, + }, +}; + +i18n.use(LanguageDetector).use(initReactI18next).init(config); + +export default i18n; diff --git a/app/src/i18n/locales/en-US.json b/app/src/i18n/locales/en-US.json new file mode 100644 index 00000000..45085c92 --- /dev/null +++ b/app/src/i18n/locales/en-US.json @@ -0,0 +1,7 @@ +{ + "App.nodeInfo": "Node Info", + "App.pubkey": "Pubkey", + "App.alias": "Alias", + "App.version": "Version", + "App.numChannels": "# Channels" +} diff --git a/app/src/index.tsx b/app/src/index.tsx index 1f1b280d..066754f1 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import 'mobx-react/batchingForReactDom'; +import './i18n'; import './index.css'; import App from './App'; diff --git a/app/src/setupTests.ts b/app/src/setupTests.ts index bc6f73e8..53363b55 100644 --- a/app/src/setupTests.ts +++ b/app/src/setupTests.ts @@ -5,3 +5,5 @@ import 'mobx-react-lite/batchingForReactDom'; // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom/extend-expect'; +// enable i18n translations in unit tests +import './i18n'; diff --git a/app/yarn.lock b/app/yarn.lock index ed5be49c..11900a25 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -899,7 +899,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@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": +"@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": version "7.9.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== @@ -5003,6 +5003,13 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" +html-parse-stringify2@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a" + integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o= + dependencies: + void-elements "^2.0.1" + html-webpack-plugin@4.0.0-beta.11: version "4.0.0-beta.11" 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: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= +i18next-browser-languagedetector@4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.0.2.tgz#eb02535cc5e57dd534fc60abeede05a3823a8551" + integrity sha512-AK4IZ3XST4HIKShgpB2gOFeDPrMOnZx56GLA6dGo/8rvkiczIlq05lV8w77c3ShEZxtTZeUVRI4Q/cBFFVXS/w== + dependencies: + "@babel/runtime" "^7.5.5" + +i18next@19.4.1: + version "19.4.1" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.4.1.tgz#4929d15d3d01e4712350a368d005cefa50ff5455" + integrity sha512-dC3ue15jkLebN2je4xEjfjVYd/fSAo+UVK9f+JxvceCJRowkI+S0lGohgKejqU+FYLfvw9IAPylIIEWwR8Djrg== + dependencies: + "@babel/runtime" "^7.3.1" + iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -8572,6 +8593,14 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== +react-i18next@11.3.4: + version "11.3.4" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.3.4.tgz#355df5fe5133e5e30302d166f529678100ffc968" + integrity sha512-IRZMD7PAM3C+fJNzRbyLNi1ZD0kc3Z3obBspJjEl+9H+ME41PhVor3BpdIqv/Rm7lUoGhMjmpu42J45ooJ61KA== + dependencies: + "@babel/runtime" "^7.3.1" + html-parse-stringify2 "2.0.1" + react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -10353,6 +10382,11 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +void-elements@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" + integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w= + w3c-hr-time@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
Pubkey{l('pubkey')} {store.info.identityPubkey}
Alias{l('alias')} {store.info.alias}
Version{l('version')} {store.info.version}
# Channels{l('numChannels')} {store.info.numActiveChannels}