From 205680b71b10dd618c5a45a98f56f951db7a59f6 Mon Sep 17 00:00:00 2001 From: Artem Baskal Date: Fri, 3 Jul 2020 11:14:54 +0300 Subject: [PATCH] - client: Make language tag in HTML same as setting language Close #1797 Squashed commit of the following: commit b822a83cb05cc5ba92000cdb7d1c12629471bc57 Merge: e2fa24fb 72ce5f57 Author: ArtemBaskal Date: Fri Jul 3 11:02:56 2020 +0300 Merge branch 'master' into fix/1797 commit e2fa24fb9fa0c15f8411e186e90e0ffb1c705fb2 Author: ArtemBaskal Date: Thu Jul 2 18:21:30 2020 +0300 Extract helper commit ba8473e7b16ab8b1abbee4b42a4ef2b0de8c136b Author: ArtemBaskal Date: Thu Jul 2 15:31:42 2020 +0300 - client: Make language tag in HTML same as setting language --- client/src/actions/index.js | 40 ++++++--- client/src/components/App/index.js | 2 + client/src/components/ui/Footer.js | 127 +++++++++++++++-------------- client/src/helpers/helpers.js | 7 ++ client/src/i18n.js | 5 +- 5 files changed, 106 insertions(+), 75 deletions(-) diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 550c304f..478a3021 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -70,9 +70,18 @@ export const initSettings = (settingsList) => async (dispatch) => { safesearch, } = settingsList; const newSettingsList = { - safebrowsing: { ...safebrowsing, enabled: safebrowsingStatus.enabled }, - parental: { ...parental, enabled: parentalStatus.enabled }, - safesearch: { ...safesearch, enabled: safesearchStatus.enabled }, + safebrowsing: { + ...safebrowsing, + enabled: safebrowsingStatus.enabled, + }, + parental: { + ...parental, + enabled: parentalStatus.enabled, + }, + safesearch: { + ...safesearch, + enabled: safesearchStatus.enabled, + }, }; dispatch(initSettingsSuccess({ settingsList: newSettingsList })); } catch (error) { @@ -274,13 +283,14 @@ export const testUpstream = (config) => async (dispatch) => { values.upstream_dns = normalizeTextarea(values.upstream_dns); const upstreamResponse = await apiClient.testUpstream(values); - const testMessages = Object.keys(upstreamResponse).map((key) => { - const message = upstreamResponse[key]; - if (message !== 'OK') { - dispatch(addErrorToast({ error: i18next.t('dns_test_not_ok_toast', { key }) })); - } - return message; - }); + const testMessages = Object.keys(upstreamResponse) + .map((key) => { + const message = upstreamResponse[key]; + if (message !== 'OK') { + dispatch(addErrorToast({ error: i18next.t('dns_test_not_ok_toast', { key }) })); + } + return message; + }); if (testMessages.every((message) => message === 'OK')) { dispatch(addSuccessToast('dns_test_ok_toast')); @@ -393,11 +403,17 @@ export const toggleDhcpSuccess = createAction('TOGGLE_DHCP_SUCCESS'); export const toggleDhcp = (values) => async (dispatch) => { dispatch(toggleDhcpRequest()); - let config = { ...values, enabled: false }; + let config = { + ...values, + enabled: false, + }; let successMessage = 'disabled_dhcp'; if (!values.enabled) { - config = { ...values, enabled: true }; + config = { + ...values, + enabled: true, + }; successMessage = 'enabled_dhcp'; dispatch(findActiveDhcp(values.interface_name)); } diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index 2318c7a9..afbd3888 100644 --- a/client/src/components/App/index.js +++ b/client/src/components/App/index.js @@ -36,6 +36,7 @@ import i18n from '../../i18n'; import Loading from '../ui/Loading'; import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants'; import Services from '../Filters/Services'; +import { setHtmlLangAttr } from '../../helpers/helpers'; class App extends Component { componentDidMount() { @@ -62,6 +63,7 @@ class App extends Component { if (!processing) { if (language) { i18n.changeLanguage(language); + setHtmlLangAttr(language); } } diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js index 14f37637..482573d6 100644 --- a/client/src/components/ui/Footer.js +++ b/client/src/components/ui/Footer.js @@ -1,6 +1,6 @@ -import React, { Component, Fragment } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -import { Trans, withTranslation } from 'react-i18next'; +import { useTranslation } from 'react-i18next'; import classNames from 'classnames'; import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants'; @@ -10,6 +10,7 @@ import i18n from '../../i18n'; import Version from './Version'; import './Footer.css'; import './Select.css'; +import { setHtmlLangAttr } from '../../helpers/helpers'; const linksData = [ { @@ -27,83 +28,85 @@ const linksData = [ }, ]; -class Footer extends Component { - getYear = () => { +const Footer = (props) => { + const { t } = useTranslation(); + + const getYear = () => { const today = new Date(); return today.getFullYear(); }; - changeLanguage = (event) => { - i18n.changeLanguage(event.target.value); + const changeLanguage = (event) => { + const { value } = event.target; + i18n.changeLanguage(value); + setHtmlLangAttr(value); }; - renderCopyright = () =>
+ const renderCopyright = () =>
- copyright © {this.getYear()}{' '} + {t('copyright')} © {getYear()}{' '} AdGuard
; - renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => - {name} - ); + const renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => + {t(name)} + ); - render() { - const { - dnsVersion, processingVersion, getVersion, checkUpdateFlag, - } = this.props; + const { + dnsVersion, processingVersion, getVersion, checkUpdateFlag, + } = props; - return ( - -
-
-
-
- {this.renderLinks(linksData)} -
-
- -
+ return ( + <> +
+
+
+
+ {renderLinks(linksData)}
-
-
-
-
-
- {this.renderCopyright()} -
- -
+
+
- - ); - } -} +
+
+
+
+ {renderCopyright()} +
+ +
+
+
+
+ + ); +}; Footer.propTypes = { dnsVersion: PropTypes.string, @@ -112,4 +115,4 @@ Footer.propTypes = { checkUpdateFlag: PropTypes.bool, }; -export default withTranslation()(Footer); +export default Footer; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 253a0506..8b3308c3 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -588,3 +588,10 @@ export const formatElapsedMs = (elapsedMs, t) => { .toFixed(2); return `${formattedElapsedMs} ${t('milliseconds_abbreviation')}`; }; + +/** + * @param language {string} + */ +export const setHtmlLangAttr = (language) => { + window.document.documentElement.lang = language; +}; diff --git a/client/src/i18n.js b/client/src/i18n.js index 699e59dc..ee776147 100644 --- a/client/src/i18n.js +++ b/client/src/i18n.js @@ -33,6 +33,7 @@ import hr from './__locales/hr.json'; import fa from './__locales/fa.json'; import th from './__locales/th.json'; import ro from './__locales/ro.json'; +import { setHtmlLangAttr } from './helpers/helpers'; const resources = { en: { @@ -143,10 +144,12 @@ i18n wait: true, }, whitelist: availableLanguages, - }, () => { + }, + () => { if (!availableLanguages.includes(i18n.language)) { i18n.changeLanguage(BASE_LOCALE); } + setHtmlLangAttr(i18n.language); }); export default i18n;