- 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
2020-07-03 19:17:58 +03:00 · 2020-07-03 19:17:58 +03:00 · 6b134469d4
parent 21dfb5ffe8
commit 6b134469d4
22 changed files with 144 additions and 91 deletions
--- a/client/babel.config.js
+++ b/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',
        ],
    };
 };
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -472,13 +472,21 @@
      }
    },
    "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==",
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
-      "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz",
+      "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": {
--- a/client/package.json
+++ b/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",
--- a/client/src/actions/index.js
+++ b/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());
--- a/client/src/components/Filters/Services/index.js
+++ b/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());
--- a/client/src/components/Logs/Cells/getClientCell.js
+++ b/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 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 source = autoClient?.source;

    const id = nanoid();

    const data = {
        address: client,
        name,
-        country,
-        city,
-        network,
+        country: whois_info?.country,
+        city: whois_info?.city,
+        network: whois_info?.orgname,
        source_label: source,
    };

--- a/client/src/components/Logs/Cells/getDomainCell.js
+++ b/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,
-        category_label: tracker && captitalizeWords(tracker.category),
+        name_table_header: tracker?.name,
+        category_label: hasTracker && captitalizeWords(tracker.category),
        source_label: sourceData
            && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
                  className="link--green">{sourceData.name}</a>,
--- a/client/src/components/Logs/Cells/getResponseCell.js
+++ b/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]
-        && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
+    const statusLabel = t(FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
    const filter = getFilterName(filters, whitelistFilters, filterId, t);

--- a/client/src/components/Logs/Filters/Form.js
+++ b/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">
-                <Tooltip text={tooltip} type='tooltip-custom--logs' />
-            </span>
+    <div
+        className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
+        <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({
--- a/client/src/components/Logs/Filters/index.js
+++ b/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>
    );
 };
--- a/client/src/components/Logs/Logs.css
+++ b/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 {
--- a/client/src/components/Logs/Table.js
+++ b/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(
-                            (autoClient) => autoClient.name === client,
-                        );
+                        const autoClient = autoClients
+                            .find((autoClient) => autoClient.name === client);

-                        const country = autoClient && autoClient.whois_info
-                            && autoClient.whois_info.country;
+                        const { whois_info } = info;
+                        const country = whois_info?.country;
+                        const city = whois_info?.city;
+                        const network = whois_info?.orgname;

-                        const network = autoClient && autoClient.whois_info
-                            && autoClient.whois_info.orgname;
-
-                        const city = autoClient && autoClient.whois_info
-                            && autoClient.whois_info.city;
-
-                        const source = autoClient && autoClient.source;
+                        const source = 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]
-                            && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
+                        const status = t(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;
--- a/client/src/components/Logs/index.js
+++ b/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];
--- a/client/src/components/Settings/Dhcp/index.js
+++ b/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') {
--- a/client/src/components/Toasts/index.js
+++ b/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
--- a/client/src/components/ui/Guide.js
+++ b/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] }}
--- a/client/src/components/ui/Icons.css
+++ b/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);
 }
--- a/client/src/helpers/form.js
+++ b/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>;
--- a/client/src/helpers/formatClientCell.js
+++ b/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>
                );
--- a/client/src/helpers/helpers.js
+++ b/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;
--- a/client/src/install/Setup/Settings.js
+++ b/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 (
--- a/client/src/reducers/access.js
+++ b/client/src/reducers/access.js
@ -14,9 +14,9 @@ const access = handleActions(
            } = payload;
            const newState = {
                ...state,
-                allowed_clients: (allowed_clients && allowed_clients.join('\n')) || '',
-                disallowed_clients: (disallowed_clients && disallowed_clients.join('\n')) || '',
-                blocked_hosts: (blocked_hosts && blocked_hosts.join('\n')) || '',
+                allowed_clients: allowed_clients?.join('\n') || '',
+                disallowed_clients: disallowed_clients?.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')) || '',
-                disallowed_clients: (disallowed_clients && disallowed_clients.join('\n')) || '',
-                blocked_hosts: (blocked_hosts && blocked_hosts.join('\n')) || '',
+                allowed_clients: allowed_clients?.join('\n') || '',
+                disallowed_clients: disallowed_clients?.join('\n') || '',
+                blocked_hosts: blocked_hosts?.join('\n') || '',
                processingSet: false,
            };
            return newState;