- client: Clear input field when switching from logs page

Close #1523

Squashed commit of the following:

commit 9ae9b0e480c2ec6bd835faf4caccacd8c1fdfe9f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 17:56:34 2020 +0300

    Setup babel and apply everywhere nullish coalescing and optional chaining operators

commit 0966063842a79078e1d61a54c271e18c9427b2b1
Merge: 42a54f2b 21dfb5ff
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 16:59:34 2020 +0300

    Merge branch 'master' into fix/1523

commit 42a54f2ba0d8f5f4e4c04f16abc507b5d9009035
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 13:30:25 2020 +0300

    Center mobile tooltip buttons

commit 9cdd501a863b596f1d903f8dd3c449ffbe4c1604
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 13:21:37 2020 +0300

    Add cross icon to clear input on click

commit 1308b93c42ffea2ffb7457c34aef96e5cdaccaf2
Merge: 265fec7c da546790
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jun 29 19:42:04 2020 +0300

    Merge branch 'master' of ssh://bit.adguard.com:7999/dns/adguard-home

commit 265fec7c72656b0c4738623cb470f1c14736230a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jun 29 19:41:37 2020 +0300

    - client: Clear input field when switching from logs page

client/babel.config.js

@@ -9,6 +9,8 @@ module.exports = (api) => {
             '@babel/plugin-proposal-class-properties',
             '@babel/plugin-transform-runtime',
             '@babel/plugin-proposal-object-rest-spread',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+            '@babel/plugin-proposal-optional-chaining',
         ],
     };
 };

client/package-lock.json

