refactoring

package.json

@@ -9,7 +9,10 @@
     "react": "^16.12.0",
     "react-addons-shallow-compare": "^15.6.2",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.2.0"
+    "react-redux": "^7.2.1",
+    "react-scripts": "3.2.0",
+    "redux": "^4.0.5",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/pageTitle/index.js → src/app/components/pageTitle/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import BaseComponent from '../BaseComponent/index';
+import BaseComponent from '../baseComponent/index';
 
 const pageTitleStyle = {
   fontStyle: 'normal',

src/app/components/priceFilter/index.jsx

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import debounce from 'lodash-es/debounce';
+
+import BaseComponent from '../baseComponent/index';
+
+const filterTitleStyle = {
+  marginBottom: '8px',
+  fontSize: '20px',
+  fontWeight: 700
+}
+
+const labelStyle = {
+  marginRight: '16px'
+}
+
+const labelTitleStyle = {
+  marginRight: '8px'
+}
+
+const inuputStyle ={
+  width: '6em'
+}
+
+class PriceFilter extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.handleControlChange = debounce(this.handleControlChange.bind(this), 500)
+  }
+
+  handleControlChange(filterName, value) {
+    this.props.onChangeFilter(filterName, value);
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={ filterTitleStyle }>
+          <span>Цена</span>
+        </div>
+        <div>
+          <label style={ labelStyle }>
+            <span style={ labelTitleStyle }>От:</span>
+            <input style={ inuputStyle }
+                  type="text"
+                  defaultValue={ this.props.minPrice }
+                  onChange={(event)=> this.handleControlChange('minPrice', parseInt(event.target.value, 10))}/>
+          </label>
+
+          <label style={ labelStyle }>
+            <span style={ labelTitleStyle }>До:</span>
+            <input style={ inuputStyle }
+                  type="text"
+                  defaultValue={ this.props.maxPrice }
+                  onChange={(event)=> this.handleControlChange('maxPrice', parseInt(event.target.value, 10))}/>
+          </label>
+        </div>
+      </div>
+    )
+  }
+}
+
+PriceFilter.propTypes = {
+  onChangeFilter: PropTypes.func,
+  minPrice: PropTypes.number,
+  maxPrice: PropTypes.number
+}
+export default PriceFilter

src/productList/index.js → src/app/containers/productList/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { connect } from 'react-redux'
 
-import ProductItem from '../productCard';
-import BaseComponent from '../BaseComponent/index';
+import ProductItem from '../../components/productCard';
+import BaseComponent from '../../components/baseComponent/index';
+import { filteredProductsSelector } from '../../store/selectors';
 
 const MAX_VISIBLE_PRODUCTS = 3;
 
@@ -46,7 +47,10 @@ class ProductList extends BaseComponent {
   }
 };
 
-ProductList.propTypes = {
-  products: PropTypes.array
+const mapStateToProps = function(state) {
+  return {
+    products: filteredProductsSelector(state)
+  }
 }
-export default ProductList;
+
+export default connect(mapStateToProps)(ProductList);

src/app/containers/userFilters/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import BaseComponent from '../../components/baseComponent/index';
+import PriceFilter from '../../components/priceFilter/index';
+import { productsSelector } from '../../store/selectors';
+import { setFilter } from '../../store/actionCreators';
+
+const filtersContainerStyle = {
+  padding: '4px 16px'
+}
+
+class UserFilters extends BaseComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.state = {
+      defaultFilters: {
+        minPrice: this.props.products.reduce((accum, product) => {
+          if (accum === 0 && product.price > 0) {
+            return product.price;
+          }
+
+          return accum > product.price ? product.price : accum;
+        }, 0),
+        maxPrice: this.props.products.reduce((accum, product) =>
+          accum < product.price ? product.price : accum
+        , 0)
+      }
+    }
+  }
+
+  handleFilterChange(filterName, value) {
+    this.props.setFilter(filterName, value);
+  }
+
+  render() {
+    return (
+      <div style={ filtersContainerStyle }>
+        <PriceFilter
+          minPrice = { this.state.defaultFilters.minPrice }
+          maxPrice = { this.state.defaultFilters.maxPrice }
+          onChangeFilter={ this.handleFilterChange }
+        />
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setFilter: bindActionCreators(setFilter, dispatch)
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    products: productsSelector(state)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserFilters);
+