+ 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/.babelrc

@@ -0,0 +1,16 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "modules": false
+            }
+        ],
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-proposal-object-rest-spread"
+    ]
+}

client/.gitattributes

@@ -0,0 +1 @@
+*.js text eol=lf

client/package.json

@@ -1,81 +1,89 @@
 {
-  "name": "dashboard",
+    "name": "dashboard",
-  "version": "0.1.0",
+    "version": "0.1.0",
-  "private": true,
+    "private": true,
-  "scripts": {
+    "scripts": {
-    "build-dev": "cross-env NODE_ENV=development webpack --config webpack.dev.js",
+        "build-dev": "cross-env BUILD_ENV=dev webpack --config webpack.dev.js",
-    "watch": "cross-env NODE_ENV=development webpack --config webpack.dev.js --watch",
+        "watch": "cross-env BUILD_ENV=dev webpack --config webpack.dev.js --watch",
-    "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
+        "build-prod": "cross-env BUILD_ENV=prod webpack --config webpack.prod.js",
-    "lint": "eslint client/"
+        "lint": "eslint src"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "@nivo/line": "^0.49.1",
+        "@nivo/line": "^0.49.1",
-    "axios": "^0.19.0",
+        "axios": "^0.19.2",
-    "classnames": "^2.2.6",
+        "classnames": "^2.2.6",
-    "date-fns": "^1.29.0",
+        "date-fns": "^1.29.0",
-    "i18next": "^12.0.0",
+        "i18next": "^19.4.4",
-    "i18next-browser-languagedetector": "^2.2.3",
+        "i18next-browser-languagedetector": "^4.2.0",
-    "lodash": "^4.17.15",
+        "lodash": "^4.17.15",
-    "nanoid": "^1.2.3",
+        "nanoid": "^3.1.9",
-    "prop-types": "^15.7.2",
+        "prop-types": "^15.7.2",
-    "react": "^16.4.0",
+        "react": "^16.13.1",
-    "react-click-outside": "^3.0.1",
+        "react-click-outside": "^3.0.1",
-    "react-dom": "^16.4.0",
+        "react-dom": "^16.13.1",
-    "react-i18next": "^8.2.0",
+        "react-i18next": "^11.4.0",
-    "react-modal": "^3.4.5",
+        "react-modal": "^3.11.2",
-    "react-redux": "^5.0.7",
+        "react-redux": "^7.2.0",
-    "react-redux-loading-bar": "^4.0.7",
+        "react-redux-loading-bar": "^4.6.0",
-    "react-router-dom": "^4.2.2",
+        "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^1.2.2",
+        "react-router-hash-link": "^1.2.2",
-    "react-select": "^3.0.8",
+        "react-select": "^3.1.0",
-    "react-table": "^6.10.3",
+        "react-table": "^6.11.4",
-    "react-transition-group": "^2.4.0",
+        "react-transition-group": "^4.4.1",
-    "redux": "^4.0.0",
+        "redux": "^4.0.5",
-    "redux-actions": "^2.4.0",
+        "redux-actions": "^2.6.5",
-    "redux-form": "^7.4.2",
+        "redux-form": "^8.3.5",
-    "redux-thunk": "^2.3.0",
+        "redux-thunk": "^2.3.0",
-    "url-polyfill": "^1.1.7"
+        "url-polyfill": "^1.1.9"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "autoprefixer": "^8.6.3",
+        "@babel/core": "^7.9.6",
-    "babel-core": "6.26.0",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "babel-eslint": "^8.2.3",
+        "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
-    "babel-loader": "7.1.2",
+        "@babel/plugin-transform-runtime": "^7.9.6",
-    "babel-plugin-transform-runtime": "^6.23.0",
+        "@babel/preset-env": "^7.9.6",
-    "babel-preset-env": "^1.7.0",
+        "@babel/preset-react": "^7.9.4",
-    "babel-preset-react": "^6.24.1",
+        "autoprefixer": "^9.8.0",
-    "babel-preset-stage-2": "^6.24.1",
+        "babel-eslint": "^10.1.0",
-    "babel-runtime": "6.26.0",
+        "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^0.1.19",
+        "clean-webpack-plugin": "^3.0.0",
-    "compression-webpack-plugin": "^1.1.11",
+        "copy-webpack-plugin": "^6.0.1",
-    "copy-webpack-plugin": "^4.6.0",
+        "cross-env": "^7.0.2",
-    "cross-env": "^7.0.2",
+        "css-loader": "^3.5.3",
-    "css-loader": "^2.1.1",
+        "eslint": "^6.8.0",
-    "eslint": "^4.19.1",
+        "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-airbnb-base": "^12.1.0",
+        "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-config-react-app": "^2.1.0",
+        "eslint-loader": "^4.0.2",
-    "eslint-import-resolver-webpack": "^0.12.1",
+        "eslint-plugin-import": "^2.20.2",
-    "eslint-loader": "1.9.0",
+        "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-import": "^2.12.0",
+        "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
+        "eslint-plugin-react-hooks": "^2.5.0",
-    "eslint-plugin-react": "^7.9.1",
+        "file-loader": "6.0.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+        "html-webpack-plugin": "^4.3.0",
-    "file-loader": "1.1.5",
+        "mini-css-extract-plugin": "^0.9.0",
-    "html-webpack-plugin": "^3.2.0",
+        "path": "^0.12.7",
-    "postcss-flexbugs-fixes": "3.2.0",
+        "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-import": "^11.1.0",
+        "postcss-loader": "^3.0.0",
-    "postcss-loader": "^2.1.5",
+        "style-loader": "^1.2.1",
-    "postcss-mixins": "^6.2.0",
+        "stylelint": "^13.5.0",
-    "postcss-preset-env": "^5.1.0",
+        "stylelint-webpack-plugin": "2.0.0",
-    "postcss-svg": "^2.4.0",
+        "url-loader": "^4.1.0",
-    "style-loader": "^0.21.0",
+        "webpack": "^4.43.0",
-    "stylelint": "^9.10.1",
+        "webpack-cli": "^3.3.11",
-    "stylelint-webpack-plugin": "0.10.4",
+        "webpack-dev-server": "^3.11.0",
-    "svg-url-loader": "^2.3.2",
+        "webpack-merge": "^4.2.2"
-    "uglifyjs-webpack-plugin": "^1.2.7",
+    },
-    "url-loader": "^1.0.1",
+    "browserslist": {
-    "webpack": "3.8.1",
+        "development": [
-    "webpack-dev-server": "^3.1.14",
+            "last 1 chrome version",
-    "webpack-merge": "^4.1.3"
+            "last 1 firefox version",
-  }
+            "last 1 safari version"
+        ],
+        "production": [
+            ">1%",
+            "last 4 versions",
+            "Firefox ESR",
+            "not ie < 9"
+        ]
+    }
 }

