Skip to content

Commit

Permalink
Update Upstream component with new api, extract reduxForm HOC names i…
Browse files Browse the repository at this point in the history 
…n constant
  • Loading branch information
@ArtemBaskal
ArtemBaskal committed Jun 5, 2020
1 parent 72de3d5 commit 790cff0
Show file tree
Hide file tree
Showing 24 changed files with 208 additions and 273 deletions.
5 changes: 3 additions & 2 deletions client/src/components/Filters/Check/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Card from '../../ui/Card';

import { renderInputField } from '../../../helpers/form';
import Info from './Info';
import { FORM_NAME } from '../../../helpers/constants';

const Check = (props) => {
const {
Expand Down Expand Up @@ -60,7 +61,7 @@ const Check = (props) => {
</div>
{check.hostname && (
<Fragment>
<hr/>
<hr />
<Info
filters={filters}
whitelistFilters={whitelistFilters}
Expand Down Expand Up @@ -94,5 +95,5 @@ Check.propTypes = {

export default flow([
withTranslation(),
reduxForm({ form: 'domainCheckForm' }),
reduxForm({ form: FORM_NAME.DOMAIN_CHECK }),
])(Check);
29 changes: 14 additions & 15 deletions client/src/components/Filters/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';

import { renderInputField, required, isValidPath } from '../../helpers/form';
import { FORM_NAME } from '../../helpers/constants';

const Form = (props) => {
const {
Expand All @@ -19,18 +20,18 @@ const Form = (props) => {
return (
<form onSubmit={handleSubmit}>
<div className="modal-body">
<div className="form__group">
<Field
id="name"
name="name"
type="text"
component={renderInputField}
className="form-control"
placeholder={t('enter_name_hint')}
validate={[required]}
normalizeOnBlur={(data) => data.trim()}
/>
</div>
<div className="form__group">
<Field
id="name"
name="name"
type="text"
component={renderInputField}
className="form-control"
placeholder={t('enter_name_hint')}
validate={[required]}
normalizeOnBlur={(data) => data.trim()}
/>
</div>
<div className="form__group">
<Field
id="url"
Expand Down Expand Up @@ -79,7 +80,5 @@ Form.propTypes = {

export default flow([
withTranslation(),
reduxForm({
form: 'filterForm',
}),
reduxForm({ form: FORM_NAME.FILTER }),
])(Form);
3 changes: 2 additions & 1 deletion client/src/components/Filters/Rewrites/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import flow from 'lodash/flow';
import {
renderInputField, required, domain, answer,
} from '../../../helpers/form';
import { FORM_NAME } from '../../../helpers/constants';

const Form = (props) => {
const {
Expand Down Expand Up @@ -104,7 +105,7 @@ Form.propTypes = {
export default flow([
withTranslation(),
reduxForm({
form: 'rewritesForm',
form: FORM_NAME.REWRITES,
enableReinitialize: true,
}),
])(Form);
4 changes: 2 additions & 2 deletions client/src/components/Logs/Filters/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
import flow from 'lodash/flow';

import { renderInputField } from '../../../helpers/form';
import { RESPONSE_FILTER } from '../../../helpers/constants';
import { FORM_NAME, RESPONSE_FILTER } from '../../../helpers/constants';
import Tooltip from '../../ui/Tooltip';

const renderFilterField = ({
Expand Down Expand Up @@ -124,6 +124,6 @@ Form.propTypes = {
export default flow([
withTranslation(),
reduxForm({
form: 'logsFilterForm',
form: FORM_NAME.LOGS_FILTER,
}),
])(Form);
6 changes: 3 additions & 3 deletions client/src/components/Settings/Clients/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
renderSelectField,
renderServiceField,
} from '../../../helpers/form';
import { SERVICES } from '../../../helpers/constants';
import { FORM_NAME, SERVICES } from '../../../helpers/constants';
import './Service.css';

const settingsCheckboxes = [
Expand Down Expand Up @@ -338,7 +338,7 @@ Form.propTypes = {
tagsOptions: PropTypes.array.isRequired,
};

const selector = formValueSelector('clientForm');
const selector = formValueSelector(FORM_NAME.CLIENT);

Form = connect((state) => {
const useGlobalSettings = selector(state, 'use_global_settings');
Expand All @@ -352,7 +352,7 @@ Form = connect((state) => {
export default flow([
withTranslation(),
reduxForm({
form: 'clientForm',
form: FORM_NAME.CLIENT,
enableReinitialize: true,
validate,
}),
Expand Down
5 changes: 3 additions & 2 deletions client/src/components/Settings/Dhcp/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import flow from 'lodash/flow';
import {
renderInputField, required, ipv4, isPositive, toNumber,
} from '../../../helpers/form';
import { FORM_NAME } from '../../../helpers/constants';

const renderInterfaces = ((interfaces) => (
Object.keys(interfaces).map((item) => {
Expand Down Expand Up @@ -221,7 +222,7 @@ Form.propTypes = {
change: PropTypes.func.isRequired,
};

const selector = formValueSelector('dhcpForm');
const selector = formValueSelector(FORM_NAME.DHCP);

Form = connect((state) => {
const interfaceValue = selector(state, 'interface_name');
Expand All @@ -232,5 +233,5 @@ Form = connect((state) => {

export default flow([
withTranslation(),
reduxForm({ form: 'dhcpForm' }),
reduxForm({ form: FORM_NAME.DHCP }),
])(Form);
3 changes: 2 additions & 1 deletion client/src/components/Settings/Dhcp/StaticLeases/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import flow from 'lodash/flow';
import {
renderInputField, ipv4, mac, required,
} from '../../../../helpers/form';
import { FORM_NAME } from '../../../../helpers/constants';

const Form = (props) => {
const {
Expand Down Expand Up @@ -94,5 +95,5 @@ Form.propTypes = {

export default flow([
withTranslation(),
reduxForm({ form: 'leaseForm' }),
reduxForm({ form: FORM_NAME.LEASE }),
])(Form);
3 changes: 2 additions & 1 deletion client/src/components/Settings/Dns/Access/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { renderTextareaField } from '../../../../helpers/form';
import { normalizeMultiline } from '../../../../helpers/helpers';
import { FORM_NAME } from '../../../../helpers/constants';

const fields = [
{
Expand Down Expand Up @@ -84,4 +85,4 @@ Form.propTypes = {
textarea: PropTypes.bool,
};

export default flow([withTranslation(), reduxForm({ form: 'accessForm' })])(Form);
export default flow([withTranslation(), reduxForm({ form: FORM_NAME.ACCESS })])(Form);
162 changes: 80 additions & 82 deletions client/src/components/Settings/Dns/Config/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
biggerOrEqualZero,
toNumber,
} from '../../../../helpers/form';
import { BLOCKING_MODES } from '../../../../helpers/constants';
import { BLOCKING_MODES, FORM_NAME } from '../../../../helpers/constants';

const checkboxes = [{
name: 'edns_cs_enabled',
Expand Down Expand Up @@ -60,91 +60,91 @@ const getFields = (processing, t) => Object.values(BLOCKING_MODES)
let Form = ({
handleSubmit, submitting, invalid, processing, blockingMode, t,
}) => <form onSubmit={handleSubmit}>
<div className="row">
<div className="col-12 col-sm-6">
<div className="form__group form__group--settings">
<label htmlFor="ratelimit"
className="form__label form__label--with-desc">
<Trans>rate_limit</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>rate_limit_desc</Trans>
</div>
<Field
name="ratelimit"
type="number"
component={renderInputField}
className="form-control"
placeholder={t('form_enter_rate_limit')}
normalize={toNumber}
validate={[required, biggerOrEqualZero]}
/>
<div className="row">
<div className="col-12 col-sm-6">
<div className="form__group form__group--settings">
<label htmlFor="ratelimit"
className="form__label form__label--with-desc">
<Trans>rate_limit</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>rate_limit_desc</Trans>
</div>
<Field
name="ratelimit"
type="number"
component={renderInputField}
className="form-control"
placeholder={t('form_enter_rate_limit')}
normalize={toNumber}
validate={[required, biggerOrEqualZero]}
/>
</div>
</div>
{checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
<div className="form__group form__group--settings">
<Field
name={name}
type="checkbox"
component={renderSelectField}
placeholder={t(placeholder)}
disabled={processing}
subtitle={t(subtitle)}
/>
</div>
{checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
</div>)}
<div className="col-12">
<div className="form__group form__group--settings mb-4">
<label className="form__label form__label--with-desc">
<Trans>blocking_mode</Trans>
</label>
<div className="form__desc form__desc--top">
{Object.values(BLOCKING_MODES)
.map((mode) => (
<li key={mode}>
<Trans>{`blocking_mode_${mode}`}</Trans>
</li>
))}
</div>
<div className="custom-controls-stacked">
{getFields(processing, t)}
</div>
</div>
</div>
{blockingMode === BLOCKING_MODES.custom_ip && (
<Fragment>
{customIps.map(({
description,
name,
validateIp,
}) => <div className="col-12 col-sm-6" key={name}>
<div className="form__group form__group--settings">
<label className="form__label form__label--with-desc"
htmlFor={name}><Trans>{name}</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>{description}</Trans>
</div>
<Field
name={name}
type="checkbox"
component={renderSelectField}
placeholder={t(placeholder)}
disabled={processing}
subtitle={t(subtitle)}
component={renderInputField}
className="form-control"
placeholder={t('form_enter_ip')}
validate={[validateIp, required]}
/>
</div>
</div>)}
<div className="col-12">
<div className="form__group form__group--settings mb-4">
<label className="form__label form__label--with-desc">
<Trans>blocking_mode</Trans>
</label>
<div className="form__desc form__desc--top">
{Object.values(BLOCKING_MODES)
.map((mode) => (
<li key={mode}>
<Trans>{`blocking_mode_${mode}`}</Trans>
</li>
))}
</div>
<div className="custom-controls-stacked">
{getFields(processing, t)}
</div>
</div>
</div>
{blockingMode === BLOCKING_MODES.custom_ip && (
<Fragment>
{customIps.map(({
description,
name,
validateIp,
}) => <div className="col-12 col-sm-6" key={name}>
<div className="form__group form__group--settings">
<label className="form__label form__label--with-desc"
htmlFor={name}><Trans>{name}</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>{description}</Trans>
</div>
<Field
name={name}
component={renderInputField}
className="form-control"
placeholder={t('form_enter_ip')}
validate={[validateIp, required]}
/>
</div>
</div>)}
</Fragment>
)}
</div>
<button
type="submit"
className="btn btn-success btn-standard btn-large"
disabled={submitting || invalid || processing}
>
<Trans>save_btn</Trans>
</button>
</form>;
</Fragment>
)}
</div>
<button
type="submit"
className="btn btn-success btn-standard btn-large"
disabled={submitting || invalid || processing}
>
<Trans>save_btn</Trans>
</button>
</form>;

Form.propTypes = {
blockingMode: PropTypes.string.isRequired,
Expand All @@ -155,7 +155,7 @@ Form.propTypes = {
t: PropTypes.func.isRequired,
};

const selector = formValueSelector('blockingModeForm');
const selector = formValueSelector(FORM_NAME.BLOCKING_MODE);

Form = connect((state) => {
const blockingMode = selector(state, 'blocking_mode');
Expand All @@ -166,7 +166,5 @@ Form = connect((state) => {

export default flow([
withTranslation(),
reduxForm({
form: 'blockingModeForm',
}),
reduxForm({ form: FORM_NAME.BLOCKING_MODE }),
])(Form);
Loading

0 comments on commit 790cff0

Please sign in to comment.