+ 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/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);