diff --git a/client/src/components/Settings/Dns/Upstream/Form.js b/client/src/components/Settings/Dns/Upstream/Form.js index 8174b54e..2678edac 100644 --- a/client/src/components/Settings/Dns/Upstream/Form.js +++ b/client/src/components/Settings/Dns/Upstream/Form.js @@ -52,10 +52,11 @@ const Form = ({ submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit, }) => { const dispatch = useDispatch(); - const [t] = useTranslation(); + const { t } = useTranslation(); const upstream_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns); - const bootstrap_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM] - .values.bootstrap_dns); + const bootstrap_dns = useSelector( + (store) => store.form[FORM_NAME.UPSTREAM].values.bootstrap_dns, + ); const handleUpstreamTest = () => dispatch(testUpstream({ upstream_dns, diff --git a/client/src/components/Settings/Dns/Upstream/index.js b/client/src/components/Settings/Dns/Upstream/index.js index a17e35b4..a0a26c00 100644 --- a/client/src/components/Settings/Dns/Upstream/index.js +++ b/client/src/components/Settings/Dns/Upstream/index.js @@ -1,6 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { shallowEqual, useDispatch } from 'react-redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import Form from './Form'; import Card from '../../../ui/Card'; import { setDnsConfig } from '../../../../actions/dnsConfig'; @@ -13,36 +13,34 @@ const Upstream = () => { bootstrap_dns, upstream_mode, processingSetConfig, - } = ((state) => state.dnsConfig, shallowEqual); + } = useSelector((state) => state.dnsConfig, shallowEqual); - const { processingTestUpstream } = ((state) => state.settings, shallowEqual); + const { processingTestUpstream } = useSelector((state) => state.settings, shallowEqual); const handleSubmit = (values) => { dispatch(setDnsConfig(values)); }; - return ( - <Card - title={t('upstream_dns')} - subtitle={t('upstream_dns_hint')} - bodyType="card-body box-body--settings" - > - <div className="row"> - <div className="col"> - <Form - initialValues={{ - upstream_dns, - bootstrap_dns, - upstream_mode, - }} - onSubmit={handleSubmit} - processingTestUpstream={processingTestUpstream} - processingSetConfig={processingSetConfig} - /> - </div> + return <Card + title={t('upstream_dns')} + subtitle={t('upstream_dns_hint')} + bodyType="card-body box-body--settings" + > + <div className="row"> + <div className="col"> + <Form + initialValues={{ + upstream_dns, + bootstrap_dns, + upstream_mode, + }} + onSubmit={handleSubmit} + processingTestUpstream={processingTestUpstream} + processingSetConfig={processingSetConfig} + /> </div> - </Card> - ); + </div> + </Card>; }; export default Upstream;