+ client: Refactor DHCP settings

client/src/components/Dashboard/index.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import Statistics from './Statistics';
 import Counters from './Counters';
@@ -13,144 +13,141 @@ import Loading from '../ui/Loading';
 import { BLOCK_ACTIONS } from '../../helpers/constants';
 import './Dashboard.css';
 
-class Dashboard extends Component {
-    componentDidMount() {
-        this.getAllStats();
-    }
+const Dashboard = ({
+    getAccessList,
+    getStats,
+    getStatsConfig,
+    dashboard,
+    toggleProtection,
+    toggleClientBlock,
+    stats,
+    access,
+}) => {
+    const { t } = useTranslation();
 
-    getAllStats = () => {
-        this.props.getAccessList();
-        this.props.getStats();
-        this.props.getStatsConfig();
+    const getAllStats = () => {
+        getAccessList();
+        getStats();
+        getStatsConfig();
     };
 
-    getToggleFilteringButton = () => {
-        const { protectionEnabled, processingProtection } = this.props.dashboard;
+    useEffect(() => {
+        getAllStats();
+    }, []);
+
+    const getToggleFilteringButton = () => {
+        const { protectionEnabled, processingProtection } = dashboard;
         const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
         const buttonClass = protectionEnabled ? 'btn-gray' : 'btn-success';
 
-        return (
-            <button
+        return <button
                 type="button"
                 className={`btn btn-sm mr-2 ${buttonClass}`}
-                onClick={() => this.props.toggleProtection(protectionEnabled)}
+                onClick={() => toggleProtection(protectionEnabled)}
                 disabled={processingProtection}
-            >
-                <Trans>{buttonText}</Trans>
-            </button>
-        );
+        >
+            <Trans>{buttonText}</Trans>
+        </button>;
     };
 
-    toggleClientStatus = (type, ip) => {
+    const toggleClientStatus = (type, ip) => {
         const confirmMessage = type === BLOCK_ACTIONS.BLOCK ? 'client_confirm_block' : 'client_confirm_unblock';
 
-        if (window.confirm(this.props.t(confirmMessage, { ip }))) {
-            this.props.toggleClientBlock(type, ip);
+        if (window.confirm(t(confirmMessage, { ip }))) {
+            toggleClientBlock(type, ip);
         }
     };
 
-    render() {
-        const {
-            dashboard, stats, access, t,
-        } = this.props;
-        const statsProcessing = stats.processingStats
+    const refreshButton = <button
+            type="button"
+            className="btn btn-icon btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <svg className="icons">
+            <use xlinkHref="#refresh" />
+        </svg>
+    </button>;
+
+    const subtitle = stats.interval === 1
+        ? t('for_last_24_hours')
+        : t('for_last_days', { count: stats.interval });
+
+    const refreshFullButton = <button
+            type="button"
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <Trans>refresh_statics</Trans>
+    </button>;
+
+    const statsProcessing = stats.processingStats
             || stats.processingGetConfig
             || access.processing;
 
-        const subtitle = stats.interval === 1
-            ? t('for_last_24_hours')
-            : t('for_last_days', { count: stats.interval });
+    return <>
+        <PageTitle title={t('dashboard')}>
+            <div className="page-title__actions">
+                {getToggleFilteringButton()}
+                {refreshFullButton}
+            </div>
+        </PageTitle>
+        {statsProcessing && <Loading />}
+        {!statsProcessing && <div className="row row-cards">
+            <div className="col-lg-12">
+                <Statistics
+                        interval={stats.interval}
+                        dnsQueries={stats.dnsQueries}
+                        blockedFiltering={stats.blockedFiltering}
+                        replacedSafebrowsing={stats.replacedSafebrowsing}
+                        replacedParental={stats.replacedParental}
+                        numDnsQueries={stats.numDnsQueries}
+                        numBlockedFiltering={stats.numBlockedFiltering}
+                        numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        numReplacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Counters
+                        subtitle={subtitle}
 
-        const refreshFullButton = (
-            <button
-                type="button"
-                className="btn btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <Trans>refresh_statics</Trans>
-            </button>
-        );
-
-        const refreshButton = (
-            <button
-                type="button"
-                className="btn btn-icon btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <svg className="icons">
-                    <use xlinkHref="#refresh" />
-                </svg>
-            </button>
-        );
-
-        return (
-            <Fragment>
-                <PageTitle title={t('dashboard')}>
-                    <div className="page-title__actions">
-                        {this.getToggleFilteringButton()}
-                        {refreshFullButton}
-                    </div>
-                </PageTitle>
-                {statsProcessing && <Loading />}
-                {!statsProcessing && (
-                    <div className="row row-cards">
-                        <div className="col-lg-12">
-                            <Statistics
-                                interval={stats.interval}
-                                dnsQueries={stats.dnsQueries}
-                                blockedFiltering={stats.blockedFiltering}
-                                replacedSafebrowsing={stats.replacedSafebrowsing}
-                                replacedParental={stats.replacedParental}
-                                numDnsQueries={stats.numDnsQueries}
-                                numBlockedFiltering={stats.numBlockedFiltering}
-                                numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                numReplacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Counters
-                                subtitle={subtitle}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Clients
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topClients={stats.topClients}
-                                clients={dashboard.clients}
-                                autoClients={dashboard.autoClients}
-                                refreshButton={refreshButton}
-                                toggleClientStatus={this.toggleClientStatus}
-                                processingAccessSet={access.processingSet}
-                                disallowedClients={access.disallowed_clients}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <QueriedDomains
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topQueriedDomains={stats.topQueriedDomains}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <BlockedDomains
-                                subtitle={subtitle}
-                                topBlockedDomains={stats.topBlockedDomains}
-                                blockedFiltering={stats.numBlockedFiltering}
-                                replacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                replacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                    </div>
-                )}
-            </Fragment>
-        );
-    }
-}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Clients
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topClients={stats.topClients}
+                        clients={dashboard.clients}
+                        autoClients={dashboard.autoClients}
+                        refreshButton={refreshButton}
+                        toggleClientStatus={toggleClientStatus}
+                        processingAccessSet={access.processingSet}
+                        disallowedClients={access.disallowed_clients}
+                />
+            </div>
+            <div className="col-lg-6">
+                <QueriedDomains
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topQueriedDomains={stats.topQueriedDomains}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <BlockedDomains
+                        subtitle={subtitle}
+                        topBlockedDomains={stats.topBlockedDomains}
+                        blockedFiltering={stats.numBlockedFiltering}
+                        replacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        replacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+        </div>}
+    </>;
+};
 
 Dashboard.propTypes = {
     dashboard: PropTypes.object.isRequired,
@@ -160,9 +157,8 @@ Dashboard.propTypes = {
     getStatsConfig: PropTypes.func.isRequired,
     toggleProtection: PropTypes.func.isRequired,
     getClients: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
     toggleClientBlock: PropTypes.func.isRequired,
     getAccessList: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Dashboard);
+export default Dashboard;