- client: Make language tag in HTML same as setting language

Close #1797

Squashed commit of the following:

commit b822a83cb05cc5ba92000cdb7d1c12629471bc57
Merge: e2fa24fb 72ce5f57
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:02:56 2020 +0300

    Merge branch 'master' into fix/1797

commit e2fa24fb9fa0c15f8411e186e90e0ffb1c705fb2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 2 18:21:30 2020 +0300

    Extract helper

commit ba8473e7b16ab8b1abbee4b42a4ef2b0de8c136b
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 2 15:31:42 2020 +0300

    - client: Make language tag in HTML same as setting language

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,7 +283,8 @@ 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 testMessages = Object.keys(upstreamResponse)
+            .map((key) => {
                 const message = upstreamResponse[key];
                 if (message !== 'OK') {
                     dispatch(addErrorToast({ error: i18next.t('dns_test_not_ok_toast', { key }) }));
@@ -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));
     }

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);
             }
         }
 

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,52 +28,55 @@ 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 = () => <div className="footer__column">
+    const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
-            <Trans>copyright</Trans> &copy; {this.getYear()}{' '}
+            {t('copyright')} &copy; {getYear()}{' '}
             <a target="_blank" rel="noopener noreferrer" href="https://adguard.com/">AdGuard</a>
         </div>
     </div>;
 
-    renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
+    const renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
             key={name}
             href={href}
             className={classNames('footer__link', className)}
             target="_blank"
             rel="noopener noreferrer"
         >
-        <Trans>{name}</Trans>
+            {t(name)}
         </a>);
 
 
-    render() {
     const {
         dnsVersion, processingVersion, getVersion, checkUpdateFlag,
-        } = this.props;
+    } = props;
 
     return (
-            <Fragment>
+        <>
             <footer className="footer">
                 <div className="container">
                     <div className="footer__row">
                         <div className="footer__column footer__column--links">
-                                {this.renderLinks(linksData)}
+                            {renderLinks(linksData)}
                         </div>
                         <div className="footer__column footer__column--language">
                             <select
                                 className="form-control select select--language"
                                 value={i18n.language}
-                                    onChange={this.changeLanguage}
+                                onChange={changeLanguage}
                             >
                                 {Object.keys(LANGUAGES)
                                     .map((lang) => (
@@ -88,7 +92,7 @@ class Footer extends Component {
             <div className="footer">
                 <div className="container">
                     <div className="footer__row">
-                            {this.renderCopyright()}
+                        {renderCopyright()}
                         <div className="footer__column footer__column--language">
                             <Version
                                 dnsVersion={dnsVersion}
@@ -100,10 +104,9 @@ class Footer extends Component {
                     </div>
                 </div>
             </div>
-            </Fragment>
+        </>
     );
-    }
-}
+};
 
 Footer.propTypes = {
     dnsVersion: PropTypes.string,
@@ -112,4 +115,4 @@ Footer.propTypes = {
     checkUpdateFlag: PropTypes.bool,
 };
 
-export default withTranslation()(Footer);
+export default Footer;

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;
+};

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;