From c91952a21ae76ba9d67ca62cba0f65ca8bd8164e Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Sun, 6 Jun 2021 22:14:16 +0300 Subject: [PATCH] added language switch --- web/src/App/Sidebar.jsx | 18 ++++++++++++--- web/src/locales/en/translation.json | 3 ++- web/src/locales/ru/translation.json | 3 ++- web/src/utils/useChangeLanguage.js | 6 +++++ web/yarn.lock | 36 ++++++++++++++++++++++++++++- 5 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 web/src/utils/useChangeLanguage.js diff --git a/web/src/App/Sidebar.jsx b/web/src/App/Sidebar.jsx index b6cf730..26fec55 100644 --- a/web/src/App/Sidebar.jsx +++ b/web/src/App/Sidebar.jsx @@ -8,22 +8,26 @@ import RemoveAll from 'components/RemoveAll' import SettingsDialog from 'components/Settings' import AboutDialog from 'components/About' import UploadDialog from 'components/Upload' -import { CreditCard as CreditCardIcon, List as ListIcon } from '@material-ui/icons' +import { CreditCard as CreditCardIcon, List as ListIcon, Language as LanguageIcon } from '@material-ui/icons' import List from '@material-ui/core/List' import CloseServer from 'components/CloseServer' import { useTranslation } from 'react-i18next' +import useChangeLanguage from 'utils/useChangeLanguage' import { AppSidebarStyle } from './style' export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) { + const [currentLang, changeLang] = useChangeLanguage() + const { t } = useTranslation() + return ( - + @@ -35,6 +39,14 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) { + + (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> + + + + + + @@ -42,7 +54,7 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) { - setIsDonationDialogOpen(true)}> + setIsDonationDialogOpen(true)}> diff --git a/web/src/locales/en/translation.json b/web/src/locales/en/translation.json index c107080..d51c053 100644 --- a/web/src/locales/en/translation.json +++ b/web/src/locales/en/translation.json @@ -85,5 +85,6 @@ "UPNP": "UPnP (Universal Plug and Play)", "UseDisk": "Use Disk", "UTP": "μTP (Micro Transport Protocol)", - "Viewed": "Viewed" + "Viewed": "Viewed", + "ChooseLanguage": "Russian" } \ No newline at end of file diff --git a/web/src/locales/ru/translation.json b/web/src/locales/ru/translation.json index 4c7551f..f0b3d6a 100644 --- a/web/src/locales/ru/translation.json +++ b/web/src/locales/ru/translation.json @@ -85,5 +85,6 @@ "UPNP": "UPnP (Universal Plug and Play)", "UseDisk": "Использовать кеш на диске", "UTP": "μTP (Micro Transport Protocol)", - "Viewed": "Просм." + "Viewed": "Просм.", + "ChooseLanguage": "Английский" } \ No newline at end of file diff --git a/web/src/utils/useChangeLanguage.js b/web/src/utils/useChangeLanguage.js new file mode 100644 index 0000000..91f3039 --- /dev/null +++ b/web/src/utils/useChangeLanguage.js @@ -0,0 +1,6 @@ +import { useTranslation } from 'react-i18next' + +export default () => { + const { i18n } = useTranslation() + return [i18n.language, lang => i18n.changeLanguage(lang)] +} diff --git a/web/yarn.lock b/web/yarn.lock index bc8dcd8..ab99e80 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1174,7 +1174,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.14.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== @@ -6385,6 +6385,13 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" +html-parse-stringify@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2" + integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg== + dependencies: + void-elements "3.1.0" + html-webpack-plugin@4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c" @@ -6505,6 +6512,20 @@ hyphenate-style-name@^1.0.3: resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== +i18next-browser-languagedetector@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.1.tgz#fc4c6606bb3f7afc331737cf7c41e50919d55542" + integrity sha512-hckgbBdCpJPhkGUANe6tsvD52k9R7GuYskG0EaIw89pZz3owUvUEwXHqM5pX1Pn93jz+O65Y09ikwJrMkqtq2Q== + dependencies: + "@babel/runtime" "^7.5.5" + +i18next@^20.3.1: + version "20.3.1" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.3.1.tgz#b51dd281a2eec8087753edf1727e160dac8a5554" + integrity sha512-WTY07KreR5z2LBSzAIKs05zpR5tgUT98C4fD96e7Risbc/HZePwF6AEnb9VkjdeSeRn9PDqQBay7ZkphuXt0Xw== + dependencies: + "@babel/runtime" "^7.12.0" + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -10306,6 +10327,14 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== +react-i18next@^11.10.0: + version "11.10.0" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.10.0.tgz#f34257447e18e710e36d8fd3f721dd7d37c7004f" + integrity sha512-Vn0Xw2MczBZHKciWdayx4J+P3S9Im2FWIzUPV2O7iUVFqIOhMv6o9mVTJN1gEi/MA2FZzorjvaEijglCMeehZQ== + dependencies: + "@babel/runtime" "^7.14.0" + html-parse-stringify "^3.0.1" + react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -12548,6 +12577,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@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09" + integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk= + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"