@@ -472,13 +472,21 @@
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.8.3",
+      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz",
-      "integrity": "sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==",
+      "integrity": "sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.4",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        }
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
@@ -513,13 +521,21 @@
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.9.0",
+      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz",
-      "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+      "integrity": "sha512-ZIhQIEeavTgouyMSdZRap4VPPHqJJ3NEs2cuHs5p0erH+iz6khB0qfgU8g7UuJkG88+fBMy23ZiU+nuHvekJeQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.4",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        }
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {

client/package.json

@@ -44,7 +44,9 @@
     "devDependencies": {
         "@babel/core": "^7.9.6",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
         "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.10.4",
         "@babel/plugin-transform-runtime": "^7.9.6",
         "@babel/preset-env": "^7.9.6",
         "@babel/preset-react": "^7.9.4",

client/src/actions/index.js

@@ -149,7 +149,7 @@ const checkStatus = async (handleRequestSuccess, handleRequestError, attempts =
     try {
         const response = await axios.get('control/status');
         rmTimeout(timeout);
-        if (response && response.status === 200) {
+        if (response?.status === 200) {
             handleRequestSuccess(response);
             if (response.data.running === false) {
                 timeout = setTimeout(
@@ -183,7 +183,7 @@ export const getUpdate = () => async (dispatch, getState) => {
     };
 
     const handleRequestSuccess = (response) => {
-        const responseVersion = response.data && response.data.version;
+        const responseVersion = response.data?.version;
 
         if (dnsVersion !== responseVersion) {
             dispatch(getUpdateSuccess());

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

@@ -17,7 +17,7 @@ const getInitialDataForServices = (initial) => (initial ? initial.reduce(
 const Services = () => {
     const [t] = useTranslation();
     const dispatch = useDispatch();
-    const services = useSelector((store) => store && store.services);
+    const services = useSelector((store) => store?.services);
 
     useEffect(() => {
         dispatch(getBlockedServices());

client/src/components/Logs/Cells/getClientCell.js

@@ -11,23 +11,20 @@ const getClientCell = ({
     row, t, isDetailed, toggleBlocking, autoClients, processingRules,
 }) => {
     const {
-        reason, client, domain, info: { name },
+        reason, client, domain, info: { name, whois_info },
     } = row.original;
 
     const autoClient = autoClients.find((autoClient) => autoClient.name === client);
-    const country = autoClient && autoClient.whois_info && autoClient.whois_info.country;
+    const source = autoClient?.source;
-    const city = autoClient && autoClient.whois_info && autoClient.whois_info.city;
-    const network = autoClient && autoClient.whois_info && autoClient.whois_info.orgname;
-    const source = autoClient && autoClient.source;
 
     const id = nanoid();
 
     const data = {
         address: client,
         name,
-        country,
+        country: whois_info?.country,
-        city,
+        city: whois_info?.city,
-        network,
+        network: whois_info?.orgname,
         source_label: source,
     };
 

client/src/components/Logs/Cells/getDomainCell.js

@@ -57,8 +57,8 @@ const getDomainCell = (props) => {
     const sourceData = getSourceData(tracker);
 
     const knownTrackerDataObj = {
-        name_table_header: tracker && tracker.name,
+        name_table_header: tracker?.name,
-        category_label: tracker && captitalizeWords(tracker.category),
+        category_label: hasTracker && captitalizeWords(tracker.category),
         source_label: sourceData
             && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
                   className="link--green">{sourceData.name}</a>,

client/src/components/Logs/Cells/getResponseCell.js

@@ -36,8 +36,7 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
     const { filters, whitelistFilters } = filtering;
     const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
 
-    const statusLabel = t((FILTERED_STATUS_TO_META_MAP[reason]
+    const statusLabel = t(FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
-        && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
     const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
     const filter = getFilterName(filters, whitelistFilters, filterId, t);
 

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

@@ -1,10 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { useTranslation } from 'react-i18next';
 import debounce from 'lodash/debounce';
-import { DEBOUNCE_FILTER_TIMEOUT, FORM_NAME, RESPONSE_FILTER } from '../../../helpers/constants';
+import { useDispatch } from 'react-redux';
+import classNames from 'classnames';
+import {
+    DEBOUNCE_FILTER_TIMEOUT,
+    DEFAULT_LOGS_FILTER,
+    FORM_NAME,
+    RESPONSE_FILTER,
+} from '../../../helpers/constants';
 import Tooltip from '../../ui/Tooltip';
+import { setLogsFilter } from '../../../actions/queryLogs';
 
 const renderFilterField = ({
     input,
@@ -16,8 +24,9 @@ const renderFilterField = ({
     autoComplete,
     tooltip,
     meta: { touched, error },
+    onClearInputClick,
 }) => <>
-    <div className="input-group-search">
+    <div className="input-group-search input-group-search__icon--magnifier">
         <svg className="icons icon--small icon--gray">
             <use xlinkHref="#magnifier" />
         </svg>
@@ -31,9 +40,15 @@ const renderFilterField = ({
         disabled={disabled}
         autoComplete={autoComplete}
         aria-label={placeholder} />
-    <span className="logs__notice">
+    <div
-                <Tooltip text={tooltip} type='tooltip-custom--logs' />
+        className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
-            </span>
+        <svg className="icons icon--smallest icon--gray" onClick={onClearInputClick}>
+            <use xlinkHref="#cross" />
+        </svg>
+    </div>
+    <span className="input-group-search input-group-search__icon--tooltip">
+        <Tooltip text={tooltip} type='tooltip-custom--logs' />
+    </span>
     {!disabled
     && touched
     && (error && <span className="form__message form__message--error">{error}</span>)}
@@ -42,6 +57,7 @@ const renderFilterField = ({
 renderFilterField.propTypes = {
     input: PropTypes.object.isRequired,
     id: PropTypes.string.isRequired,
+    onClearInputClick: PropTypes.func.isRequired,
     className: PropTypes.string,
     placeholder: PropTypes.string,
     type: PropTypes.string,
@@ -59,13 +75,29 @@ const Form = (props) => {
         className = '',
         responseStatusClass,
         submit,
+        reset,
+        setIsLoading,
     } = props;
 
-    const [t] = useTranslation();
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
 
     const debouncedSubmit = debounce(submit, DEBOUNCE_FILTER_TIMEOUT);
     const zeroDelaySubmit = () => setTimeout(submit, 0);
 
+    const clearInput = async () => {
+        await dispatch(setLogsFilter(DEFAULT_LOGS_FILTER));
+        await reset();
+    };
+
+    const onInputClear = async () => {
+        setIsLoading(true);
+        await clearInput();
+        setIsLoading(false);
+    };
+
+    useEffect(() => clearInput, []);
+
     return (
         <form className="d-flex flex-wrap form-control--container"
               onSubmit={(e) => {
@@ -79,16 +111,17 @@ const Form = (props) => {
                 name="search"
                 component={renderFilterField}
                 type="text"
-                className={`form-control--search form-control--transparent ${className}`}
+                className={classNames('form-control--search form-control--transparent', className)}
                 placeholder={t('domain_or_client')}
                 tooltip={t('query_log_strict_search')}
                 onChange={debouncedSubmit}
+                onClearInputClick={onInputClear}
             />
             <div className="field__select">
                 <Field
                     name="response_status"
                     component="select"
-                    className={`form-control custom-select custom-select--logs custom-select__arrow--left ml-small form-control--transparent ${responseStatusClass}`}
+                    className={classNames('form-control custom-select custom-select--logs custom-select__arrow--left ml-small form-control--transparent', responseStatusClass)}
                     onChange={zeroDelaySubmit}
                 >
                     {Object.values(RESPONSE_FILTER)
@@ -107,6 +140,8 @@ Form.propTypes = {
     className: PropTypes.string,
     responseStatusClass: PropTypes.string,
     submit: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    setIsLoading: PropTypes.func.isRequired,
 };
 
 export default reduxForm({

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

@@ -33,7 +33,8 @@ const Filters = ({ filter, refreshLogs, setIsLoading }) => {
                 responseStatusClass="d-sm-block"
                 initialValues={filter}
                 onSubmit={onSubmit}
-            />
+                setIsLoading={setIsLoading}
+        />
         </div>
     );
 };

client/src/components/Logs/Logs.css

@@ -199,17 +199,6 @@
     position: relative;
 }
 
-.logs__notice {
-    position: relative;
-    z-index: 1;
-    top: 0.5rem;
-    right: 2rem;
-    margin-top: 0.1875rem;
-    font-size: 0.75rem;
-    text-align: left;
-    color: var(--gray-a5);
-}
-
 .logs__whois {
     display: inline;
     font-size: 12px;
@@ -485,10 +474,22 @@
 .input-group-search {
     background-color: transparent;
     position: relative;
-    left: 2rem;
-    top: 0.4rem;
     width: 1.5rem;
     height: 1.5rem;
+    top: 0.4rem;
+}
+
+.input-group-search__icon--magnifier {
+    left: 2rem;
+}
+
+.input-group-search__icon--cross {
+    left: -4.5rem;
+    cursor: pointer;
+}
+
+.input-group-search__icon--tooltip {
+    left: -4rem;
 }
 
 .form-control--container {

client/src/components/Logs/Table.js

@@ -180,6 +180,7 @@ const Table = (props) => {
             minWidth: 123,
             maxHeight: 60,
             headerClassName: 'logs__text',
+            className: 'pb-0',
         },
     ];
 
@@ -279,20 +280,15 @@ const Table = (props) => {
 
                         const hasTracker = !!tracker;
 
-                        const autoClient = autoClients.find(
+                        const autoClient = autoClients
-                            (autoClient) => autoClient.name === client,
+                            .find((autoClient) => autoClient.name === client);
-                        );
 
-                        const country = autoClient && autoClient.whois_info
+                        const { whois_info } = info;
-                            && autoClient.whois_info.country;
+                        const country = whois_info?.country;
+                        const city = whois_info?.city;
+                        const network = whois_info?.orgname;
 
-                        const network = autoClient && autoClient.whois_info
+                        const source = autoClient?.source;
-                            && autoClient.whois_info.orgname;
-
-                        const city = autoClient && autoClient.whois_info
-                            && autoClient.whois_info.city;
-
-                        const source = autoClient && autoClient.source;
 
                         const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
                         const isFiltered = checkFiltered(reason);
@@ -302,8 +298,7 @@ const Table = (props) => {
                             toggleBlocking(buttonType, domain);
                         };
 
-                        const status = t((FILTERED_STATUS_TO_META_MAP[reason]
+                        const status = t(FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
-                            && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
                         const statusBlocked = <div className="bg--danger">{status}</div>;
 
                         const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
@@ -318,7 +313,7 @@ const Table = (props) => {
                             type_table_header: type,
                             protocol,
                             known_tracker: hasTracker && 'title',
-                            table_name: hasTracker && tracker.name,
+                            table_name: tracker?.name,
                             category_label: hasTracker && captitalizeWords(tracker.category),
                             tracker_source: hasTracker && sourceData
                                 && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
@@ -326,17 +321,17 @@ const Table = (props) => {
                             response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,
-                            response_table_header: response && response.join('\n'),
+                            response_table_header: response?.join('\n'),
                             client_details: 'title',
                             ip_address: client,
-                            name: info && info.name,
+                            name: info?.name,
                             country,
                             city,
                             network,
                             source_label: source,
                             validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
                             [buttonType]: <div onClick={onToggleBlock}
-                                               className="title--border bg--danger">{t(buttonType)}</div>,
+                                               className="title--border bg--danger text-center">{t(buttonType)}</div>,
                         };
 
                         const detailedDataBlocked = {
@@ -347,7 +342,7 @@ const Table = (props) => {
                             type_table_header: type,
                             protocol,
                             known_tracker: 'title',
-                            table_name: hasTracker && tracker.name,
+                            table_name: tracker?.name,
                             category_label: hasTracker && captitalizeWords(tracker.category),
                             source_label: hasTracker && sourceData
                                 && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
@@ -355,9 +350,9 @@ const Table = (props) => {
                             response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,
-                            response_table_header: response && response.join('\n'),
+                            response_table_header: response?.join('\n'),
                             [buttonType]: <div onClick={onToggleBlock}
-                                               className="title--border">{t(buttonType)}</div>,
+                                               className="title--border text-center">{t(buttonType)}</div>,
                         };
 
                         const detailedDataCurrent = isFiltered ? detailedDataBlocked : detailedData;

client/src/components/Logs/index.js

@@ -12,12 +12,12 @@ import Loading from '../ui/Loading';
 import Filters from './Filters';
 import Table from './Table';
 import Disabled from './Disabled';
-import './Logs.css';
 import { getFilteringStatus } from '../../actions/filtering';
 import { getClients } from '../../actions';
 import { getDnsConfig } from '../../actions/dnsConfig';
 import { getLogsConfig } from '../../actions/queryLogs';
 import { addSuccessToast } from '../../actions/toasts';
+import './Logs.css';
 
 const INITIAL_REQUEST = true;
 const INITIAL_REQUEST_DATA = ['', TABLE_FIRST_PAGE, INITIAL_REQUEST];

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

@@ -32,7 +32,7 @@ class Dhcp extends Component {
         const {
             config, check, processingDhcp, processingConfig,
         } = this.props.dhcp;
-        const otherDhcpFound = check && check.otherServer
+        const otherDhcpFound = check?.otherServer
             && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
         const filledConfig = Object.keys(config).every((key) => {
             if (key === 'enabled' || key === 'icmp_timeout_msec') {

client/src/components/Toasts/index.js

@@ -9,7 +9,7 @@ import './Toast.css';
 
 const Toasts = (props) => (
         <TransitionGroup className="toasts">
-            {props.toasts.notices && props.toasts.notices.map((toast) => {
+            {props.toasts.notices?.map((toast) => {
                 const { id } = toast;
                 return (
                     <CSSTransition

client/src/components/ui/Guide.js

@@ -120,7 +120,7 @@ const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph
     <strong><Trans>{title}</Trans></strong>
     <ul>{list.map(({ label, components }) => <li key={label}>
         <Trans
-            components={components && components.map((props) => {
+            components={components?.map((props) => {
                 if (React.isValidElement(props)) {
                     return props;
                 }
@@ -198,7 +198,7 @@ const getTabs = ({
         // eslint-disable-next-line react/display-name
         getTitle: () => <div label="dns_privacy" title={t('dns_privacy')}>
             <div className="tab__text">
-                {tlsAddress && tlsAddress.length > 0 && (
+                {tlsAddress?.length > 0 && (
                     <div className="tab__paragraph">
                         <Trans
                             values={{ address: tlsAddress[0] }}
@@ -211,7 +211,7 @@ const getTabs = ({
                         </Trans>
                     </div>
                 )}
-                {httpsAddress && httpsAddress.length > 0 && (
+                {httpsAddress?.length > 0 && (
                     <div className="tab__paragraph">
                         <Trans
                             values={{ address: httpsAddress[0] }}

client/src/components/ui/Icons.css

@@ -9,6 +9,11 @@
     height: 1.5rem;
 }
 
+.icon--smallest {
+    width: 1.2rem;
+    height: 1.2rem;
+}
+
 .icon--gray {
     color: var(--gray-a5);
 }

client/src/helpers/form.js

@@ -173,7 +173,7 @@ export const renderSelectField = ({
     </label>
     {!disabled
     && touched
-    && (error && <span className="form__message form__message--error">{error}</span>)}
+    && error && <span className="form__message form__message--error">{error}</span>}
 </Fragment>;
 
 renderSelectField.propTypes = {
@@ -232,7 +232,7 @@ renderServiceField.propTypes = {
 // https://redux-form.com/6.6.3/examples/fieldlevelvalidation/
 export const required = (value) => {
     const formattedValue = typeof value === 'string' ? value.trim() : value;
-    if (formattedValue || formattedValue === 0 || (formattedValue && formattedValue.length !== 0)) {
+    if (formattedValue || formattedValue === 0 || formattedValue?.length !== 0) {
         return undefined;
     }
     return <Trans>form_error_required</Trans>;

client/src/helpers/formatClientCell.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { normalizeWhois } from './helpers';
 import { WHOIS_ICONS } from './constants';
 
@@ -11,12 +11,12 @@ const getFormattedWhois = (whois, t) => {
                 return (
                     <span className="logs__whois text-muted" key={key} title={t(key)}>
                     {icon && (
-                        <Fragment>
+                        <>
                             <svg className="logs__whois-icon icons">
                                 <use xlinkHref={`#${icon}`} />
                             </svg>
                             &nbsp;
-                        </Fragment>
+                        </>
                     )}{whoisInfo[key]}
                 </span>
                 );

client/src/helpers/helpers.js

@@ -142,7 +142,7 @@ export const addClientInfo = (data, clients, param) => (
         const info = clients.find((item) => item[clientIp]) || '';
         return {
             ...row,
-            info: (info && info[clientIp]) || '',
+            info: info?.[clientIp] ?? '',
         };
     })
 );
@@ -342,7 +342,7 @@ export const normalizeTopClients = (topClients) => topClients.reduce(
 
 export const getClientInfo = (clients, ip) => {
     const client = clients
-        .find((item) => item.ip_addrs && item.ip_addrs.find((clientIp) => clientIp === ip));
+        .find((item) => item.ip_addrs?.find((clientIp) => clientIp === ip));
 
     if (!client) {
         return '';
@@ -403,7 +403,7 @@ export const secondsToMilliseconds = (seconds) => {
     return seconds;
 };
 
-export const normalizeRulesTextarea = (text) => text && text.replace(/^\n/g, '')
+export const normalizeRulesTextarea = (text) => text?.replace(/^\n/g, '')
     .replace(/\n\s*\n/g, '\n');
 
 export const isVersionGreater = (currentVersion, previousVersion) => (
@@ -415,7 +415,7 @@ export const normalizeWhois = (whois) => {
         const {
             city, country, ...values
         } = whois;
-        let location = (country && country) || '';
+        let location = country || '';
 
         if (city && location) {
             location = `${location}, ${city}`;
@@ -483,7 +483,7 @@ export const checkParental = (reason) => reason === FILTERED_STATUS.FILTERED_PAR
 export const checkBlockedService = (reason) => reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
 
 export const getCurrentFilter = (url, filters) => {
-    const filter = filters && filters.find((item) => url === item.url);
+    const filter = filters?.find((item) => url === item.url);
 
     if (filter) {
         const { enabled, name, url } = filter;

client/src/install/Setup/Settings.js

@@ -29,9 +29,9 @@ const renderInterfaces = ((interfaces) => (
             flags,
         } = option;
 
-        if (option && ip_addresses && ip_addresses.length > 0) {
+        if (option && ip_addresses?.length > 0) {
             const ip = getInterfaceIp(option);
-            const isDown = flags && flags.includes('down');
+            const isDown = flags?.includes('down');
 
             if (isDown) {
                 return (

client/src/reducers/access.js

@@ -14,9 +14,9 @@ const access = handleActions(
             } = payload;
             const newState = {
                 ...state,
-                allowed_clients: (allowed_clients && allowed_clients.join('\n')) || '',
+                allowed_clients: allowed_clients?.join('\n') || '',
-                disallowed_clients: (disallowed_clients && disallowed_clients.join('\n')) || '',
+                disallowed_clients: disallowed_clients?.join('\n') || '',
-                blocked_hosts: (blocked_hosts && blocked_hosts.join('\n')) || '',
+                blocked_hosts: blocked_hosts?.join('\n') || '',
                 processing: false,
             };
             return newState;
@@ -42,9 +42,9 @@ const access = handleActions(
             } = payload;
             const newState = {
                 ...state,
-                allowed_clients: (allowed_clients && allowed_clients.join('\n')) || '',
+                allowed_clients: allowed_clients?.join('\n') || '',
-                disallowed_clients: (disallowed_clients && disallowed_clients.join('\n')) || '',
+                disallowed_clients: disallowed_clients?.join('\n') || '',
-                blocked_hosts: (blocked_hosts && blocked_hosts.join('\n')) || '',
+                blocked_hosts: blocked_hosts?.join('\n') || '',
                 processingSet: false,
             };
             return newState;