client/src/actions/access.js

@@ -1,10 +1,10 @@
 import { createAction } from 'redux-actions';
-import { t } from 'i18next';
+import i18next from 'i18next';
 
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
 import { normalizeTextarea } from '../helpers/helpers';
 import { ACTION } from '../helpers/constants';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const getAccessListRequest = createAction('GET_ACCESS_LIST_REQUEST');
 export const getAccessListFailure = createAction('GET_ACCESS_LIST_FAILURE');
@@ -25,7 +25,7 @@ export const setAccessListRequest = createAction('SET_ACCESS_LIST_REQUEST');
 export const setAccessListFailure = createAction('SET_ACCESS_LIST_FAILURE');
 export const setAccessListSuccess = createAction('SET_ACCESS_LIST_SUCCESS');
 
-export const setAccessList = config => async (dispatch) => {
+export const setAccessList = (config) => async (dispatch) => {
     dispatch(setAccessListRequest());
     try {
         const { allowed_clients, disallowed_clients, blocked_hosts } = config;
@@ -58,7 +58,7 @@ export const toggleClientBlock = (type, ip) => async (dispatch) => {
         let updatedDisallowedClients = disallowed_clients || [];
 
         if (type === ACTION.unblock && updatedDisallowedClients.includes(ip)) {
-            updatedDisallowedClients = updatedDisallowedClients.filter(client => client !== ip);
+            updatedDisallowedClients = updatedDisallowedClients.filter((client) => client !== ip);
         } else if (type === ACTION.block && !updatedDisallowedClients.includes(ip)) {
             updatedDisallowedClients.push(ip);
         }
@@ -73,9 +73,9 @@ export const toggleClientBlock = (type, ip) => async (dispatch) => {
         dispatch(toggleClientBlockSuccess(values));
 
         if (type === ACTION.unblock) {
-            dispatch(addSuccessToast(t('client_unblocked', { ip })));
+            dispatch(addSuccessToast(i18next.t('client_unblocked', { ip })));
         } else if (type === ACTION.block) {
-            dispatch(addSuccessToast(t('client_blocked', { ip })));
+            dispatch(addSuccessToast(i18next.t('client_blocked', { ip })));
         }
     } catch (error) {
         dispatch(addErrorToast({ error }));

client/src/actions/clients.js

@@ -1,7 +1,8 @@
 import { createAction } from 'redux-actions';
-import { t } from 'i18next';
+import i18next from 'i18next';
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast, getClients } from './index';
+import { getClients } from './index';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const toggleClientModal = createAction('TOGGLE_CLIENT_MODAL');
 
@@ -9,13 +10,13 @@ export const addClientRequest = createAction('ADD_CLIENT_REQUEST');
 export const addClientFailure = createAction('ADD_CLIENT_FAILURE');
 export const addClientSuccess = createAction('ADD_CLIENT_SUCCESS');
 
-export const addClient = config => async (dispatch) => {
+export const addClient = (config) => async (dispatch) => {
     dispatch(addClientRequest());
     try {
         await apiClient.addClient(config);
         dispatch(addClientSuccess());
         dispatch(toggleClientModal());
-        dispatch(addSuccessToast(t('client_added', { key: config.name })));
+        dispatch(addSuccessToast(i18next.t('client_added', { key: config.name })));
         dispatch(getClients());
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -27,12 +28,12 @@ export const deleteClientRequest = createAction('DELETE_CLIENT_REQUEST');
 export const deleteClientFailure = createAction('DELETE_CLIENT_FAILURE');
 export const deleteClientSuccess = createAction('DELETE_CLIENT_SUCCESS');
 
-export const deleteClient = config => async (dispatch) => {
+export const deleteClient = (config) => async (dispatch) => {
     dispatch(deleteClientRequest());
     try {
         await apiClient.deleteClient(config);
         dispatch(deleteClientSuccess());
-        dispatch(addSuccessToast(t('client_deleted', { key: config.name })));
+        dispatch(addSuccessToast(i18next.t('client_deleted', { key: config.name })));
         dispatch(getClients());
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -52,7 +53,7 @@ export const updateClient = (config, name) => async (dispatch) => {
         await apiClient.updateClient(data);
         dispatch(updateClientSuccess());
         dispatch(toggleClientModal());
-        dispatch(addSuccessToast(t('client_updated', { key: name })));
+        dispatch(addSuccessToast(i18next.t('client_updated', { key: name })));
         dispatch(getClients());
     } catch (error) {
         dispatch(addErrorToast({ error }));

client/src/actions/dnsConfig.js

@@ -1,8 +1,8 @@
 import { createAction } from 'redux-actions';
 
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
 import { normalizeTextarea } from '../helpers/helpers';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const getDnsConfigRequest = createAction('GET_DNS_CONFIG_REQUEST');
 export const getDnsConfigFailure = createAction('GET_DNS_CONFIG_FAILURE');
@@ -23,7 +23,7 @@ export const setDnsConfigRequest = createAction('SET_DNS_CONFIG_REQUEST');
 export const setDnsConfigFailure = createAction('SET_DNS_CONFIG_FAILURE');
 export const setDnsConfigSuccess = createAction('SET_DNS_CONFIG_SUCCESS');
 
-export const setDnsConfig = config => async (dispatch) => {
+export const setDnsConfig = (config) => async (dispatch) => {
     dispatch(setDnsConfigRequest());
     try {
         const data = { ...config };

client/src/actions/encryption.js

@@ -1,7 +1,7 @@
 import { createAction } from 'redux-actions';
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
 import { redirectToCurrentProtocol } from '../helpers/helpers';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const getTlsStatusRequest = createAction('GET_TLS_STATUS_REQUEST');
 export const getTlsStatusFailure = createAction('GET_TLS_STATUS_FAILURE');
@@ -25,7 +25,7 @@ export const setTlsConfigRequest = createAction('SET_TLS_CONFIG_REQUEST');
 export const setTlsConfigFailure = createAction('SET_TLS_CONFIG_FAILURE');
 export const setTlsConfigSuccess = createAction('SET_TLS_CONFIG_SUCCESS');
 
-export const setTlsConfig = config => async (dispatch, getState) => {
+export const setTlsConfig = (config) => async (dispatch, getState) => {
     dispatch(setTlsConfigRequest());
     try {
         const { httpPort } = getState().dashboard;
@@ -51,7 +51,7 @@ export const validateTlsConfigRequest = createAction('VALIDATE_TLS_CONFIG_REQUES
 export const validateTlsConfigFailure = createAction('VALIDATE_TLS_CONFIG_FAILURE');
 export const validateTlsConfigSuccess = createAction('VALIDATE_TLS_CONFIG_SUCCESS');
 
-export const validateTlsConfig = config => async (dispatch) => {
+export const validateTlsConfig = (config) => async (dispatch) => {
     dispatch(validateTlsConfigRequest());
     try {
         const values = { ...config };

client/src/actions/filtering.js

@@ -1,10 +1,10 @@
 import { createAction } from 'redux-actions';
 import { showLoading, hideLoading } from 'react-redux-loading-bar';
-import { t } from 'i18next';
+import i18next from 'i18next';
 
 import { normalizeFilteringStatus, normalizeRulesTextarea } from '../helpers/helpers';
-import { addErrorToast, addSuccessToast } from './index';
 import apiClient from '../api/Api';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const toggleFilteringModal = createAction('FILTERING_MODAL_TOGGLE');
 export const handleRulesChange = createAction('HANDLE_RULES_CHANGE');
@@ -28,7 +28,7 @@ export const setRulesRequest = createAction('SET_RULES_REQUEST');
 export const setRulesFailure = createAction('SET_RULES_FAILURE');
 export const setRulesSuccess = createAction('SET_RULES_SUCCESS');
 
-export const setRules = rules => async (dispatch) => {
+export const setRules = (rules) => async (dispatch) => {
     dispatch(setRulesRequest());
     try {
         const normalizedRules = normalizeRulesTextarea(rules);
@@ -113,7 +113,7 @@ export const refreshFiltersRequest = createAction('FILTERING_REFRESH_REQUEST');
 export const refreshFiltersFailure = createAction('FILTERING_REFRESH_FAILURE');
 export const refreshFiltersSuccess = createAction('FILTERING_REFRESH_SUCCESS');
 
-export const refreshFilters = config => async (dispatch) => {
+export const refreshFilters = (config) => async (dispatch) => {
     dispatch(refreshFiltersRequest());
     dispatch(showLoading());
     try {
@@ -122,7 +122,7 @@ export const refreshFilters = config => async (dispatch) => {
         dispatch(refreshFiltersSuccess());
 
         if (updated > 0) {
-            dispatch(addSuccessToast(t('list_updated', { count: updated })));
+            dispatch(addSuccessToast(i18next.t('list_updated', { count: updated })));
         } else {
             dispatch(addSuccessToast('all_lists_up_to_date_toast'));
         }
@@ -140,7 +140,7 @@ export const setFiltersConfigRequest = createAction('SET_FILTERS_CONFIG_REQUEST'
 export const setFiltersConfigFailure = createAction('SET_FILTERS_CONFIG_FAILURE');
 export const setFiltersConfigSuccess = createAction('SET_FILTERS_CONFIG_SUCCESS');
 
-export const setFiltersConfig = config => async (dispatch, getState) => {
+export const setFiltersConfig = (config) => async (dispatch, getState) => {
     dispatch(setFiltersConfigRequest());
     try {
         const { enabled } = config;
@@ -170,7 +170,7 @@ export const checkHostSuccess = createAction('CHECK_HOST_SUCCESS');
  * @param {string} host.name
  * @returns {undefined}
  */
-export const checkHost = host => async (dispatch) => {
+export const checkHost = (host) => async (dispatch) => {
     dispatch(checkHostRequest());
     try {
         const data = await apiClient.checkHost(host);

client/src/actions/index.js

@@ -1,16 +1,12 @@
 import { createAction } from 'redux-actions';
-import { t } from 'i18next';
+import i18next from 'i18next';
 import axios from 'axios';
 
-import { normalizeTextarea, sortClients, isVersionGreater } from '../helpers/helpers';
+import { isVersionGreater, normalizeTextarea, sortClients } from '../helpers/helpers';
-import { SETTINGS_NAMES, CHECK_TIMEOUT } from '../helpers/constants';
+import { CHECK_TIMEOUT, SETTINGS_NAMES } from '../helpers/constants';
 import { getTlsStatus } from './encryption';
 import apiClient from '../api/Api';
-
+import { addErrorToast, addNoticeToast, addSuccessToast } from './toasts';
-export const addErrorToast = createAction('ADD_ERROR_TOAST');
-export const addSuccessToast = createAction('ADD_SUCCESS_TOAST');
-export const addNoticeToast = createAction('ADD_NOTICE_TOAST');
-export const removeToast = createAction('REMOVE_TOAST');
 
 export const toggleSettingStatus = createAction('SETTING_STATUS_TOGGLE');
 export const showSettingsFailure = createAction('SETTINGS_FAILURE_SHOW');
@@ -62,7 +58,7 @@ export const initSettingsRequest = createAction('SETTINGS_INIT_REQUEST');
 export const initSettingsFailure = createAction('SETTINGS_INIT_FAILURE');
 export const initSettingsSuccess = createAction('SETTINGS_INIT_SUCCESS');
 
-export const initSettings = settingsList => async (dispatch) => {
+export const initSettings = (settingsList) => async (dispatch) => {
     dispatch(initSettingsRequest());
     try {
         const safebrowsingStatus = await apiClient.getSafebrowsingStatus();
@@ -89,7 +85,7 @@ export const toggleProtectionRequest = createAction('TOGGLE_PROTECTION_REQUEST')
 export const toggleProtectionFailure = createAction('TOGGLE_PROTECTION_FAILURE');
 export const toggleProtectionSuccess = createAction('TOGGLE_PROTECTION_SUCCESS');
 
-export const toggleProtection = status => async (dispatch) => {
+export const toggleProtection = (status) => async (dispatch) => {
     dispatch(toggleProtectionRequest());
     try {
         const successMessage = status ? 'disabled_protection' : 'enabled_protection';
@@ -139,7 +135,7 @@ const checkStatus = async (handleRequestSuccess, handleRequestError, attempts =
         handleRequestError();
     }
 
-    const rmTimeout = t => t && clearTimeout(t);
+    const rmTimeout = (t) => t && clearTimeout(t);
 
     try {
         const response = await axios.get('control/status');
@@ -270,7 +266,7 @@ export const testUpstreamRequest = createAction('TEST_UPSTREAM_REQUEST');
 export const testUpstreamFailure = createAction('TEST_UPSTREAM_FAILURE');
 export const testUpstreamSuccess = createAction('TEST_UPSTREAM_SUCCESS');
 
-export const testUpstream = config => async (dispatch) => {
+export const testUpstream = (config) => async (dispatch) => {
     dispatch(testUpstreamRequest());
     try {
         const values = { ...config };
@@ -281,12 +277,12 @@ export const testUpstream = config => async (dispatch) => {
         const testMessages = Object.keys(upstreamResponse).map((key) => {
             const message = upstreamResponse[key];
             if (message !== 'OK') {
-                dispatch(addErrorToast({ error: t('dns_test_not_ok_toast', { key }) }));
+                dispatch(addErrorToast({ error: i18next.t('dns_test_not_ok_toast', { key }) }));
             }
             return message;
         });
 
-        if (testMessages.every(message => message === 'OK')) {
+        if (testMessages.every((message) => message === 'OK')) {
             dispatch(addSuccessToast('dns_test_ok_toast'));
         }
 
@@ -301,7 +297,7 @@ export const changeLanguageRequest = createAction('CHANGE_LANGUAGE_REQUEST');
 export const changeLanguageFailure = createAction('CHANGE_LANGUAGE_FAILURE');
 export const changeLanguageSuccess = createAction('CHANGE_LANGUAGE_SUCCESS');
 
-export const changeLanguage = lang => async (dispatch) => {
+export const changeLanguage = (lang) => async (dispatch) => {
     dispatch(changeLanguageRequest());
     try {
         await apiClient.changeLanguage(lang);
@@ -361,7 +357,7 @@ export const findActiveDhcpRequest = createAction('FIND_ACTIVE_DHCP_REQUEST');
 export const findActiveDhcpSuccess = createAction('FIND_ACTIVE_DHCP_SUCCESS');
 export const findActiveDhcpFailure = createAction('FIND_ACTIVE_DHCP_FAILURE');
 
-export const findActiveDhcp = name => async (dispatch) => {
+export const findActiveDhcp = (name) => async (dispatch) => {
     dispatch(findActiveDhcpRequest());
     try {
         const activeDhcp = await apiClient.findActiveDhcp(name);
@@ -376,7 +372,7 @@ export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST');
 export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS');
 export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE');
 
-export const setDhcpConfig = values => async (dispatch, getState) => {
+export const setDhcpConfig = (values) => async (dispatch, getState) => {
     const { config } = getState().dhcp;
     const updatedConfig = { ...config, ...values };
     dispatch(setDhcpConfigRequest());
@@ -395,7 +391,7 @@ export const toggleDhcpRequest = createAction('TOGGLE_DHCP_REQUEST');
 export const toggleDhcpFailure = createAction('TOGGLE_DHCP_FAILURE');
 export const toggleDhcpSuccess = createAction('TOGGLE_DHCP_SUCCESS');
 
-export const toggleDhcp = values => async (dispatch) => {
+export const toggleDhcp = (values) => async (dispatch) => {
     dispatch(toggleDhcpRequest());
     let config = { ...values, enabled: false };
     let successMessage = 'disabled_dhcp';
@@ -438,13 +434,13 @@ export const addStaticLeaseRequest = createAction('ADD_STATIC_LEASE_REQUEST');
 export const addStaticLeaseFailure = createAction('ADD_STATIC_LEASE_FAILURE');
 export const addStaticLeaseSuccess = createAction('ADD_STATIC_LEASE_SUCCESS');
 
-export const addStaticLease = config => async (dispatch) => {
+export const addStaticLease = (config) => async (dispatch) => {
     dispatch(addStaticLeaseRequest());
     try {
         const name = config.hostname || config.ip;
         await apiClient.addStaticLease(config);
         dispatch(addStaticLeaseSuccess(config));
-        dispatch(addSuccessToast(t('dhcp_lease_added', { key: name })));
+        dispatch(addSuccessToast(i18next.t('dhcp_lease_added', { key: name })));
         dispatch(toggleLeaseModal());
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -456,15 +452,17 @@ export const removeStaticLeaseRequest = createAction('REMOVE_STATIC_LEASE_REQUES
 export const removeStaticLeaseFailure = createAction('REMOVE_STATIC_LEASE_FAILURE');
 export const removeStaticLeaseSuccess = createAction('REMOVE_STATIC_LEASE_SUCCESS');
 
-export const removeStaticLease = config => async (dispatch) => {
+export const removeStaticLease = (config) => async (dispatch) => {
     dispatch(removeStaticLeaseRequest());
     try {
         const name = config.hostname || config.ip;
         await apiClient.removeStaticLease(config);
         dispatch(removeStaticLeaseSuccess(config));
-        dispatch(addSuccessToast(t('dhcp_lease_deleted', { key: name })));
+        dispatch(addSuccessToast(i18next.t('dhcp_lease_deleted', { key: name })));
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(removeStaticLeaseFailure());
     }
 };
+
+export const removeToast = createAction('REMOVE_TOAST');

client/src/actions/install.js

@@ -1,6 +1,6 @@
 import { createAction } from 'redux-actions';
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const nextStep = createAction('NEXT_STEP');
 export const prevStep = createAction('PREV_STEP');
@@ -24,7 +24,7 @@ export const setAllSettingsRequest = createAction('SET_ALL_SETTINGS_REQUEST');
 export const setAllSettingsFailure = createAction('SET_ALL_SETTINGS_FAILURE');
 export const setAllSettingsSuccess = createAction('SET_ALL_SETTINGS_SUCCESS');
 
-export const setAllSettings = values => async (dispatch) => {
+export const setAllSettings = (values) => async (dispatch) => {
     dispatch(setAllSettingsRequest());
     try {
         const {
@@ -47,7 +47,7 @@ export const checkConfigRequest = createAction('CHECK_CONFIG_REQUEST');
 export const checkConfigFailure = createAction('CHECK_CONFIG_FAILURE');
 export const checkConfigSuccess = createAction('CHECK_CONFIG_SUCCESS');
 
-export const checkConfig = values => async (dispatch) => {
+export const checkConfig = (values) => async (dispatch) => {
     dispatch(checkConfigRequest());
     try {
         const check = await apiClient.checkConfig(values);

client/src/actions/login.js

@@ -1,13 +1,13 @@
 import { createAction } from 'redux-actions';
 
-import { addErrorToast } from './index';
 import apiClient from '../api/Api';
+import { addErrorToast } from './toasts';
 
 export const processLoginRequest = createAction('PROCESS_LOGIN_REQUEST');
 export const processLoginFailure = createAction('PROCESS_LOGIN_FAILURE');
 export const processLoginSuccess = createAction('PROCESS_LOGIN_SUCCESS');
 
-export const processLogin = values => async (dispatch) => {
+export const processLogin = (values) => async (dispatch) => {
     dispatch(processLoginRequest());
     try {
         await apiClient.login(values);

client/src/actions/queryLogs.js

@@ -1,9 +1,9 @@
 import { createAction } from 'redux-actions';
 
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
 import { normalizeLogs, getParamsForClientsSearch, addClientInfo } from '../helpers/helpers';
 import { TABLE_DEFAULT_PAGE_SIZE } from '../helpers/constants';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 const getLogsWithParams = async (config) => {
     const { older_than, filter, ...values } = config;
@@ -27,9 +27,9 @@ const checkFilteredLogs = async (data, filter, dispatch, total) => {
     const { logs, oldest } = data;
     const totalData = total || { logs };
 
-    const needToGetAdditionalLogs = (logs.length < TABLE_DEFAULT_PAGE_SIZE ||
+    const needToGetAdditionalLogs = (logs.length < TABLE_DEFAULT_PAGE_SIZE
-        totalData.logs.length < TABLE_DEFAULT_PAGE_SIZE) &&
+        || totalData.logs.length < TABLE_DEFAULT_PAGE_SIZE)
-        oldest !== '';
+        && oldest !== '';
 
     if (needToGetAdditionalLogs) {
         dispatch(getAdditionalLogsRequest());
@@ -61,7 +61,7 @@ export const getLogsRequest = createAction('GET_LOGS_REQUEST');
 export const getLogsFailure = createAction('GET_LOGS_FAILURE');
 export const getLogsSuccess = createAction('GET_LOGS_SUCCESS');
 
-export const getLogs = config => async (dispatch, getState) => {
+export const getLogs = (config) => async (dispatch, getState) => {
     dispatch(getLogsRequest());
     try {
         const { isFiltered, filter, page } = getState().queryLogs;
@@ -85,7 +85,7 @@ export const setLogsFilterRequest = createAction('SET_LOGS_FILTER_REQUEST');
 export const setLogsFilterFailure = createAction('SET_LOGS_FILTER_FAILURE');
 export const setLogsFilterSuccess = createAction('SET_LOGS_FILTER_SUCCESS');
 
-export const setLogsFilter = filter => async (dispatch) => {
+export const setLogsFilter = (filter) => async (dispatch) => {
     dispatch(setLogsFilterRequest());
     try {
         const data = await getLogsWithParams({ older_than: '', filter });
@@ -135,7 +135,7 @@ export const setLogsConfigRequest = createAction('SET_LOGS_CONFIG_REQUEST');
 export const setLogsConfigFailure = createAction('SET_LOGS_CONFIG_FAILURE');
 export const setLogsConfigSuccess = createAction('SET_LOGS_CONFIG_SUCCESS');
 
-export const setLogsConfig = config => async (dispatch) => {
+export const setLogsConfig = (config) => async (dispatch) => {
     dispatch(setLogsConfigRequest());
     try {
         await apiClient.setQueryLogConfig(config);

client/src/actions/rewrites.js

@@ -1,7 +1,7 @@
 import { createAction } from 'redux-actions';
-import { t } from 'i18next';
+import i18next from 'i18next';
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const toggleRewritesModal = createAction('TOGGLE_REWRITES_MODAL');
 
@@ -24,14 +24,14 @@ export const addRewriteRequest = createAction('ADD_REWRITE_REQUEST');
 export const addRewriteFailure = createAction('ADD_REWRITE_FAILURE');
 export const addRewriteSuccess = createAction('ADD_REWRITE_SUCCESS');
 
-export const addRewrite = config => async (dispatch) => {
+export const addRewrite = (config) => async (dispatch) => {
     dispatch(addRewriteRequest());
     try {
         await apiClient.addRewrite(config);
         dispatch(addRewriteSuccess(config));
         dispatch(toggleRewritesModal());
         dispatch(getRewritesList());
-        dispatch(addSuccessToast(t('rewrite_added', { key: config.domain })));
+        dispatch(addSuccessToast(i18next.t('rewrite_added', { key: config.domain })));
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(addRewriteFailure());
@@ -42,13 +42,13 @@ export const deleteRewriteRequest = createAction('DELETE_REWRITE_REQUEST');
 export const deleteRewriteFailure = createAction('DELETE_REWRITE_FAILURE');
 export const deleteRewriteSuccess = createAction('DELETE_REWRITE_SUCCESS');
 
-export const deleteRewrite = config => async (dispatch) => {
+export const deleteRewrite = (config) => async (dispatch) => {
     dispatch(deleteRewriteRequest());
     try {
         await apiClient.deleteRewrite(config);
         dispatch(deleteRewriteSuccess());
         dispatch(getRewritesList());
-        dispatch(addSuccessToast(t('rewrite_deleted', { key: config.domain })));
+        dispatch(addSuccessToast(i18next.t('rewrite_deleted', { key: config.domain })));
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(deleteRewriteFailure());

client/src/actions/services.js

@@ -1,6 +1,6 @@
 import { createAction } from 'redux-actions';
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const getBlockedServicesRequest = createAction('GET_BLOCKED_SERVICES_REQUEST');
 export const getBlockedServicesFailure = createAction('GET_BLOCKED_SERVICES_FAILURE');
@@ -21,7 +21,7 @@ export const setBlockedServicesRequest = createAction('SET_BLOCKED_SERVICES_REQU
 export const setBlockedServicesFailure = createAction('SET_BLOCKED_SERVICES_FAILURE');
 export const setBlockedServicesSuccess = createAction('SET_BLOCKED_SERVICES_SUCCESS');
 
-export const setBlockedServices = values => async (dispatch) => {
+export const setBlockedServices = (values) => async (dispatch) => {
     dispatch(setBlockedServicesRequest());
     try {
         await apiClient.setBlockedServices(values);

client/src/actions/stats.js

@@ -1,8 +1,10 @@
 import { createAction } from 'redux-actions';
 
 import apiClient from '../api/Api';
-import { addErrorToast, addSuccessToast } from './index';
+import {
-import { normalizeTopStats, secondsToMilliseconds, getParamsForClientsSearch, addClientInfo } from '../helpers/helpers';
+    normalizeTopStats, secondsToMilliseconds, getParamsForClientsSearch, addClientInfo,
+} from '../helpers/helpers';
+import { addErrorToast, addSuccessToast } from './toasts';
 
 export const getStatsConfigRequest = createAction('GET_STATS_CONFIG_REQUEST');
 export const getStatsConfigFailure = createAction('GET_STATS_CONFIG_FAILURE');
@@ -23,7 +25,7 @@ export const setStatsConfigRequest = createAction('SET_STATS_CONFIG_REQUEST');
 export const setStatsConfigFailure = createAction('SET_STATS_CONFIG_FAILURE');
 export const setStatsConfigSuccess = createAction('SET_STATS_CONFIG_SUCCESS');
 
-export const setStatsConfig = config => async (dispatch) => {
+export const setStatsConfig = (config) => async (dispatch) => {
     dispatch(setStatsConfigRequest());
     try {
         await apiClient.setStatsConfig(config);

client/src/actions/toasts.js

@@ -0,0 +1,5 @@
+import { createAction } from 'redux-actions';
+
+export const addErrorToast = createAction('ADD_ERROR_TOAST');
+export const addSuccessToast = createAction('ADD_SUCCESS_TOAST');
+export const addNoticeToast = createAction('ADD_NOTICE_TOAST');

client/src/api/Api.js

@@ -32,8 +32,11 @@ class Api {
 
     // Global methods
     GLOBAL_STATUS = { path: 'status', method: 'GET' };
+
     GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
+
     GLOBAL_VERSION = { path: 'version.json', method: 'POST' };
+
     GLOBAL_UPDATE = { path: 'update', method: 'POST' };
 
     getGlobalStatus() {
@@ -66,12 +69,19 @@ class Api {
 
     // Filtering
     FILTERING_STATUS = { path: 'filtering/status', method: 'GET' };
+
     FILTERING_ADD_FILTER = { path: 'filtering/add_url', method: 'POST' };
+
     FILTERING_REMOVE_FILTER = { path: 'filtering/remove_url', method: 'POST' };
+
     FILTERING_SET_RULES = { path: 'filtering/set_rules', method: 'POST' };
+
     FILTERING_REFRESH = { path: 'filtering/refresh', method: 'POST' };
+
     FILTERING_SET_URL = { path: 'filtering/set_url', method: 'POST' };
+
     FILTERING_CONFIG = { path: 'filtering/config', method: 'POST' };
+
     FILTERING_CHECK_HOST = { path: 'filtering/check_host', method: 'GET' };
 
     getFilteringStatus() {
@@ -144,7 +154,9 @@ class Api {
 
     // Parental
     PARENTAL_STATUS = { path: 'parental/status', method: 'GET' };
+
     PARENTAL_ENABLE = { path: 'parental/enable', method: 'POST' };
+
     PARENTAL_DISABLE = { path: 'parental/disable', method: 'POST' };
 
     getParentalStatus() {
@@ -169,7 +181,9 @@ class Api {
 
     // Safebrowsing
     SAFEBROWSING_STATUS = { path: 'safebrowsing/status', method: 'GET' };
+
     SAFEBROWSING_ENABLE = { path: 'safebrowsing/enable', method: 'POST' };
+
     SAFEBROWSING_DISABLE = { path: 'safebrowsing/disable', method: 'POST' };
 
     getSafebrowsingStatus() {
@@ -189,7 +203,9 @@ class Api {
 
     // Safesearch
     SAFESEARCH_STATUS = { path: 'safesearch/status', method: 'GET' };
+
     SAFESEARCH_ENABLE = { path: 'safesearch/enable', method: 'POST' };
+
     SAFESEARCH_DISABLE = { path: 'safesearch/disable', method: 'POST' };
 
     getSafesearchStatus() {
@@ -209,6 +225,7 @@ class Api {
 
     // Language
     CURRENT_LANGUAGE = { path: 'i18n/current_language', method: 'GET' };
+
     CHANGE_LANGUAGE = { path: 'i18n/change_language', method: 'POST' };
 
     getCurrentLanguage() {
@@ -227,11 +244,17 @@ class Api {
 
     // DHCP
     DHCP_STATUS = { path: 'dhcp/status', method: 'GET' };
+
     DHCP_SET_CONFIG = { path: 'dhcp/set_config', method: 'POST' };
+
     DHCP_FIND_ACTIVE = { path: 'dhcp/find_active_dhcp', method: 'POST' };
+
     DHCP_INTERFACES = { path: 'dhcp/interfaces', method: 'GET' };
+
     DHCP_ADD_STATIC_LEASE = { path: 'dhcp/add_static_lease', method: 'POST' };
+
     DHCP_REMOVE_STATIC_LEASE = { path: 'dhcp/remove_static_lease', method: 'POST' };
+
     DHCP_RESET = { path: 'dhcp/reset', method: 'POST' };
 
     getDhcpStatus() {
@@ -287,7 +310,9 @@ class Api {
 
     // Installation
     INSTALL_GET_ADDRESSES = { path: 'install/get_addresses', method: 'GET' };
+
     INSTALL_CONFIGURE = { path: 'install/configure', method: 'POST' };
+
     INSTALL_CHECK_CONFIG = { path: 'install/check_config', method: 'POST' };
 
     getDefaultAddresses() {
@@ -315,7 +340,9 @@ class Api {
 
     // DNS-over-HTTPS and DNS-over-TLS
     TLS_STATUS = { path: 'tls/status', method: 'GET' };
+
     TLS_CONFIG = { path: 'tls/configure', method: 'POST' };
+
     TLS_VALIDATE = { path: 'tls/validate', method: 'POST' };
 
     getTlsStatus() {
@@ -343,9 +370,13 @@ class Api {
 
     // Per-client settings
     GET_CLIENTS = { path: 'clients', method: 'GET' };
+
     FIND_CLIENTS = { path: 'clients/find', method: 'GET' };
+
     ADD_CLIENT = { path: 'clients/add', method: 'POST' };
+
     DELETE_CLIENT = { path: 'clients/delete', method: 'POST' };
+
     UPDATE_CLIENT = { path: 'clients/update', method: 'POST' };
 
     getClients() {
@@ -388,6 +419,7 @@ class Api {
 
     // DNS access settings
     ACCESS_LIST = { path: 'access/list', method: 'GET' };
+
     ACCESS_SET = { path: 'access/set', method: 'POST' };
 
     getAccessList() {
@@ -406,7 +438,9 @@ class Api {
 
     // DNS rewrites
     REWRITES_LIST = { path: 'rewrite/list', method: 'GET' };
+
     REWRITE_ADD = { path: 'rewrite/add', method: 'POST' };
+
     REWRITE_DELETE = { path: 'rewrite/delete', method: 'POST' };
 
     getRewritesList() {
@@ -434,6 +468,7 @@ class Api {
 
     // Blocked services
     BLOCKED_SERVICES_LIST = { path: 'blocked_services/list', method: 'GET' };
+
     BLOCKED_SERVICES_SET = { path: 'blocked_services/set', method: 'POST' };
 
     getBlockedServices() {
@@ -452,8 +487,11 @@ class Api {
 
     // Settings for statistics
     GET_STATS = { path: 'stats', method: 'GET' };
+
     STATS_INFO = { path: 'stats_info', method: 'GET' };
+
     STATS_CONFIG = { path: 'stats_config', method: 'POST' };
+
     STATS_RESET = { path: 'stats_reset', method: 'POST' };
 
     getStats() {
@@ -482,8 +520,11 @@ class Api {
 
     // Query log
     GET_QUERY_LOG = { path: 'querylog', method: 'GET' };
+
     QUERY_LOG_CONFIG = { path: 'querylog_config', method: 'POST' };
+
     QUERY_LOG_INFO = { path: 'querylog_info', method: 'GET' };
+
     QUERY_LOG_CLEAR = { path: 'querylog_clear', method: 'POST' };
 
     getQueryLog(params) {
@@ -533,6 +574,7 @@ class Api {
 
     // DNS config
     GET_DNS_CONFIG = { path: 'dns_info', method: 'GET' };
+
     SET_DNS_CONFIG = { path: 'dns_config', method: 'POST' };
 
     getDnsConfig() {

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 =>
+const CountCell = (totalBlocked) => function cell(row) {
-    function cell(row) {
+    const { value } = row;
-        const { value } = row;
+    const percent = getPercent(totalBlocked, value);
-        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 =>
+const countCell = (dnsQueries) => function cell(row) {
-    function cell(row) {
+    const { value } = row;
-        const { value } = row;
+    const percent = getPercent(dnsQueries, value);
-        const percent = getPercent(dnsQueries, value);
+    const percentColor = getClientsPercentColor(percent);
-        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) =>
+const clientCell = (t, toggleClientStatus, processing, disallowedClients) => function cell(row) {
-    function cell(row) {
+    const { value } = row;
-        const { value } = row;
+    const blocked = isBlockedClient(disallowedClients, value);
-        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) =>
+                    sortMethod: (a, b) => parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
-                        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 =
+    const tooltipTitle = interval === 1
-        interval === 1
+        ? t('number_of_dns_query_24_hours')
-            ? t('number_of_dns_query_24_hours')
+        : t('number_of_dns_query_days', { count: interval });
-            : 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 =>
+const countCell = (dnsQueries) => function cell(row) {
-    function cell(row) {
+    const { value } = row;
-        const { value } = row;
+    const percent = getPercent(dnsQueries, value);
-        const percent = getPercent(dnsQueries, value);
+    const percentColor = getQueriedPercentColor(percent);
-        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 =
+        const subtitle = stats.interval === 1
-            stats.interval === 1
+            ? t('for_last_24_hours')
-                ? t('for_last_24_hours')
+            : t('for_last_days', { count: stats.interval });
-                : 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)
+    const filter = filters.find((filter) => filter.id === id)
-        || whitelistFilters.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 ? (
+                    {whitelist ? <Trans>enter_valid_allowlist</Trans>
-                        <Trans>enter_valid_allowlist</Trans>
+                        : <Trans>enter_valid_blocklist</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={() =>
+                        onClick={() => this.props.handleDelete({
-                            this.props.handleDelete({
+                            answer: value.row.answer,
-                                answer: value.row.answer,
+                            domain: value.row.domain,
-                                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 :
+                    {isValidAbsolutePath(value) ? value
-                        <a
+                        : <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={() =>
+                            onClick={() => toggleFilteringModal({
-                                toggleFilteringModal({
+                                type: MODAL_TYPE.EDIT,
-                                    type: MODAL_TYPE.EDIT,
+                                url: value,
-                                    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 &&
+                                {!dashboard.processingProfile && dashboard.name
-                                    <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                                    && <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>
-    <Fragment>
+    <div className="logs__input-wrap">
-        <div className="logs__input-wrap">
+        <input
-            <input
+            {...input}
-                {...input}
+            id={id}
-                id={id}
+            placeholder={placeholder}
-                placeholder={placeholder}
+            type={type}
-                type={type}
+            className={className}
-                className={className}
+            disabled={disabled}
-                disabled={disabled}
+            autoComplete={autoComplete}
-                autoComplete={autoComplete}
+        />
-            />
+        <span className="logs__notice">
-            <span className="logs__notice">
                 <Tooltip text={tooltip} type='tooltip-custom--logs' />
             </span>
-            {!disabled &&
+        {!disabled
-                touched &&
+        && touched
-                (error && <span className="form__message form__message--error">{error}</span>)}
+        && (error && <span className="form__message form__message--error">{error}</span>)}
-        </div>
+    </div>
-    </Fragment>
+</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) =>
+    renderTooltip = (isFiltered, rule, filter, service) => isFiltered
-        isFiltered && <PopoverFiltered rule={rule} filter={filter} service={service} />;
+        && <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)
+        const filter = filters.find((filter) => filter.id === filterId)
-            || whitelistFilters.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 => (
+    getOptionsWithLabels = (options) => (
-        options.map(option => ({ value: option, label: option }))
+        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={() =>
+                            onClick={() => toggleClientModal({
-                                toggleClientModal({
+                                type: MODAL_TYPE.EDIT,
-                                    type: MODAL_TYPE.EDIT,
+                                name: clientName,
-                                    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 {
-import { Trans, withNamespaces } from 'react-i18next';
+    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) =>
+const renderFieldsWrapper = (placeholder, buttonTitle) => function cell(row) {
-    function cell(row) {
+    const {
-        const {
+        fields,
-            fields,
+    } = row;
-        } = row;
+    return (
-        return (
+        <div className="form__group">
-            <div className="form__group">
+            {fields.map((ip, index) => (
-                {fields.map((ip, index) => (
+                <div key={index} className="mb-1">
-                    <div key={index} className="mb-1">
+                    <Field
-                        <Field
+                        name={ip}
-                            name={ip}
+                        component={renderGroupField}
-                            component={renderGroupField}
+                        type="text"
-                            type="text"
+                        className="form-control"
-                            className="form-control"
+                        placeholder={placeholder}
-                            placeholder={placeholder}
+                        isActionAvailable={index !== 0}
-                            isActionAvailable={index !== 0}
+                        removeField={() => fields.remove(index)}
-                            removeField={() => fields.remove(index)}
+                        normalizeOnBlur={(data) => data.trim()}
-                            normalizeOnBlur={data => data.trim()}
+                    />
-                        />
+                </div>
-                    </div>
+            ))}
-                ))}
+            <button
-                <button
+                type="button"
-                    type="button"
+                className="btn btn-link btn-block btn-sm"
-                    className="btn btn-link btn-block btn-sm"
+                onClick={() => fields.push()}
-                    onClick={() => fields.push()}
+                title={buttonTitle}
-                    title={buttonTitle}
+            >
-                >
+                <svg className="icon icon--close">
-                    <svg className="icon icon--close">
+                    <use xlinkHref="#plus" />
-                        <use xlinkHref="#plus" />
+                </svg>
-                    </svg>
+            </button>
-                </button>
+        </div>
-            </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 ||
+                            submitting
-                            invalid ||
+                            || invalid
-                            pristine ||
+                            || pristine
-                            processingAdding ||
+                            || processingAdding
-                            processingUpdating
+                            || 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 =>
+const whoisCell = (t) => function cell(row) {
-    function cell(row) {
+    const { value } = 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 &&
+            {!processingInterfaces && interfaces
-                <div className="row">
+                && <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 &&
+                    {interfaceValue
-                        <div className="col-sm-12 col-md-6">
+                        && <div className="col-sm-12 col-md-6">
-                            {interfaces[interfaceValue] &&
+                            {interfaces[interfaceValue]
-                                renderInterfaceValues(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={() =>
+                                            onClick={() => this.handleDelete(ip, mac, hostname)
-                                                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 =
+        const otherDhcpFound = check && check.otherServer
-            check && check.otherServer && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
+            && 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 (
+        } if (
-            check.staticIP.static === DHCP_STATUS_RESPONSE.NO &&
+            check.staticIP.static === DHCP_STATUS_RESPONSE.NO
-            check.staticIP.ip &&
+            && check.staticIP.ip
-            interfaceName
+            && 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 }) =>
+            {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
-                <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={() =>
+                        onClick={() => testUpstream({
-                            testUpstream({
+                            upstream_dns,
-                                upstream_dns,
+                            bootstrap_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 ?
+                {isDataLoading
-                    <Loading /> :
+                    ? <Loading />
-                    <Fragment>
+                    : <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 =
+    const isSavingDisabled = invalid
-        invalid ||
+        || submitting
-        submitting ||
+        || processingConfig
-        processingConfig ||
+        || processingValidate
-        processingValidate ||
+        || !valid_key
-        !valid_key ||
+        || !valid_cert
-        !valid_cert ||
+        || !valid_pair;
-        !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) =>
+const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
-    QUERY_LOG_INTERVALS_DAYS.map((interval) => {
+    const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: 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) =>
+const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => {
-    STATS_INTERVALS_DAYS.map((interval) => {
+    const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: 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 =
+        const isDataReady = !settings.processing
-            !settings.processing &&
+            && !services.processing
-            !services.processing &&
+            && !stats.processingGetConfig
-            !stats.processingGetConfig &&
+            && !queryLogs.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 => (
+const Toasts = (props) => (
-    <TransitionGroup className="toasts">
+        <TransitionGroup className="toasts">
-        {props.toasts.notices && props.toasts.notices.map((toast) => {
+            {props.toasts.notices && props.toasts.notices.map((toast) => {
-            const { id } = toast;
+                const { id } = toast;
-            return (
+                return (
-                <CSSTransition
+                    <CSSTransition
-                    key={id}
+                        key={id}
-                    timeout={500}
+                        timeout={500}
-                    classNames="toast"
+                        classNames="toast"
-                >
+                    >
-                    <Toast removeToast={props.removeToast} {...toast} />
+                        <Toast removeToast={props.removeToast} {...toast} />
-                </CSSTransition>
+                    </CSSTransition>
-            );
+                );
-        })}
+            })}
-    </TransitionGroup>
+        </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 Tabs from './Tabs';
-import Icons from '../ui/Icons';
+import Icons from './Icons';
 
 const Guide = (props) => {
     const { dnsAddresses } = props;
-    const tlsAddress = (dnsAddresses && dnsAddresses.filter(item => item.includes('tls://'))) || '';
+    const tlsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('tls://'))) || '';
-    const httpsAddress =
+    const httpsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('https://'))) || '';
-        (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 }) => (
+const Line = ({ data, color }) => data
-    data &&
+    && <ResponsiveLine
-        <ResponsiveLine
+        data={data}
-            data={data}
+        margin={{
-            margin={{
+            top: 15,
-                top: 15,
+            right: 0,
-                right: 0,
+            bottom: 1,
-                bottom: 1,
+            left: 20,
-                left: 20,
+        }}
-            }}
+        minY="auto"
-            minY="auto"
+        stacked={false}
-            stacked={false}
+        curve='linear'
-            curve='linear'
+        axisBottom={null}
-            axisBottom={null}
+        axisLeft={null}
-            axisLeft={null}
+        enableGridX={false}
-            enableGridX={false}
+        enableGridY={false}
-            enableGridY={false}
+        enableDots={false}
-            enableDots={false}
+        enableArea={true}
-            enableArea={true}
+        animate={false}
-            animate={false}
+        colorBy={() => (color)}
-            colorBy={() => (color)}
+        tooltip={(slice) => (
-            tooltip={slice => (
+            <div>
-                <div>
+                {slice.data.map((d) => (
-                    {slice.data.map(d => (
+                    <div key={d.serie.id} className="line__tooltip">
-                        <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>
-                    ))}
+                ))}
-                </div>
+            </div>
-            )}
+        )}
-            theme={{
+        theme={{
-                tooltip: {
+            tooltip: {
-                    container: {
+                container: {
-                        padding: '0',
+                    padding: '0',
-                        background: '#333',
+                    background: '#333',
-                        borderRadius: '4px',
+                    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 &&
+            {buttonMessage
-            <button className="btn btn-success" onClick={reloadPage}>
+            && <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;
+    -webkit-text-decoration-skip: auto;
-    text-decoration-skip: ink;
+    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 &&
+            {props.canAutoUpdate
-                <button
+                && <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);

client/src/configureStore.js

@@ -9,7 +9,7 @@ export default function configureStore(reducer, initialState) {
     /* eslint-disable no-underscore-dangle */
     const store = createStore(reducer, initialState, compose(
         applyMiddleware(...middlewares),
-        window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
+        window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f,
     ));
     /* eslint-enable */
     return store;

client/src/containers/Clients.js

@@ -1,7 +1,9 @@
 import { connect } from 'react-redux';
 import { getClients } from '../actions';
 import { getStats } from '../actions/stats';
-import { addClient, updateClient, deleteClient, toggleClientModal } from '../actions/clients';
+import {
+    addClient, updateClient, deleteClient, toggleClientModal,
+} from '../actions/clients';
 import Clients from '../components/Settings/Clients';
 
 const mapStateToProps = (state) => {