- 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

client/src/components/Settings/FiltersConfig/Form.js

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

client/src/components/Settings/FiltersConfig/index.js

@@ -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 {
+const FiltersConfig = (props) => {
-    handleFormChange = debounce((values) => {
+    const { initialValues, processing } = props;
-        this.props.setFiltersConfig(values);
+
+    const handleFormChange = debounce((values) => {
+        const diff = getObjDiff(initialValues, values);
+
+        if (Object.values(diff).length > 0) {
+            props.setFiltersConfig(values);
+        }
     }, DEBOUNCE_TIMEOUT);
 
-    render() {
+    return (
-        const { interval, enabled, processing } = this.props;
+        <Form
-
+            initialValues={initialValues}
-        return (
+            onSubmit={handleFormChange}
-            <Form
+            onChange={handleFormChange}
-                initialValues={{ interval, enabled }}
+            processing={processing}
-                onSubmit={this.handleFormChange}
+        />
-                onChange={this.handleFormChange}
+    );
-                processing={processing}
+};
-            />
-        );
-    }
-}
 
 FiltersConfig.propTypes = {
-    interval: PropTypes.number.isRequired,
+    initialValues: PropTypes.object.isRequired,
-    enabled: PropTypes.bool.isRequired,
     processing: PropTypes.bool.isRequired,
     setFiltersConfig: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,

client/src/components/Settings/index.js

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

client/src/helpers/helpers.js

@@ -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