+ client: Update packages - Merge pull request #613 in DNS/adguard-home from fix/1597 to master

Close #1597

Squashed commit of the following:

commit 1eb89586dd71260e561420fe669abc8b56a506a1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 20 14:54:10 2020 +0300

    Fix translation in install options

commit 1ebdc9ebfe12a609f978e47db6505c7095b10f7e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 20 13:11:34 2020 +0300

    Remove commented code

commit 2a8302c65a2a3cf7b6b1596115d1153dac32a794
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 19:02:49 2020 +0300

    Update i18n packages, add development browserlist, downgrade eslint to match peerDepencancies version

commit 3fcf73fb14cd9da508522d1a300b66af24da95e5
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 17:30:37 2020 +0300

    Remove all unused dependencies

commit e761810e3e54e188ada41245bdce7414cd0f03e8
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 16:35:24 2020 +0300

    Remove unused dependencies

commit d89d27da6befcaabcdc12bf5e7e94cbb24140010
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 16:14:09 2020 +0300

    Update regular dependencies

commit d2dfd01233d059870d5173ffd748cf61a477936f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 15:34:10 2020 +0300

    Update all dev dependancies

commit 02b6fb480e9d310039fbe9b7aae062a41128f070
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 14:14:44 2020 +0300

    Update all postcss packages

commit 5e1fa5f99ad75f77e5e429b28ee1ca0b5e65a9a0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 12:45:02 2020 +0300

    Prevent git from converting linebreaks in .js files

commit 0b9b3b0dccd47cfa50c9531fb61729e6b5a04523
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 12:43:01 2020 +0300

    Prevent git from converting linebreaks in .js files

commit 18b7495e9ef7130b1ac4dbba84c54127d16c6350
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 12:24:47 2020 +0300

    Remove linebreak-style eslint rule

commit df893dec53adebb1d662fe805fab508fd4ed5e06
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon May 18 20:55:47 2020 +0300

    Add prop types

commit 36178ecfc5c7fa11a6ee08d7705ca8560941af40
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon May 18 18:52:07 2020 +0300

    Update eslint and babel, fix eslint warnings

commit f045b4a2e6b9b78f7e88e3b5d1419c29966a8230
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon May 18 16:45:49 2020 +0300

    Update css loading webpack rules

commit 247fa1ed548ef0706a03fdada8309c1454d191f8
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 16:13:49 2020 +0300

    Suppress linebreak-style eslint error for Windows

commit d6499aac507100d6918c849c06d739d80f2229f0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 14:55:07 2020 +0300

    Suppress eslint exit code

commit ae2d6c614ea23a90d515168f8752e959298894ef
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 14:05:18 2020 +0300

    Edit css file warnings

commit 60675050f2a5baebc679fc05da7e033e5c740d90
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 13:10:26 2020 +0300

    Remove uglifyjs plugin

commit a27806434dd8672e71a26c7a2e810d77e5e229fa
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 01:29:17 2020 +0300

    Fix DefinePlugin value

commit 8f2966ca59195c2f70bca5072d20515d536f42a6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 01:05:03 2020 +0300

    Update webpack

client/src/components/App/index.css

