CSSSR-School · schurin · Aug 10, 2020 · Aug 10, 2020 · Aug 10, 2020 · Aug 10, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
+    "csssr-school-utils": "git+https://github.com/CSSSR-School/junior-course-utils.git",
     "react": "^16.12.0",
+    "react-addons-shallow-compare": "^15.6.2",
     "react-dom": "^16.12.0",
     "react-scripts": "3.2.0"
   },

diff --git a/public/index.css b/public/index.css
@@ -1,15 +1,15 @@
 body {
-    margin: 0;
-    padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-      sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
+  margin: 0;
+  padding: 0;
+  color: #323c48;
+  font-family: Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 code {
-font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,6 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root">
-    </div>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/src/BaseComponent/index.jsx b/src/BaseComponent/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import shallowCompare from 'react-addons-shallow-compare';
+
+import { logger } from 'csssr-school-utils';
+
+class BaseComponent extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    if (shallowCompare(this, nextProps, nextState)) {
+      logger.call(this, this.constructor.name, nextProps, nextState);
+
+      return true;
+    }
+
+    return false;
+  }
+}
+
+export default BaseComponent;
diff --git a/src/FilterContext.js b/src/FilterContext.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const FiltersContext = React.createContext({});
+
+export default FiltersContext;
diff --git a/src/PriceFilter/index.jsx b/src/PriceFilter/index.jsx
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import BaseComponent from '../BaseComponent/index';
+import FiltersContext from '../FilterContext';
+
+const filterTitleStyle = {
+  marginBottom: '8px',
+  fontSize: '20px',
+  fontWeight: 700
+}
+
+const labelStyle = {
+  marginRight: '16px'
+}
+
+const labelTitleStyle = {
+  marginRight: '8px'
+}
+
+const inuputStyle ={
+  width: '6em'
+}
+
+class PriceFilter extends BaseComponent {
+
+  handleControlChange(filterName, value) {
+    setTimeout(() => this.props.onChangeFilter({
+      filterName,
+      value
+    }), 500);
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={ filterTitleStyle }>
+          <span>Цена</span>
+        </div>
+        <FiltersContext.Consumer>
+          {
+            ({ minPrice, maxPrice }) =>
+            <div>
+              <label style={ labelStyle }>
+                <span style={ labelTitleStyle }>От:</span>
+                <input style={ inuputStyle }
+                      type="text"
+                    defaultValue={ minPrice || 0 }
+                    onChange={(event)=> this.handleControlChange('minPrice', parseInt(event.target.value, 10))}/>
+              </label>
+
+              <label style={ labelStyle }>
+                <span style={ labelTitleStyle }>До:</span>
+                <input style={ inuputStyle }
+                      type="text"
+                    defaultValue={ maxPrice || 0 }
+                    onChange={(event)=> this.handleControlChange('maxPrice', parseInt(event.target.value, 10))}/>
+              </label>
+            </div>
+          }
+        </FiltersContext.Consumer>
+      </div>
+    )
+  }
+}
+
+PriceFilter.propTypes = {
+  onChangeFilter: PropTypes.func
+}
+export default PriceFilter
diff --git a/src/UserFilters/index.jsx b/src/UserFilters/index.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseComponent from '../BaseComponent/index';
+import PriceFilter from '../PriceFilter/index';
+
+const filtersContainerStyle = {
+  padding: '4px 16px'
+}
+
+class UserFilters extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+  }
+
+  handleFilterChange(changes) {
+    const { filterName, value } = changes;
+
+    setTimeout(() => this.props.onChangeFilter({
+      [filterName]: value
+    }), 500)
+  }
+
+  render() {
+    return (
+      <div style={ filtersContainerStyle }>
+        <PriceFilter onChangeFilter={ this.handleFilterChange }/>
+      </div>
+    )
+  }
+}
+
+UserFilters.propTypes = {
+  onChangeFilter: PropTypes.func
+}
+export default UserFilters;