refactoring and implementing refreshing items list every 2 seconds

frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js

@@ -5,7 +5,7 @@ class CheckboxAndRadioWrapper extends React.Component {
   optionChange = (option, optionName, type) => {
     const optionTypePicker = {
       radio: option.target.value,
-      checkbox: option.target.checked
+      checkbox: option.target.checked ? option.target.value : false
     };
     const { onOptionChanged } = this.props;
     onOptionChanged({
@@ -15,10 +15,9 @@ class CheckboxAndRadioWrapper extends React.Component {
   };
   isChecked = (type, value, optionName) => {
     const { options } = this.props;
-    return type === "checkbox"
-      ? value
-      : options.hasOwnProperty(optionName) &&
-          options[optionName] === String(value);
+    return options.hasOwnProperty(optionName) && type === "checkbox"
+      ? options[optionName]
+      : options[optionName] === String(value);
   };
   renderElements = (elements, componentName) => {
     return elements.map(({ type, value, name, optionName } = {}) => (

frontend-react/src/components/widgets/RangeWrapper.js

@@ -4,22 +4,28 @@ import { optionchangewrapper } from "utils/optionchangewrapper";
 import "rc-slider/assets/index.css";
 
 class RangeWrapper extends React.Component {
+  sendAction = (optionName, optionValue) => {
+    this.props.onOptionChanged({
+      optionName,
+      optionValue
+    });
+  };
   handleRangeChange = ([min, max] = this.props.defaultValues) => {
     this.inputMin.value = min;
     this.inputMax.value = max;
-    const { onOptionChanged, optionName } = this.props;
-    onOptionChanged({
-      optionName,
-      optionValue: [min, max]
-    });
+    const { optionNames } = this.props;
+    const optionValues = [min, max];
+    optionNames.forEach((optionName, index) =>
+      this.sendAction(optionName, optionValues[index])
+    );
   };
 
   handleInputChange = () => {
-    const { onOptionChanged, optionName } = this.props;
-    onOptionChanged({
-      optionName,
-      optionValue: [this.inputMin.value, this.inputMax.value]
-    });
+    const { optionNames } = this.props;
+    const optionValues = [this.inputMin.value, this.inputMax.value];
+    optionNames.forEach((optionName, index) =>
+      this.sendAction(optionName, optionValues[index])
+    );
   };
 
   render() {