diff --git a/client/src/components/Settings/Clients/index.js b/client/src/components/Settings/Clients/index.js index 4f936e1e..087662a2 100644 --- a/client/src/components/Settings/Clients/index.js +++ b/client/src/components/Settings/Clients/index.js @@ -9,12 +9,20 @@ import Loading from '../../ui/Loading'; class Clients extends Component { render() { - const { dashboard, clients, t } = this.props; + const { + t, + dashboard, + clients, + addClient, + updateClient, + deleteClient, + toggleClientModal, + } = this.props; return ( - {!dashboard.processingTopStats || (!dashboard.processingClients && )} + {(dashboard.processingTopStats || dashboard.processingClients) && } {!dashboard.processingTopStats && !dashboard.processingClients && ( { diff --git a/client/src/components/Settings/Dns/index.js b/client/src/components/Settings/Dns/index.js index d65a6c32..2b038b1f 100644 --- a/client/src/components/Settings/Dns/index.js +++ b/client/src/components/Settings/Dns/index.js @@ -1,34 +1,59 @@ -import React, { Fragment } from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { withNamespaces } from 'react-i18next'; import Upstream from './Upstream'; +import Access from './Access'; import PageTitle from '../../ui/PageTitle'; +import Loading from '../../ui/Loading'; -const Dns = (props) => { - const { dashboard, settings, t } = props; +class Dns extends Component { + componentDidMount() { + this.props.getAccessList(); + } - return ( - - - - - ); -}; + render() { + const { + t, + dashboard, + settings, + access, + setAccessList, + testUpstream, + setUpstream, + } = this.props; + + return ( + + + {(dashboard.processing || access.processing) && } + {!dashboard.processing && !access.processing && ( + + + + + )} + + ); + } +} Dns.propTypes = { dashboard: PropTypes.object.isRequired, settings: PropTypes.object.isRequired, setUpstream: PropTypes.func.isRequired, testUpstream: PropTypes.func.isRequired, + getAccessList: PropTypes.func.isRequired, + setAccessList: PropTypes.func.isRequired, + access: PropTypes.object.isRequired, t: PropTypes.func.isRequired, }; diff --git a/client/src/containers/Dns.js b/client/src/containers/Dns.js index fab30326..491f21ee 100644 --- a/client/src/containers/Dns.js +++ b/client/src/containers/Dns.js @@ -1,12 +1,14 @@ import { connect } from 'react-redux'; import { handleUpstreamChange, setUpstream, testUpstream, addErrorToast } from '../actions'; +import { getAccessList, setAccessList } from '../actions/access'; import Dns from '../components/Settings/Dns'; const mapStateToProps = (state) => { - const { dashboard, settings } = state; + const { dashboard, settings, access } = state; const props = { dashboard, settings, + access, }; return props; }; @@ -16,6 +18,8 @@ const mapDispatchToProps = { setUpstream, testUpstream, addErrorToast, + getAccessList, + setAccessList, }; export default connect( diff --git a/client/src/containers/Settings.js b/client/src/containers/Settings.js index 5959d5fb..827822cf 100644 --- a/client/src/containers/Settings.js +++ b/client/src/containers/Settings.js @@ -1,53 +1,11 @@ import { connect } from 'react-redux'; -import { - initSettings, - toggleSetting, - handleUpstreamChange, - setUpstream, - testUpstream, - addErrorToast, - toggleDhcp, - getDhcpStatus, - getDhcpInterfaces, - setDhcpConfig, - findActiveDhcp, - addStaticLease, - removeStaticLease, - toggleLeaseModal, -} from '../actions'; -import { - getTlsStatus, - setTlsConfig, - validateTlsConfig, -} from '../actions/encryption'; -import { - addClient, - updateClient, - deleteClient, - toggleClientModal, -} from '../actions/clients'; -import { - getAccessList, - setAccessList, -} from '../actions/access'; +import { initSettings, toggleSetting, addErrorToast } from '../actions'; import Settings from '../components/Settings'; const mapStateToProps = (state) => { - const { - settings, - dashboard, - dhcp, - encryption, - clients, - access, - } = state; + const { settings } = state; const props = { settings, - dashboard, - dhcp, - encryption, - clients, - access, }; return props; }; @@ -55,27 +13,7 @@ const mapStateToProps = (state) => { const mapDispatchToProps = { initSettings, toggleSetting, - handleUpstreamChange, - setUpstream, - testUpstream, addErrorToast, - toggleDhcp, - getDhcpStatus, - getDhcpInterfaces, - setDhcpConfig, - findActiveDhcp, - getTlsStatus, - setTlsConfig, - validateTlsConfig, - addClient, - updateClient, - deleteClient, - toggleClientModal, - addStaticLease, - removeStaticLease, - toggleLeaseModal, - getAccessList, - setAccessList, }; export default connect( diff --git a/client/src/reducers/access.js b/client/src/reducers/access.js index 9ee258a0..be8931dc 100644 --- a/client/src/reducers/access.js +++ b/client/src/reducers/access.js @@ -17,6 +17,7 @@ const access = handleActions( allowed_clients: allowed_clients.join('\n'), disallowed_clients: disallowed_clients.join('\n'), blocked_hosts: blocked_hosts.join('\n'), + processing: false, }; return newState; },