- client: Submit setFiltersConfig action on if the values are changed: Merge pull request #637 in DNS/adguard-home from fix/1749 to master

Close #1749

Squashed commit of the following:

commit aaf4ba86429670ea8b0001325562c4a173be5b4a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri May 29 13:29:44 2020 +0300

    - client: Submit setFiltersConfig action on if the values are changed
This commit is contained in:
Artem Baskal 2020-05-29 16:08:01 +03:00
parent 72f253f62b
commit b8032801a2
4 changed files with 38 additions and 22 deletions

View File

@ -61,7 +61,6 @@ const Form = (props) => {
<label className="form__label">
<Trans>filters_interval</Trans>
</label>
{getIntervalSelect(processing, t, handleChange, toNumber)}
</div>
</div>

View File

@ -1,33 +1,35 @@
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import debounce from 'lodash/debounce';
import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants';
import Form from './Form';
import { getObjDiff } from '../../../helpers/helpers';
class FiltersConfig extends Component {
handleFormChange = debounce((values) => {
this.props.setFiltersConfig(values);
const FiltersConfig = (props) => {
const { initialValues, processing } = props;
const handleFormChange = debounce((values) => {
const diff = getObjDiff(initialValues, values);
if (Object.values(diff).length > 0) {
props.setFiltersConfig(values);
}
}, DEBOUNCE_TIMEOUT);
render() {
const { interval, enabled, processing } = this.props;
return (
<Form
initialValues={{ interval, enabled }}
onSubmit={this.handleFormChange}
onChange={this.handleFormChange}
initialValues={initialValues}
onSubmit={handleFormChange}
onChange={handleFormChange}
processing={processing}
/>
);
}
}
};
FiltersConfig.propTypes = {
interval: PropTypes.number.isRequired,
enabled: PropTypes.bool.isRequired,
initialValues: PropTypes.object.isRequired,
processing: PropTypes.bool.isRequired,
setFiltersConfig: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,

View File

@ -92,8 +92,10 @@ class Settings extends Component {
<Card bodyType="card-body box-body--settings">
<div className="form">
<FiltersConfig
interval={filtering.interval}
enabled={filtering.enabled}
initialValues={{
interval: filtering.interval,
enabled: filtering.enabled,
}}
processing={filtering.processingSetConfig}
setFiltersConfig={setFiltersConfig}
/>

View File

@ -482,6 +482,19 @@ export const getCurrentFilter = (url, filters) => {
};
};
/**
* @param {object} initialValues
* @param {object} values
* @returns {object} Returns different values of objects
*/
export const getObjDiff = (initialValues, values) => Object.entries(values)
.reduce((acc, [key, value]) => {
if (value !== initialValues[key]) {
acc[key] = value;
}
return acc;
}, {});
/**
* @param number Number to format
* @returns string Returns a string with a language-sensitive representation of this number