@@ -1,5 +1,5 @@
 :root {
-    font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+    --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
 }
 
 body {
@@ -37,4 +37,4 @@ body {
 
 .font-monospace {
     font-family: var(--font-family-monospace);
-}
+}

client/src/components/App/index.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { HashRouter, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import LoadingBar from 'react-redux-loading-bar';
 
 import 'react-table/react-table.css';
@@ -147,4 +147,4 @@ App.propTypes = {
     getVersion: PropTypes.func,
 };
 
-export default withNamespaces()(App);
+export default withTranslation()(App);

client/src/components/Dashboard/BlockedDomains.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@@ -10,13 +10,12 @@ import DomainCell from './DomainCell';
 import { getPercent } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
-const CountCell = totalBlocked =>
-    function cell(row) {
-        const { value } = row;
-        const percent = getPercent(totalBlocked, value);
+const CountCell = (totalBlocked) => function cell(row) {
+    const { value } = row;
+    const percent = getPercent(totalBlocked, value);
 
-        return <Cell value={value} percent={percent} color={STATUS_COLORS.red} />;
-    };
+    return <Cell value={value} percent={percent} color={STATUS_COLORS.red} />;
+};
 
 const BlockedDomains = ({
     t,
@@ -74,4 +73,4 @@ BlockedDomains.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(BlockedDomains);
+export default withTranslation()(BlockedDomains);

client/src/components/Dashboard/Clients.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@@ -13,20 +13,19 @@ import { formatClientCell } from '../../helpers/formatClientCell';
 const getClientsPercentColor = (percent) => {
     if (percent > 50) {
         return STATUS_COLORS.green;
-    } else if (percent > 10) {
+    } if (percent > 10) {
         return STATUS_COLORS.yellow;
     }
     return STATUS_COLORS.red;
 };
 
-const countCell = dnsQueries =>
-    function cell(row) {
-        const { value } = row;
-        const percent = getPercent(dnsQueries, value);
-        const percentColor = getClientsPercentColor(percent);
+const countCell = (dnsQueries) => function cell(row) {
+    const { value } = row;
+    const percent = getPercent(dnsQueries, value);
+    const percentColor = getClientsPercentColor(percent);
 
-        return <Cell value={value} percent={percent} color={percentColor} />;
-    };
+    return <Cell value={value} percent={percent} color={percentColor} />;
+};
 
 const renderBlockingButton = (blocked, ip, handleClick, processing) => {
     let buttonProps = {
@@ -59,20 +58,19 @@ const renderBlockingButton = (blocked, ip, handleClick, processing) => {
 
 const isBlockedClient = (clients, ip) => !!(clients && clients.includes(ip));
 
-const clientCell = (t, toggleClientStatus, processing, disallowedClients) =>
-    function cell(row) {
-        const { value } = row;
-        const blocked = isBlockedClient(disallowedClients, value);
+const clientCell = (t, toggleClientStatus, processing, disallowedClients) => function cell(row) {
+    const { value } = row;
+    const blocked = isBlockedClient(disallowedClients, value);
 
-        return (
+    return (
             <Fragment>
                 <div className="logs__row logs__row--overflow logs__row--column">
                     {formatClientCell(row, t)}
                 </div>
                 {renderBlockingButton(blocked, value, toggleClientStatus, processing)}
             </Fragment>
-        );
-    };
+    );
+};
 
 const Clients = ({
     t,
@@ -103,8 +101,7 @@ const Clients = ({
                 {
                     Header: 'IP',
                     accessor: 'ip',
-                    sortMethod: (a, b) =>
-                        parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
+                    sortMethod: (a, b) => parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
                     Cell: clientCell(t, toggleClientStatus, processingAccessSet, disallowedClients),
                 },
                 {
@@ -154,4 +151,4 @@ Clients.propTypes = {
     disallowedClients: PropTypes.string.isRequired,
 };
 
-export default withNamespaces()(Clients);
+export default withTranslation()(Clients);

client/src/components/Dashboard/Counters.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import round from 'lodash/round';
 
 import Card from '../ui/Card';
@@ -23,10 +23,9 @@ const Counters = (props) => {
         avgProcessingTime,
     } = props;
 
-    const tooltipTitle =
-        interval === 1
-            ? t('number_of_dns_query_24_hours')
-            : t('number_of_dns_query_days', { count: interval });
+    const tooltipTitle = interval === 1
+        ? t('number_of_dns_query_24_hours')
+        : t('number_of_dns_query_days', { count: interval });
 
     return (
         <Card
@@ -136,4 +135,4 @@ Counters.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Counters);
+export default withTranslation()(Counters);

client/src/components/Dashboard/QueriedDomains.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@@ -13,20 +13,19 @@ import { getPercent } from '../../helpers/helpers';
 const getQueriedPercentColor = (percent) => {
     if (percent > 10) {
         return STATUS_COLORS.red;
-    } else if (percent > 5) {
+    } if (percent > 5) {
         return STATUS_COLORS.yellow;
     }
     return STATUS_COLORS.green;
 };
 
-const countCell = dnsQueries =>
-    function cell(row) {
-        const { value } = row;
-        const percent = getPercent(dnsQueries, value);
-        const percentColor = getQueriedPercentColor(percent);
+const countCell = (dnsQueries) => function cell(row) {
+    const { value } = row;
+    const percent = getPercent(dnsQueries, value);
+    const percentColor = getQueriedPercentColor(percent);
 
-        return <Cell value={value} percent={percent} color={percentColor} />;
-    };
+    return <Cell value={value} percent={percent} color={percentColor} />;
+};
 
 const QueriedDomains = ({
     t, refreshButton, topQueriedDomains, subtitle, dnsQueries,
@@ -72,4 +71,4 @@ QueriedDomains.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(QueriedDomains);
+export default withTranslation()(QueriedDomains);

client/src/components/Dashboard/Statistics.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
 import StatsCard from './StatsCard';
 import { getPercent, normalizeHistory } from '../../helpers/helpers';
@@ -76,4 +76,4 @@ Statistics.propTypes = {
     refreshButton: PropTypes.node.isRequired,
 };
 
-export default withNamespaces()(Statistics);
+export default withTranslation()(Statistics);

client/src/components/Dashboard/index.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Statistics from './Statistics';
 import Counters from './Counters';
@@ -57,10 +57,9 @@ class Dashboard extends Component {
             || stats.processingGetConfig
             || access.processing;
 
-        const subtitle =
-            stats.interval === 1
-                ? t('for_last_24_hours')
-                : t('for_last_days', { count: stats.interval });
+        const subtitle = stats.interval === 1
+            ? t('for_last_24_hours')
+            : t('for_last_days', { count: stats.interval });
 
         const refreshFullButton = (
             <button
@@ -173,4 +172,4 @@ Dashboard.propTypes = {
     getAccessList: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Dashboard);
+export default withTranslation()(Dashboard);

client/src/components/Filters/Actions.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
 const Actions = ({
     handleAdd, handleRefresh, processingRefreshFilters, whitelist,
@@ -35,5 +35,4 @@ Actions.propTypes = {
     whitelist: PropTypes.bool,
 };
 
-export default withNamespaces()(Actions);
-
+export default withTranslation()(Actions);

client/src/components/Filters/Check/Info.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import {
     checkFiltered,
@@ -20,8 +20,8 @@ const getFilterName = (id, filters, whitelistFilters, t) => {
         return t('filtered_custom_rules');
     }
 
-    const filter = filters.find(filter => filter.id === id)
-        || whitelistFilters.find(filter => filter.id === id);
+    const filter = filters.find((filter) => filter.id === id)
+        || whitelistFilters.find((filter) => filter.id === id);
 
     if (filter && filter.name) {
         return t('query_log_filtered', { filter: filter.name });
@@ -80,9 +80,9 @@ const getTitle = (reason, filterName, t, onlyFiltered) => {
 const getColor = (reason) => {
     if (checkFiltered(reason)) {
         return 'red';
-    } else if (checkRewrite(reason) || checkRewriteHosts(reason)) {
+    } if (checkRewrite(reason) || checkRewriteHosts(reason)) {
         return 'blue';
-    } else if (checkWhiteList(reason)) {
+    } if (checkWhiteList(reason)) {
         return 'green';
     }
 
@@ -162,4 +162,4 @@ Info.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Info);
+export default withTranslation()(Info);

client/src/components/Filters/Check/index.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { Field, reduxForm } from 'redux-form';
 import flow from 'lodash/flow';
 import Card from '../../ui/Card';
@@ -51,7 +51,7 @@ const Check = (props) => {
                                 <button
                                     className="btn btn-success btn-standard btn-large"
                                     type="submit"
-                                    onClick={this.handleSubmit}
+                                    onClick={handleSubmit}
                                     disabled={pristine || invalid || processing}
                                 >
                                     <Trans>check</Trans>
@@ -93,6 +93,6 @@ Check.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({ form: 'domainCheckForm' }),
 ])(Check);

client/src/components/Filters/CustomRules.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Card from '../ui/Card';
 import PageTitle from '../ui/PageTitle';
@@ -92,4 +92,4 @@ CustomRules.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(CustomRules);
+export default withTranslation()(CustomRules);

client/src/components/Filters/DnsAllowlist.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
@@ -131,4 +131,4 @@ DnsAllowlist.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(DnsAllowlist);
+export default withTranslation()(DnsAllowlist);

client/src/components/Filters/DnsBlocklist.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
@@ -122,4 +122,4 @@ DnsBlocklist.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(DnsBlocklist);
+export default withTranslation()(DnsBlocklist);

client/src/components/Filters/Examples.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
 const Examples = () => (
     <Fragment>
@@ -51,4 +51,4 @@ const Examples = () => (
     </Fragment>
 );
 
-export default withNamespaces()(Examples);
+export default withTranslation()(Examples);

client/src/components/Filters/Form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField, required, isValidPath } from '../../helpers/form';
@@ -28,7 +28,7 @@ const Form = (props) => {
                         className="form-control"
                         placeholder={t('enter_name_hint')}
                         validate={[required]}
-                        normalizeOnBlur={data => data.trim()}
+                        normalizeOnBlur={(data) => data.trim()}
                     />
                 </div>
                 <div className="form__group">
@@ -40,15 +40,12 @@ const Form = (props) => {
                         className="form-control"
                         placeholder={t('enter_url_or_path_hint')}
                         validate={[required, isValidPath]}
-                        normalizeOnBlur={data => data.trim()}
+                        normalizeOnBlur={(data) => data.trim()}
                     />
                 </div>
                 <div className="form__description">
-                    {whitelist ? (
-                        <Trans>enter_valid_allowlist</Trans>
-                    ) : (
-                        <Trans>enter_valid_blocklist</Trans>
-                    )}
+                    {whitelist ? <Trans>enter_valid_allowlist</Trans>
+                        : <Trans>enter_valid_blocklist</Trans>}
                 </div>
             </div>
             <div className="modal-footer">
@@ -81,7 +78,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'filterForm',
     }),

client/src/components/Filters/Modal.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import { MODAL_TYPE } from '../../helpers/constants';
 import Form from './Form';
@@ -85,4 +85,4 @@ Modal.propTypes = {
     whitelist: PropTypes.bool,
 };
 
-export default withNamespaces()(Modal);
+export default withTranslation()(Modal);

client/src/components/Filters/Rewrites/Form.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderInputField, required, domain, answer } from '../../../helpers/form';
+import {
+    renderInputField, required, domain, answer,
+} from '../../../helpers/form';
 
 const Form = (props) => {
     const {
@@ -100,7 +102,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'rewritesForm',
         enableReinitialize: true,

client/src/components/Filters/Rewrites/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import Form from './Form';
@@ -49,4 +49,4 @@ Modal.propTypes = {
     processingDelete: PropTypes.bool.isRequired,
 };
 
-export default withNamespaces()(Modal);
+export default withTranslation()(Modal);

client/src/components/Filters/Rewrites/Table.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 class Table extends Component {
     cellWrap = ({ value }) => (
@@ -27,16 +27,15 @@ class Table extends Component {
             Header: this.props.t('actions_table_header'),
             accessor: 'actions',
             maxWidth: 100,
-            Cell: value => (
+            Cell: (value) => (
                 <div className="logs__row logs__row--center">
                     <button
                         type="button"
                         className="btn btn-icon btn-outline-secondary btn-sm"
-                        onClick={() =>
-                            this.props.handleDelete({
-                                answer: value.row.answer,
-                                domain: value.row.domain,
-                            })
+                        onClick={() => this.props.handleDelete({
+                            answer: value.row.answer,
+                            domain: value.row.domain,
+                        })
                         }
                         title={this.props.t('delete_table_action')}
                     >
@@ -84,4 +83,4 @@ Table.propTypes = {
     handleDelete: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Table);
+export default withTranslation()(Table);

client/src/components/Filters/Rewrites/index.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Table from './Table';
 import Modal from './Modal';
@@ -89,4 +89,4 @@ Rewrites.propTypes = {
     rewrites: PropTypes.object.isRequired,
 };
 
-export default withNamespaces()(Rewrites);
+export default withTranslation()(Rewrites);

client/src/components/Filters/Table.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import CellWrap from '../ui/CellWrap';
 import { MODAL_TYPE } from '../../helpers/constants';
 import { formatDetailedDateTime } from '../../helpers/helpers';
 import { isValidAbsolutePath } from '../../helpers/form';
 
 class Table extends Component {
-    getDateCell = row => CellWrap(row, formatDetailedDateTime);
+    getDateCell = (row) => CellWrap(row, formatDetailedDateTime);
 
     renderCheckbox = ({ original }) => {
         const { processingConfigFilter, toggleFilter } = this.props;
@@ -49,8 +49,8 @@ class Table extends Component {
             minWidth: 200,
             Cell: ({ value }) => (
                 <div className="logs__row logs__row--overflow">
-                    {isValidAbsolutePath(value) ? value :
-                        <a
+                    {isValidAbsolutePath(value) ? value
+                        : <a
                             href={value}
                             target="_blank"
                             rel="noopener noreferrer"
@@ -66,7 +66,7 @@ class Table extends Component {
             accessor: 'rulesCount',
             className: 'text-center',
             minWidth: 100,
-            Cell: props => props.value.toLocaleString(),
+            Cell: (props) => props.value.toLocaleString(),
         },
         {
             Header: <Trans>last_time_updated_table_header</Trans>,
@@ -91,11 +91,10 @@ class Table extends Component {
                             type="button"
                             className="btn btn-icon btn-outline-primary btn-sm mr-2"
                             title={t('edit_table_action')}
-                            onClick={() =>
-                                toggleFilteringModal({
-                                    type: MODAL_TYPE.EDIT,
-                                    url: value,
-                                })
+                            onClick={() => toggleFilteringModal({
+                                type: MODAL_TYPE.EDIT,
+                                url: value,
+                            })
                             }
                         >
                             <svg className="icons">
@@ -154,4 +153,4 @@ Table.propTypes = {
     whitelist: PropTypes.bool,
 };
 
-export default withNamespaces()(Table);
+export default withTranslation()(Table);

client/src/components/Header/Menu.js

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import enhanceWithClickOutside from 'react-click-outside';
 import classnames from 'classnames';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import { SETTINGS_URLS, FILTERS_URLS, MENU_URLS } from '../../helpers/constants';
 import Dropdown from '../ui/Dropdown';
@@ -51,7 +51,7 @@ class Menu extends Component {
 
     getActiveClassForDropdown = (URLS) => {
         const { pathname } = this.props.location;
-        const isActivePage = Object.values(URLS).some(item => item === pathname);
+        const isActivePage = Object.values(URLS).some((item) => item === pathname);
 
         return isActivePage ? 'active' : '';
     };
@@ -77,21 +77,20 @@ class Menu extends Component {
 
     getDropdown = ({
         label, order, URLS, icon, ITEMS,
-    }) =>
-        (
+    }) => (
             <Dropdown
                 label={this.props.t(label)}
                 baseClassName={`dropdown nav-item order-${order}`}
                 controlClassName={`nav-link ${this.getActiveClassForDropdown(URLS)}`}
                 icon={icon}>
-                {ITEMS.map(item => (
+                {ITEMS.map((item) => (
                     this.getNavLink({
                         ...item,
                         order,
                         className: 'dropdown-item',
                     })))}
             </Dropdown>
-        );
+    );
 
     render() {
         const menuClass = classnames({
@@ -102,7 +101,7 @@ class Menu extends Component {
             <Fragment>
                 <div className={menuClass}>
                     <ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap">
-                        {MENU_ITEMS.map(item => (
+                        {MENU_ITEMS.map((item) => (
                             <li
                                 className={`nav-item order-${item.order}`}
                                 key={item.text}
@@ -139,4 +138,4 @@ Menu.propTypes = {
     t: PropTypes.func,
 };
 
-export default withNamespaces()(enhanceWithClickOutside(Menu));
+export default withTranslation()(enhanceWithClickOutside(Menu));

client/src/components/Header/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Menu from './Menu';
 import logo from '../ui/svg/logo.svg';
@@ -14,7 +14,7 @@ class Header extends Component {
     };
 
     toggleMenuOpen = () => {
-        this.setState(prevState => ({ isMenuOpen: !prevState.isMenuOpen }));
+        this.setState((prevState) => ({ isMenuOpen: !prevState.isMenuOpen }));
     };
 
     closeMenu = () => {
@@ -59,8 +59,8 @@ class Header extends Component {
                         />
                         <div className="header__column">
                             <div className="header__right">
-                                {!dashboard.processingProfile && dashboard.name &&
-                                    <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                                {!dashboard.processingProfile && dashboard.name
+                                    && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
                                         <Trans>sign_out</Trans>
                                     </a>
                                 }
@@ -80,4 +80,4 @@ Header.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Header);
+export default withTranslation()(Header);

client/src/components/Logs/Filters/Form.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField } from '../../../helpers/form';
@@ -18,27 +18,40 @@ const renderFilterField = ({
     autoComplete,
     tooltip,
     meta: { touched, error },
-}) => (
-    <Fragment>
-        <div className="logs__input-wrap">
-            <input
-                {...input}
-                id={id}
-                placeholder={placeholder}
-                type={type}
-                className={className}
-                disabled={disabled}
-                autoComplete={autoComplete}
-            />
-            <span className="logs__notice">
+}) => <Fragment>
+    <div className="logs__input-wrap">
+        <input
+            {...input}
+            id={id}
+            placeholder={placeholder}
+            type={type}
+            className={className}
+            disabled={disabled}
+            autoComplete={autoComplete}
+        />
+        <span className="logs__notice">
                 <Tooltip text={tooltip} type='tooltip-custom--logs' />
             </span>
-            {!disabled &&
-                touched &&
-                (error && <span className="form__message form__message--error">{error}</span>)}
-        </div>
-    </Fragment>
-);
+        {!disabled
+        && touched
+        && (error && <span className="form__message form__message--error">{error}</span>)}
+    </div>
+</Fragment>;
+
+renderFilterField.propTypes = {
+    input: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+    type: PropTypes.string,
+    disabled: PropTypes.string,
+    autoComplete: PropTypes.string,
+    tooltip: PropTypes.string,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.object,
+    }).isRequired,
+};
 
 const Form = (props) => {
     const {
@@ -79,10 +92,10 @@ const Form = (props) => {
                         className="form-control custom-select"
                     >
                         <option value={RESPONSE_FILTER.ALL}>
-                            <Trans>show_all_filter_type</Trans>
+                            {t('show_all_filter_type')}
                         </option>
                         <option value={RESPONSE_FILTER.FILTERED}>
-                            <Trans>show_filtered_type</Trans>
+                            {t('show_filtered_type')}
                         </option>
                     </Field>
                 </div>
@@ -109,7 +122,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'logsFilterForm',
     }),

client/src/components/Logs/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import escapeRegExp from 'lodash/escapeRegExp';
 import endsWith from 'lodash/endsWith';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { HashLink as Link } from 'react-router-hash-link';
 
 import {
@@ -17,7 +17,9 @@ import {
     checkBlackList,
     checkBlockedService,
 } from '../../helpers/helpers';
-import { SERVICES, TABLE_DEFAULT_PAGE_SIZE, CUSTOM_FILTERING_RULES_ID, FILTERED } from '../../helpers/constants';
+import {
+    SERVICES, TABLE_DEFAULT_PAGE_SIZE, CUSTOM_FILTERING_RULES_ID, FILTERED,
+} from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import { formatClientCell } from '../../helpers/formatClientCell';
 
@@ -54,8 +56,8 @@ class Logs extends Component {
         window.location.reload();
     };
 
-    renderTooltip = (isFiltered, rule, filter, service) =>
-        isFiltered && <PopoverFiltered rule={rule} filter={filter} service={service} />;
+    renderTooltip = (isFiltered, rule, filter, service) => isFiltered
+        && <PopoverFiltered rule={rule} filter={filter} service={service} />;
 
     renderResponseList = (response, status) => {
         if (response.length > 0) {
@@ -116,7 +118,7 @@ class Logs extends Component {
         );
     }
 
-    getDateCell = row => CellWrap(
+    getDateCell = (row) => CellWrap(
         row,
         (isToday(row.value) ? formatTime : formatDateTime),
         formatDateTime,
@@ -134,7 +136,7 @@ class Logs extends Component {
         );
     };
 
-    normalizeResponse = response => (
+    normalizeResponse = (response) => (
         response.map((response) => {
             const { value, type, ttl } = response;
             return `${type}: ${value} (ttl=${ttl})`;
@@ -146,8 +148,8 @@ class Logs extends Component {
             return t('custom_filter_rules');
         }
 
-        const filter = filters.find(filter => filter.id === filterId)
-            || whitelistFilters.find(filter => filter.id === filterId);
+        const filter = filters.find((filter) => filter.id === filterId)
+            || whitelistFilters.find((filter) => filter.id === filterId);
         let filterName = '';
 
         if (filter) {
@@ -178,7 +180,7 @@ class Logs extends Component {
 
         const filterKey = reason.replace(FILTERED, '');
         const parsedFilteredReason = t('query_log_filtered', { filter: filterKey });
-        const currentService = SERVICES.find(service => service.id === original.serviceName);
+        const currentService = SERVICES.find((service) => service.id === original.serviceName);
         const serviceName = currentService && currentService.name;
         const filterName = this.getFilterName(filters, whitelistFilters, filterId, t);
 
@@ -378,11 +380,11 @@ class Logs extends Component {
                         return {
                             className: 'red',
                         };
-                    } else if (checkWhiteList(reason)) {
+                    } if (checkWhiteList(reason)) {
                         return {
                             className: 'green',
                         };
-                    } else if (checkRewrite(reason) || checkRewriteHosts(reason)) {
+                    } if (checkRewrite(reason) || checkRewriteHosts(reason)) {
                         return {
                             className: 'blue',
                         };
@@ -467,4 +469,4 @@ Logs.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Logs);
+export default withTranslation()(Logs);

client/src/components/Settings/Clients/AutoClients.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import ReactTable from 'react-table';
 
 import Card from '../../ui/Card';
@@ -38,7 +38,7 @@ class AutoClients extends Component {
         },
         {
             Header: this.props.t('requests_count'),
-            accessor: row => this.props.normalizedTopClients.auto[row.ip] || 0,
+            accessor: (row) => this.props.normalizedTopClients.auto[row.ip] || 0,
             sortMethod: (a, b) => b - a,
             id: 'statistics',
             minWidth: COLUMN_MIN_WIDTH,
@@ -101,4 +101,4 @@ AutoClients.propTypes = {
     normalizedTopClients: PropTypes.object.isRequired,
 };
 
-export default withNamespaces()(AutoClients);
+export default withTranslation()(AutoClients);

client/src/components/Settings/Clients/ClientsTable.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import ReactTable from 'react-table';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
@@ -25,7 +25,7 @@ class ClientsTable extends Component {
             if (values.blocked_services) {
                 config.blocked_services = Object
                     .keys(values.blocked_services)
-                    .filter(service => values.blocked_services[service]);
+                    .filter((service) => values.blocked_services[service]);
             }
 
             if (values.upstreams && typeof values.upstreams === 'string') {
@@ -35,7 +35,7 @@ class ClientsTable extends Component {
             }
 
             if (values.tags) {
-                config.tags = values.tags.map(tag => tag.value);
+                config.tags = values.tags.map((tag) => tag.value);
             } else {
                 config.tags = [];
             }
@@ -48,12 +48,12 @@ class ClientsTable extends Component {
         }
     };
 
-    getOptionsWithLabels = options => (
-        options.map(option => ({ value: option, label: option }))
+    getOptionsWithLabels = (options) => (
+        options.map((option) => ({ value: option, label: option }))
     );
 
     getClient = (name, clients) => {
-        const client = clients.find(item => name === item.name);
+        const client = clients.find((item) => name === item.name);
 
         if (client) {
             const {
@@ -93,7 +93,7 @@ class ClientsTable extends Component {
                 return (
                     <div className="logs__row logs__row--overflow">
                         <span className="logs__text">
-                            {value.map(address => (
+                            {value.map((address) => (
                                 <div key={address} title={address}>
                                     {address}
                                 </div>
@@ -141,7 +141,7 @@ class ClientsTable extends Component {
                 return (
                     <div className="logs__row logs__row--icons">
                         {value && value.length > 0
-                            ? value.map(service => (
+                            ? value.map((service) => (
                                 <svg
                                     className="service__icon service__icon--table"
                                     title={service}
@@ -187,7 +187,7 @@ class ClientsTable extends Component {
                 return (
                     <div className="logs__row logs__row--overflow">
                         <span className="logs__text">
-                            {value.map(tag => (
+                            {value.map((tag) => (
                                 <div key={tag} title={tag} className="small">
                                     {tag}
                                 </div>
@@ -200,7 +200,7 @@ class ClientsTable extends Component {
         {
             Header: this.props.t('requests_count'),
             id: 'statistics',
-            accessor: row => this.props.normalizedTopClients.configured[row.name] || 0,
+            accessor: (row) => this.props.normalizedTopClients.configured[row.name] || 0,
             sortMethod: (a, b) => b - a,
             minWidth: 120,
             Cell: CellWrap,
@@ -220,11 +220,10 @@ class ClientsTable extends Component {
                         <button
                             type="button"
                             className="btn btn-icon btn-outline-primary btn-sm mr-2"
-                            onClick={() =>
-                                toggleClientModal({
-                                    type: MODAL_TYPE.EDIT,
-                                    name: clientName,
-                                })
+                            onClick={() => toggleClientModal({
+                                type: MODAL_TYPE.EDIT,
+                                name: clientName,
+                            })
                             }
                             disabled={processingUpdating}
                             title={t('edit_table_action')}
@@ -337,4 +336,4 @@ ClientsTable.propTypes = {
     supportedTags: PropTypes.array.isRequired,
 };
 
-export default withNamespaces()(ClientsTable);
+export default withTranslation()(ClientsTable);

client/src/components/Settings/Clients/Form.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import {
+    Field, FieldArray, reduxForm, formValueSelector,
+} from 'redux-form';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import Select from 'react-select';
 
@@ -62,40 +64,39 @@ const validate = (values) => {
 };
 
 
-const renderFieldsWrapper = (placeholder, buttonTitle) =>
-    function cell(row) {
-        const {
-            fields,
-        } = row;
-        return (
-            <div className="form__group">
-                {fields.map((ip, index) => (
-                    <div key={index} className="mb-1">
-                        <Field
-                            name={ip}
-                            component={renderGroupField}
-                            type="text"
-                            className="form-control"
-                            placeholder={placeholder}
-                            isActionAvailable={index !== 0}
-                            removeField={() => fields.remove(index)}
-                            normalizeOnBlur={data => data.trim()}
-                        />
-                    </div>
-                ))}
-                <button
-                    type="button"
-                    className="btn btn-link btn-block btn-sm"
-                    onClick={() => fields.push()}
-                    title={buttonTitle}
-                >
-                    <svg className="icon icon--close">
-                        <use xlinkHref="#plus" />
-                    </svg>
-                </button>
-            </div>
-        );
-    };
+const renderFieldsWrapper = (placeholder, buttonTitle) => function cell(row) {
+    const {
+        fields,
+    } = row;
+    return (
+        <div className="form__group">
+            {fields.map((ip, index) => (
+                <div key={index} className="mb-1">
+                    <Field
+                        name={ip}
+                        component={renderGroupField}
+                        type="text"
+                        className="form-control"
+                        placeholder={placeholder}
+                        isActionAvailable={index !== 0}
+                        removeField={() => fields.remove(index)}
+                        normalizeOnBlur={(data) => data.trim()}
+                    />
+                </div>
+            ))}
+            <button
+                type="button"
+                className="btn btn-link btn-block btn-sm"
+                onClick={() => fields.push()}
+                title={buttonTitle}
+            >
+                <svg className="icon icon--close">
+                    <use xlinkHref="#plus" />
+                </svg>
+            </button>
+        </div>
+    );
+};
 
 // Should create function outside of component to prevent component re-renders
 const renderFields = renderFieldsWrapper(i18n.t('form_enter_id'), i18n.t('form_add_id'));
@@ -109,7 +110,7 @@ const renderMultiselect = (props) => {
             options={options}
             className="basic-multi-select"
             classNamePrefix="select"
-            onChange={value => input.onChange(value)}
+            onChange={(value) => input.onChange(value)}
             onBlur={() => input.onBlur(input.value)}
             placeholder={placeholder}
             blurInputOnSelect={false}
@@ -118,6 +119,12 @@ const renderMultiselect = (props) => {
     );
 };
 
+renderMultiselect.propTypes = {
+    input: PropTypes.object.isRequired,
+    placeholder: PropTypes.string,
+    options: PropTypes.object,
+};
+
 let Form = (props) => {
     const {
         t,
@@ -147,7 +154,7 @@ let Form = (props) => {
                             type="text"
                             className="form-control"
                             placeholder={t('form_client_name')}
-                            normalizeOnBlur={data => data.trim()}
+                            normalizeOnBlur={(data) => data.trim()}
                         />
                     </div>
 
@@ -159,7 +166,8 @@ let Form = (props) => {
                         </div>
                         <div className="form__desc mt-0 mb-2">
                             <Trans components={[
-                                <a href="https://github.com/AdguardTeam/AdGuardHome/wiki/Hosts-Blocklists#ctag" key="0">link</a>,
+                                <a href="https://github.com/AdguardTeam/AdGuardHome/wiki/Hosts-Blocklists#ctag"
+                                   key="0">link</a>,
                             ]}>
                                 tags_desc
                             </Trans>
@@ -201,7 +209,7 @@ let Form = (props) => {
 
                 <Tabs controlClass="form">
                     <div label="settings" title={props.t('main_settings')}>
-                        {settingsCheckboxes.map(setting => (
+                        {settingsCheckboxes.map((setting) => (
                             <div className="form__group" key={setting.name}>
                                 <Field
                                     name={setting.name}
@@ -249,7 +257,7 @@ let Form = (props) => {
                                 </div>
                             </div>
                             <div className="services">
-                                {SERVICES.map(service => (
+                                {SERVICES.map((service) => (
                                     <Field
                                         key={service.id}
                                         icon={`service_${service.id}`}
@@ -299,11 +307,11 @@ let Form = (props) => {
                         type="submit"
                         className="btn btn-success btn-standard"
                         disabled={
-                            submitting ||
-                            invalid ||
-                            pristine ||
-                            processingAdding ||
-                            processingUpdating
+                            submitting
+                            || invalid
+                            || pristine
+                            || processingAdding
+                            || processingUpdating
                         }
                     >
                         <Trans>save_btn</Trans>
@@ -342,7 +350,7 @@ Form = connect((state) => {
 })(Form);
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'clientForm',
         enableReinitialize: true,

client/src/components/Settings/Clients/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
@@ -81,4 +81,4 @@ Modal.propTypes = {
     tagsOptions: PropTypes.array.isRequired,
 };
 
-export default withNamespaces()(Modal);
+export default withTranslation()(Modal);

client/src/components/Settings/Clients/index.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
 import ClientsTable from './ClientsTable';
@@ -72,4 +72,4 @@ Clients.propTypes = {
     getStats: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Clients);
+export default withTranslation()(Clients);

client/src/components/Settings/Clients/whoisCell.js

@@ -29,15 +29,14 @@ const getFormattedWhois = (value, t) => {
     return '–';
 };
 
-const whoisCell = t =>
-    function cell(row) {
-        const { value } = row;
+const whoisCell = (t) => function cell(row) {
+    const { value } = row;
 
-        return (
+    return (
             <div className="logs__row logs__row--overflow">
                 <span className="logs__text logs__text--wrap">{getFormattedWhois(value, t)}</span>
             </div>
-        );
-    };
+    );
+};
 
 export default whoisCell;

client/src/components/Settings/Dhcp/Form.js

@@ -2,16 +2,18 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderInputField, required, ipv4, isPositive, toNumber } from '../../../helpers/form';
+import {
+    renderInputField, required, ipv4, isPositive, toNumber,
+} from '../../../helpers/form';
 
-const renderInterfaces = (interfaces => (
+const renderInterfaces = ((interfaces) => (
     Object.keys(interfaces).map((item) => {
         const option = interfaces[item];
         const { name } = option;
-        const onlyIPv6 = option.ip_addresses.every(ip => ip.includes(':'));
+        const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
         let interfaceIP = option.ip_addresses[0];
 
         if (!onlyIPv6) {
@@ -30,7 +32,7 @@ const renderInterfaces = (interfaces => (
     })
 ));
 
-const renderInterfaceValues = (interfaceValues => (
+const renderInterfaceValues = ((interfaceValues) => (
     <ul className="list-unstyled mt-1 mb-0">
         <li>
             <span className="interface__title">MTU: </span>
@@ -44,7 +46,7 @@ const renderInterfaceValues = (interfaceValues => (
             <span className="interface__title"><Trans>dhcp_ip_addresses</Trans>: </span>
             {
                 interfaceValues.ip_addresses
-                    .map(ip => <span key={ip} className="interface__ip">{ip}</span>)
+                    .map((ip) => <span key={ip} className="interface__ip">{ip}</span>)
             }
         </li>
     </ul>
@@ -62,7 +64,7 @@ const clearFields = (change, resetDhcp, t) => {
 
     // eslint-disable-next-line no-alert
     if (window.confirm(t('dhcp_reset'))) {
-        Object.keys(fields).forEach(field => change(field, fields[field]));
+        Object.keys(fields).forEach((field) => change(field, fields[field]));
         resetDhcp();
     }
 };
@@ -84,8 +86,8 @@ let Form = (props) => {
 
     return (
         <form onSubmit={handleSubmit}>
-            {!processingInterfaces && interfaces &&
-                <div className="row">
+            {!processingInterfaces && interfaces
+                && <div className="row">
                     <div className="col-sm-12 col-md-6">
                         <div className="form__group form__group--settings">
                             <label>{t('dhcp_interface_select')}</label>
@@ -102,10 +104,10 @@ let Form = (props) => {
                             </Field>
                         </div>
                     </div>
-                    {interfaceValue &&
-                        <div className="col-sm-12 col-md-6">
-                            {interfaces[interfaceValue] &&
-                                renderInterfaceValues(interfaces[interfaceValue])}
+                    {interfaceValue
+                        && <div className="col-sm-12 col-md-6">
+                            {interfaces[interfaceValue]
+                                && renderInterfaceValues(interfaces[interfaceValue])}
                         </div>
                     }
                 </div>
@@ -229,6 +231,6 @@ Form = connect((state) => {
 })(Form);
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({ form: 'dhcpForm' }),
 ])(Form);

client/src/components/Settings/Dhcp/Leases.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
 
 class Leases extends Component {
@@ -53,4 +53,4 @@ Leases.propTypes = {
     t: PropTypes.func,
 };
 
-export default withNamespaces()(Leases);
+export default withTranslation()(Leases);

client/src/components/Settings/Dhcp/StaticLeases/Form.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderInputField, ipv4, mac, required } from '../../../../helpers/form';
+import {
+    renderInputField, ipv4, mac, required,
+} from '../../../../helpers/form';
 
 const Form = (props) => {
     const {
@@ -91,6 +93,6 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({ form: 'leaseForm' }),
 ])(Form);

client/src/components/Settings/Dhcp/StaticLeases/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import Form from './Form';
@@ -46,4 +46,4 @@ Modal.propTypes = {
     processingAdding: PropTypes.bool.isRequired,
 };
 
-export default withNamespaces()(Modal);
+export default withTranslation()(Modal);

client/src/components/Settings/Dhcp/StaticLeases/index.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
 
 import Modal from './Modal';
@@ -70,8 +70,7 @@ class StaticLeases extends Component {
                                             className="btn btn-icon btn-outline-secondary btn-sm"
                                             title={t('delete_table_action')}
                                             disabled={processingDeleting}
-                                            onClick={() =>
-                                                this.handleDelete(ip, mac, hostname)
+                                            onClick={() => this.handleDelete(ip, mac, hostname)
                                             }
                                         >
                                             <svg className="icons">
@@ -112,4 +111,4 @@ StaticLeases.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(StaticLeases);
+export default withTranslation()(StaticLeases);

client/src/components/Settings/Dhcp/index.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
 import Form from './Form';
@@ -32,8 +32,8 @@ class Dhcp extends Component {
         const {
             config, check, processingDhcp, processingConfig,
         } = this.props.dhcp;
-        const otherDhcpFound =
-            check && check.otherServer && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
+        const otherDhcpFound = check && check.otherServer
+            && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
         const filledConfig = Object.keys(config).every((key) => {
             if (key === 'enabled' || key === 'icmp_timeout_msec') {
                 return true;
@@ -127,10 +127,10 @@ class Dhcp extends Component {
                     <hr className="mt-4 mb-4" />
                 </Fragment>
             );
-        } else if (
-            check.staticIP.static === DHCP_STATUS_RESPONSE.NO &&
-            check.staticIP.ip &&
-            interfaceName
+        } if (
+            check.staticIP.static === DHCP_STATUS_RESPONSE.NO
+            && check.staticIP.ip
+            && interfaceName
         ) {
             return (
                 <Fragment>
@@ -278,4 +278,4 @@ Dhcp.propTypes = {
     resetDhcp: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Dhcp);
+export default withTranslation()(Dhcp);

client/src/components/Settings/Dns/Access/Form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import { renderTextareaField } from '../../../../helpers/form';
 
@@ -82,4 +82,4 @@ Form.propTypes = {
     textarea: PropTypes.bool,
 };
 
-export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);
+export default flow([withTranslation(), reduxForm({ form: 'accessForm' })])(Form);

client/src/components/Settings/Dns/Access/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Form from './Form';
 import Card from '../../../ui/Card';
@@ -37,4 +37,4 @@ Access.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Access);
+export default withTranslation()(Access);

client/src/components/Settings/Dns/Config/Form.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import {
@@ -45,7 +45,7 @@ const customIps = [{
 }];
 
 const getFields = (processing, t) => Object.values(BLOCKING_MODES)
-    .map(mode => (
+    .map((mode) => (
         <Field
             key={mode}
             name="blocking_mode"
@@ -59,8 +59,7 @@ const getFields = (processing, t) => Object.values(BLOCKING_MODES)
 
 let Form = ({
     handleSubmit, submitting, invalid, processing, blockingMode, t,
-}) =>
-    <form onSubmit={handleSubmit}>
+}) => <form onSubmit={handleSubmit}>
         <div className="row">
             <div className="col-12 col-sm-6">
                 <div className="form__group form__group--settings">
@@ -82,8 +81,7 @@ let Form = ({
                     />
                 </div>
             </div>
-            {checkboxes.map(({ name, placeholder, subtitle }) =>
-                <div className="col-12" key={name}>
+            {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
                     <div className="form__group form__group--settings">
                         <Field
                             name={name}
@@ -102,7 +100,7 @@ let Form = ({
                     </label>
                     <div className="form__desc form__desc--top">
                         {Object.values(BLOCKING_MODES)
-                            .map(mode => (
+                            .map((mode) => (
                                 <li key={mode}>
                                     <Trans>{`blocking_mode_${mode}`}</Trans>
                                 </li>
@@ -167,7 +165,7 @@ Form = connect((state) => {
 })(Form);
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'blockingModeForm',
     }),

client/src/components/Settings/Dns/Config/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Card from '../../../ui/Card';
 import Form from './Form';
@@ -52,4 +52,4 @@ Config.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Config);
+export default withTranslation()(Config);

client/src/components/Settings/Dns/Upstream/Examples.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
-const Examples = props => (
+const Examples = (props) => (
     <div className="list leading-loose">
         <p>
             <Trans
@@ -128,4 +128,4 @@ Examples.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Examples);
+export default withTranslation()(Examples);

client/src/components/Settings/Dns/Upstream/Form.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import classnames from 'classnames';
 
@@ -107,11 +107,10 @@ let Form = (props) => {
                     <button
                         type="button"
                         className={testButtonClass}
-                        onClick={() =>
-                            testUpstream({
-                                upstream_dns,
-                                bootstrap_dns,
-                            })
+                        onClick={() => testUpstream({
+                            upstream_dns,
+                            bootstrap_dns,
+                        })
                         }
                         disabled={!upstream_dns || processingTestUpstream}
                     >
@@ -164,7 +163,7 @@ Form = connect((state) => {
 })(Form);
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'upstreamForm',
     }),

client/src/components/Settings/Dns/Upstream/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Form from './Form';
 import Card from '../../../ui/Card';
@@ -62,4 +62,4 @@ Upstream.propTypes = {
     setDnsConfig: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Upstream);
+export default withTranslation()(Upstream);

client/src/components/Settings/Dns/index.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Upstream from './Upstream';
 import Access from './Access';
@@ -30,9 +30,9 @@ class Dns extends Component {
         return (
             <Fragment>
                 <PageTitle title={t('dns_settings')} />
-                {isDataLoading ?
-                    <Loading /> :
-                    <Fragment>
+                {isDataLoading
+                    ? <Loading />
+                    : <Fragment>
                         <Upstream
                             processingTestUpstream={settings.processingTestUpstream}
                             testUpstream={testUpstream}
@@ -62,4 +62,4 @@ Dns.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Dns);
+export default withTranslation()(Dns);

client/src/components/Settings/Encryption/CertificateStatus.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import format from 'date-fns/format';
 
 import { EMPTY_DATE } from '../../../helpers/constants';
@@ -68,4 +68,4 @@ CertificateStatus.propTypes = {
     dnsNames: PropTypes.string,
 };
 
-export default withNamespaces()(CertificateStatus);
+export default withTranslation()(CertificateStatus);

client/src/components/Settings/Encryption/Form.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import {
@@ -45,7 +45,7 @@ const clearFields = (change, setTlsConfig, t) => {
     };
     // eslint-disable-next-line no-alert
     if (window.confirm(t('encryption_reset'))) {
-        Object.keys(fields).forEach(field => change(field, fields[field]));
+        Object.keys(fields).forEach((field) => change(field, fields[field]));
         setTlsConfig(fields);
     }
 };
@@ -80,14 +80,13 @@ let Form = (props) => {
         privateKeySource,
     } = props;
 
-    const isSavingDisabled =
-        invalid ||
-        submitting ||
-        processingConfig ||
-        processingValidate ||
-        !valid_key ||
-        !valid_cert ||
-        !valid_pair;
+    const isSavingDisabled = invalid
+        || submitting
+        || processingConfig
+        || processingValidate
+        || !valid_key
+        || !valid_cert
+        || !valid_pair;
 
     return (
         <form onSubmit={handleSubmit}>
@@ -417,7 +416,7 @@ Form = connect((state) => {
 })(Form);
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'encryptionForm',
         validate,

client/src/components/Settings/Encryption/KeyStatus.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
 const KeyStatus = ({ validKey, keyType }) => (
     <Fragment>
@@ -28,4 +28,4 @@ KeyStatus.propTypes = {
     keyType: PropTypes.string.isRequired,
 };
 
-export default withNamespaces()(KeyStatus);
+export default withTranslation()(KeyStatus);

client/src/components/Settings/Encryption/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import debounce from 'lodash/debounce';
 
 import { DEBOUNCE_TIMEOUT, ENCRYPTION_SOURCE } from '../../../helpers/constants';
@@ -115,4 +115,4 @@ Encryption.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Encryption);
+export default withTranslation()(Encryption);

client/src/components/Settings/FiltersConfig/Form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderSelectField, toNumber } from '../../../helpers/form';
@@ -10,7 +10,7 @@ import { FILTERS_INTERVALS_HOURS } from '../../../helpers/constants';
 const getTitleForInterval = (interval, t) => {
     if (interval === 0) {
         return t('disabled');
-    } else if (interval === 72 || interval === 168) {
+    } if (interval === 72 || interval === 168) {
         return t('interval_days', { count: interval / 24 });
     }
 
@@ -26,7 +26,7 @@ const getIntervalSelect = (processing, t, handleChange, toNumber) => (
         normalize={toNumber}
         disabled={processing}
     >
-        {FILTERS_INTERVALS_HOURS.map(interval => (
+        {FILTERS_INTERVALS_HOURS.map((interval) => (
             <option value={interval} key={interval}>
                 {getTitleForInterval(interval, t)}
             </option>
@@ -81,7 +81,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'filterConfigForm',
     }),

client/src/components/Settings/FiltersConfig/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import debounce from 'lodash/debounce';
 
 import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants';
@@ -33,4 +33,4 @@ FiltersConfig.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(FiltersConfig);
+export default withTranslation()(FiltersConfig);

client/src/components/Settings/LogsConfig/Form.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
 import { QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
-const getIntervalFields = (processing, t, toNumber) =>
-    QUERY_LOG_INTERVALS_DAYS.map((interval) => {
-        const title =
-            interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
+const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
+    const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
-        return (
+    return (
             <Field
                 key={interval}
                 name="interval"
@@ -23,8 +21,8 @@ const getIntervalFields = (processing, t, toNumber) =>
                 normalize={toNumber}
                 disabled={processing}
             />
-        );
-    });
+    );
+});
 
 const Form = (props) => {
     const {
@@ -92,7 +90,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'logConfigForm',
     }),

client/src/components/Settings/LogsConfig/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Card from '../../ui/Card';
 import Form from './Form';
@@ -68,4 +68,4 @@ LogsConfig.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(LogsConfig);
+export default withTranslation()(LogsConfig);

client/src/components/Settings/Services/Form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { toggleAllServices } from '../../../helpers/helpers';
@@ -44,7 +44,7 @@ const Form = (props) => {
                     </div>
                 </div>
                 <div className="services">
-                    {SERVICES.map(service => (
+                    {SERVICES.map((service) => (
                         <Field
                             key={service.id}
                             icon={`service_${service.id}`}
@@ -82,7 +82,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'servicesForm',
         enableReinitialize: true,

client/src/components/Settings/Services/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Form from './Form';
 import Card from '../../ui/Card';
@@ -12,7 +12,7 @@ class Services extends Component {
         if (values && values.blocked_services) {
             const blocked_services = Object
                 .keys(values.blocked_services)
-                .filter(service => values.blocked_services[service]);
+                .filter((service) => values.blocked_services[service]);
             config = blocked_services;
         }
 
@@ -66,4 +66,4 @@ Services.propTypes = {
     setBlockedServices: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Services);
+export default withTranslation()(Services);

client/src/components/Settings/StatsConfig/Form.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderRadioField, toNumber } from '../../../helpers/form';
 import { STATS_INTERVALS_DAYS } from '../../../helpers/constants';
 
-const getIntervalFields = (processing, t, toNumber) =>
-    STATS_INTERVALS_DAYS.map((interval) => {
-        const title =
-            interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
+const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => {
+    const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
-        return (
+    return (
             <Field
                 key={interval}
                 name="interval"
@@ -23,8 +21,8 @@ const getIntervalFields = (processing, t, toNumber) =>
                 normalize={toNumber}
                 disabled={processing}
             />
-        );
-    });
+    );
+});
 
 const Form = (props) => {
     const {
@@ -77,7 +75,7 @@ Form.propTypes = {
 };
 
 export default flow([
-    withNamespaces(),
+    withTranslation(),
     reduxForm({
         form: 'statsConfigForm',
     }),

client/src/components/Settings/StatsConfig/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Card from '../../ui/Card';
 import Form from './Form';
@@ -52,4 +52,4 @@ StatsConfig.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(StatsConfig);
+export default withTranslation()(StatsConfig);

client/src/components/Settings/index.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import Services from './Services';
 import StatsConfig from './StatsConfig';
@@ -76,11 +76,10 @@ class Settings extends Component {
             t,
         } = this.props;
 
-        const isDataReady =
-            !settings.processing &&
-            !services.processing &&
-            !stats.processingGetConfig &&
-            !queryLogs.processingGetConfig;
+        const isDataReady = !settings.processing
+            && !services.processing
+            && !stats.processingGetConfig
+            && !queryLogs.processingGetConfig;
 
         return (
             <Fragment>
@@ -146,6 +145,33 @@ Settings.propTypes = {
     setFiltersConfig: PropTypes.func.isRequired,
     getFilteringStatus: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
+    getBlockedServices: PropTypes.func,
+    getLogsConfig: PropTypes.func,
+    setBlockedServices: PropTypes.func,
+    setLogsConfig: PropTypes.func,
+    clearLogs: PropTypes.func,
+    services: PropTypes.shape({
+        processing: PropTypes.bool,
+    }),
+    stats: PropTypes.shape({
+        processingGetConfig: PropTypes.bool,
+        interval: PropTypes.number,
+        processingSetConfig: PropTypes.bool,
+        processingReset: PropTypes.bool,
+    }),
+    queryLogs: PropTypes.shape({
+        enabled: PropTypes.bool,
+        interval: PropTypes.number,
+        anonymize_client_ip: PropTypes.bool,
+        processingSetConfig: PropTypes.bool,
+        processingClear: PropTypes.bool,
+        processingGetConfig: PropTypes.bool,
+    }),
+    filtering: PropTypes.shape({
+        interval: PropTypes.number,
+        enabled: PropTypes.bool,
+        processingSetConfig: PropTypes.bool,
+    }),
 };
 
-export default withNamespaces()(Settings);
+export default withTranslation()(Settings);

client/src/components/SetupGuide/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Guide from '../ui/Guide';
 import Card from '../ui/Card';
@@ -25,7 +25,7 @@ const SetupGuide = ({
                     <Trans>install_devices_address</Trans>:
                 </div>
                 <div className="mt-2 font-weight-bold">
-                    {dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
+                    {dnsAddresses.map((ip) => <li key={ip}>{ip}</li>)}
                 </div>
             </div>
             <Guide dnsAddresses={dnsAddresses} />
@@ -38,4 +38,4 @@ SetupGuide.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(SetupGuide);
+export default withTranslation()(SetupGuide);

client/src/components/Toasts/Toast.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 class Toast extends Component {
     componentDidMount() {
@@ -49,4 +49,4 @@ Toast.propTypes = {
     removeToast: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Toast);
+export default withTranslation()(Toast);

client/src/components/Toasts/index.js

@@ -7,21 +7,21 @@ import Toast from './Toast';
 
 import './Toast.css';
 
-const Toasts = props => (
-    <TransitionGroup className="toasts">
-        {props.toasts.notices && props.toasts.notices.map((toast) => {
-            const { id } = toast;
-            return (
-                <CSSTransition
-                    key={id}
-                    timeout={500}
-                    classNames="toast"
-                >
-                    <Toast removeToast={props.removeToast} {...toast} />
-                </CSSTransition>
-            );
-        })}
-    </TransitionGroup>
+const Toasts = (props) => (
+        <TransitionGroup className="toasts">
+            {props.toasts.notices && props.toasts.notices.map((toast) => {
+                const { id } = toast;
+                return (
+                    <CSSTransition
+                        key={id}
+                        timeout={500}
+                        classNames="toast"
+                    >
+                        <Toast removeToast={props.removeToast} {...toast} />
+                    </CSSTransition>
+                );
+            })}
+        </TransitionGroup>
 );
 
 Toasts.propTypes = {
@@ -39,4 +39,3 @@ export default connect(
     mapStateToProps,
     actionCreators,
 )(Toasts);
-

client/src/components/ui/Accordion.js

@@ -6,10 +6,10 @@ import './Accordion.css';
 class Accordion extends Component {
     state = {
         isOpen: false,
-    }
+    };
 
     handleClick = () => {
-        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+        this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
     };
 
     render() {

client/src/components/ui/Checkbox.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import './Checkbox.css';
 
@@ -38,4 +38,4 @@ Checkbox.propTypes = {
     t: PropTypes.func,
 };
 
-export default withNamespaces()(Checkbox);
+export default withTranslation()(Checkbox);

client/src/components/ui/Dropdown.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import enhanceWithClickOutside from 'react-click-outside';
 
 import './Dropdown.css';
@@ -12,7 +12,7 @@ class Dropdown extends Component {
     };
 
     toggleDropdown = () => {
-        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+        this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
     };
 
     hideDropdown = () => {
@@ -86,4 +86,4 @@ Dropdown.propTypes = {
     icon: PropTypes.string,
 };
 
-export default withNamespaces()(enhanceWithClickOutside(Dropdown));
+export default withTranslation()(enhanceWithClickOutside(Dropdown));

client/src/components/ui/EncryptionTopline.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import isAfter from 'date-fns/is_after';
 import addDays from 'date-fns/add_days';
 
@@ -23,7 +23,7 @@ const EncryptionTopline = (props) => {
                 </Trans>
             </Topline>
         );
-    } else if (isAboutExpire) {
+    } if (isAboutExpire) {
         return (
             <Topline type="warning">
                 <Trans components={[<a href="#encryption" key="0">link</a>]}>
@@ -40,4 +40,4 @@ EncryptionTopline.propTypes = {
     notAfter: PropTypes.string.isRequired,
 };
 
-export default withNamespaces()(EncryptionTopline);
+export default withTranslation()(EncryptionTopline);

client/src/components/ui/Footer.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
 import { LANGUAGES } from '../../helpers/twosky';
@@ -70,7 +70,7 @@ class Footer extends Component {
                                     value={i18n.language}
                                     onChange={this.changeLanguage}
                                 >
-                                    {Object.keys(LANGUAGES).map(lang => (
+                                    {Object.keys(LANGUAGES).map((lang) => (
                                         <option key={lang} value={lang}>
                                             {LANGUAGES[lang]}
                                         </option>
@@ -112,4 +112,4 @@ Footer.propTypes = {
     getVersion: PropTypes.func,
 };
 
-export default withNamespaces()(Footer);
+export default withTranslation()(Footer);

client/src/components/ui/Guide.js

@@ -1,15 +1,14 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
-import Tabs from '../ui/Tabs';
-import Icons from '../ui/Icons';
+import Tabs from './Tabs';
+import Icons from './Icons';
 
 const Guide = (props) => {
     const { dnsAddresses } = props;
-    const tlsAddress = (dnsAddresses && dnsAddresses.filter(item => item.includes('tls://'))) || '';
-    const httpsAddress =
-        (dnsAddresses && dnsAddresses.filter(item => item.includes('https://'))) || '';
+    const tlsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('tls://'))) || '';
+    const httpsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('https://'))) || '';
     const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;
 
     return (
@@ -373,4 +372,4 @@ Guide.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Guide);
+export default withTranslation()(Guide);

client/src/components/ui/Line.js

@@ -4,51 +4,49 @@ import { ResponsiveLine } from '@nivo/line';
 
 import './Line.css';
 
-const Line = ({ data, color }) => (
-    data &&
-        <ResponsiveLine
-            data={data}
-            margin={{
-                top: 15,
-                right: 0,
-                bottom: 1,
-                left: 20,
-            }}
-            minY="auto"
-            stacked={false}
-            curve='linear'
-            axisBottom={null}
-            axisLeft={null}
-            enableGridX={false}
-            enableGridY={false}
-            enableDots={false}
-            enableArea={true}
-            animate={false}
-            colorBy={() => (color)}
-            tooltip={slice => (
-                <div>
-                    {slice.data.map(d => (
-                        <div key={d.serie.id} className="line__tooltip">
+const Line = ({ data, color }) => data
+    && <ResponsiveLine
+        data={data}
+        margin={{
+            top: 15,
+            right: 0,
+            bottom: 1,
+            left: 20,
+        }}
+        minY="auto"
+        stacked={false}
+        curve='linear'
+        axisBottom={null}
+        axisLeft={null}
+        enableGridX={false}
+        enableGridY={false}
+        enableDots={false}
+        enableArea={true}
+        animate={false}
+        colorBy={() => (color)}
+        tooltip={(slice) => (
+            <div>
+                {slice.data.map((d) => (
+                    <div key={d.serie.id} className="line__tooltip">
                             <span className="line__tooltip-text">
                                 <strong>{d.data.y}</strong>
-                                <br/>
+                                <br />
                                 <small>{d.data.x}</small>
                             </span>
-                        </div>
-                    ))}
-                </div>
-            )}
-            theme={{
-                tooltip: {
-                    container: {
-                        padding: '0',
-                        background: '#333',
-                        borderRadius: '4px',
-                    },
+                    </div>
+                ))}
+            </div>
+        )}
+        theme={{
+            tooltip: {
+                container: {
+                    padding: '0',
+                    background: '#333',
+                    borderRadius: '4px',
                 },
-            }}
-        />
-);
+            },
+        }}
+    />;
 
 Line.propTypes = {
     data: PropTypes.array.isRequired,

client/src/components/ui/PageTitle.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './PageTitle.css';
 
-const PageTitle = props => (
+const PageTitle = (props) => (
     <div className="page-header">
         <h1 className="page-title">
             {props.title}

client/src/components/ui/Popover.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { getSourceData } from '../../helpers/trackers/trackers';
 import { captitalizeWords } from '../../helpers/helpers';
 
@@ -53,4 +53,4 @@ Popover.propTypes = {
     data: PropTypes.object.isRequired,
 };
 
-export default withNamespaces()(Popover);
+export default withTranslation()(Popover);

client/src/components/ui/PopoverFilter.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import './Popover.css';
 
@@ -49,4 +49,4 @@ PopoverFilter.propTypes = {
     service: PropTypes.string,
 };
 
-export default withNamespaces()(PopoverFilter);
+export default withTranslation()(PopoverFilter);

client/src/components/ui/Status.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 
-import Card from '../ui/Card';
+import Card from './Card';
 
 const Status = ({ message, buttonMessage, reloadPage }) => (
     <div className="status">
@@ -10,8 +10,8 @@ const Status = ({ message, buttonMessage, reloadPage }) => (
             <div className="h4 font-weight-light mb-4">
                 <Trans>{message}</Trans>
             </div>
-            {buttonMessage &&
-            <button className="btn btn-success" onClick={reloadPage}>
+            {buttonMessage
+            && <button className="btn btn-success" onClick={reloadPage}>
                 <Trans>{buttonMessage}</Trans>
             </button>}
         </Card>
@@ -24,4 +24,4 @@ Status.propTypes = {
     reloadPage: PropTypes.func,
 };
 
-export default withNamespaces()(Status);
+export default withTranslation()(Status);

client/src/components/ui/Tabler.css

@@ -187,7 +187,7 @@ a {
     color: #467fcf;
     text-decoration: none;
     background-color: transparent;
-    -webkit-text-decoration-skip: objects;
+    -webkittext-decoration-skip-ink: objects
 }
 
 a:hover {
@@ -9863,8 +9863,8 @@ body *:hover::-webkit-scrollbar-thumb {
 }
 
 a {
-    -webkit-text-decoration-skip: ink;
-    text-decoration-skip: ink;
+    -webkit-text-decoration-skip: auto;
+    text-decoration-skip-ink: auto
 }
 
 h1 a,
@@ -16243,4 +16243,4 @@ svg {
 .fe-trash-2:before {
     background-image: url('./svg/trash-2.svg');
 }
-/* stylelint-enable */
+/* stylelint-enable */

client/src/components/ui/Tooltip.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './Tooltip.css';
 
-const Tooltip = props => (
+const Tooltip = (props) => (
     <div data-tooltip={props.text} className={`tooltip-custom ${props.type || ''}`}></div>
 );
 

client/src/components/ui/Topline.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './Topline.css';
 
-const Topline = props => (
+const Topline = (props) => (
     <div className={`alert alert-${props.type} topline`}>
         <div className="container">
             {props.children}

client/src/components/ui/UpdateOverlay.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
 import './Overlay.css';
@@ -23,4 +23,4 @@ UpdateOverlay.propTypes = {
     processingUpdate: PropTypes.bool,
 };
 
-export default withNamespaces()(UpdateOverlay);
+export default withTranslation()(UpdateOverlay);

client/src/components/ui/UpdateTopline.js

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import Topline from './Topline';
 
-const UpdateTopline = props => (
+const UpdateTopline = (props) => (
     <Topline type="info">
         <Fragment>
             <Trans
@@ -17,8 +17,8 @@ const UpdateTopline = props => (
             >
                 update_announcement
             </Trans>
-            {props.canAutoUpdate &&
-                <button
+            {props.canAutoUpdate
+                && <button
                     type="button"
                     className="btn btn-sm btn-primary ml-3"
                     onClick={props.getUpdate}
@@ -39,4 +39,4 @@ UpdateTopline.propTypes = {
     processingUpdate: PropTypes.bool,
 };
 
-export default withNamespaces()(UpdateTopline);
+export default withTranslation()(UpdateTopline);

client/src/components/ui/Version.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 
 import './Version.css';
 
@@ -36,4 +36,4 @@ Version.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-export default withNamespaces()(Version);
+export default withTranslation()(Version);