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,9 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
+    "connected-react-router": "^6.8.0",
+    "csssr-school-utils": "git+https://github.com/CSSSR-School/junior-course-utils.git",
+    "history": "^4.10.1",
+    "lodash-es": "^4.17.15",
     "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-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.2.0",
+    "redux": "^4.0.5",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

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/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/app/components/emptyProducts/index.jsx b/src/app/components/emptyProducts/index.jsx
@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+
+import styles from './index.module.css';
+
+class EmptyProducts extends PureComponent {
+  render() {
+    return (
+      <div className={ classnames(styles.container) }>
+        <p className={ classnames(styles.emptyText) }>Товары не найдены.</p>
+        <p className={ classnames(styles.emptyText) }>Проверьте параметры фильтра.</p>
+      </div>
+    );
+  }
+}
+
+export default EmptyProducts;
diff --git a/src/app/components/emptyProducts/index.module.css b/src/app/components/emptyProducts/index.module.css
@@ -0,0 +1,7 @@
+.container {
+  text-align: center;
+  padding: 24px 0;
+}
+.emptyText {
+  font-weight: 700;
+}
diff --git a/src/app/components/pageTitle/index.js b/src/app/components/pageTitle/index.js
@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+const pageTitleStyle = {
+  fontStyle: 'normal',
+  fontWeight: '300',
+  fontSize: '36px',
+  lineHeight: '48px',
+  textAlign: 'center'
+};
+
+class PagetTitle extends PureComponent {
+  render() {
+    return (
+      <h1 style={ pageTitleStyle }>{this.props.name}</h1>
+    )
+  }
+}
+
+PagetTitle.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export default PagetTitle;
diff --git a/src/app/components/priceFilter/index.jsx b/src/app/components/priceFilter/index.jsx
@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import debounce from 'lodash-es/debounce';
+
+const filterTitleStyle = {
+  marginBottom: '8px',
+  fontSize: '20px',
+  fontWeight: 700
+}
+
+const labelStyle = {
+  marginRight: '16px'
+}
+
+const labelTitleStyle = {
+  marginRight: '8px'
+}
+
+const inuputStyle ={
+  width: '6em'
+}
+
+class PriceFilter extends PureComponent {
+  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
diff --git a/src/app/components/productCard/index.js b/src/app/components/productCard/index.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import pt from 'prop-types';
+import cx from 'classnames';
+import s from './index.module.css';
+
+const range = to => [...Array(to).keys()].map(i => i + 1)
+
+function ProductItem({ isInStock, img, title, price, subPriceContent, maxRating, rating, ratingComponent: Rating }) {
+  return (
+    <div className={cx(s.goods, { [s.goodsNone]: !isInStock })}>
+      <div className={cx(s.goodsType, { [s.goodsTypeNone]: !isInStock })}>
+        {isInStock ? 'В наличии' : 'Недоступен'}
+      </div>
+      <img
+        className={cx(s.goodsImg, { [s.goodsImgNone]: !isInStock })}
+        src={img}
+        alt="placeholder"
+        width="224"
+        height="200"
+      />
+      <div className={s.goodsName}>{title}</div>
+      <div>
+        {
+          range(maxRating).map(i => (<Rating key={i} isFilled={i <= rating}/>))
+        }
+      </div>
+      <div className={s.goodsPrise}>
+        <span>{price} &#8381;</span>
+        <span className={s.goodsSubPrise}>{subPriceContent} &#8381;</span>
+      </div>
+    </div>
+  );
+};
+
+ProductItem.propTypes = {
+    title: pt.node.isRequired,
+    img: pt.string.isRequired,
+    price: pt.node.isRequired,
+    rating: pt.number.isRequired,
+    maxRating: pt.number.isRequired,
+    subPriceContent: pt.node.isRequired,
+    ratingComponent: pt.func.isRequired,
+    isInStock: pt.bool.isRequired
+};
+
+export default ProductItem;
diff --git a/src/app/components/productCard/index.module.css b/src/app/components/productCard/index.module.css
@@ -0,0 +1,61 @@
+.goods {
+  font-family: OpenSans, sans-serif;
+  color: #323c48;
+  text-decoration: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 224px;
+}
+
+.goodsNone {
+  color: #7e8fa4;
+}
+
+.goodsType {
+  color: #41ce7f;
+  font-size: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  border-bottom-right-radius: 15px;
+  z-index: 1;
+  padding-top: 15px;
+  padding-right: 11px;
+  padding-bottom: 15px;
+  padding-left: 12px;
+}
+
+.goodsTypeNone {
+  background-color: #f5f6fa;
+  color: #7e8fa4;
+}
+
+.goodsImg {
+  box-shadow: 0 4px 8px 0 rgba(50, 60, 72, 0.1);
+}
+
+.goodsImgNone {
+  opacity: 0.5;
+}
+
+.goodsName {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-top: 15px;
+  margin-bottom: 8px;
+}
+
+.goodsPrise {
+  font-weight: 900;
+  font-size: 24px;
+  line-height: 1.2;
+  margin-top: 8px;
+}
+
+.goodsSubPrise {
+  font-weight: 600;
+  font-size: 12px;
+  margin-left: 8px;
+}
diff --git a/src/app/components/productList/index.jsx b/src/app/components/productList/index.jsx
@@ -0,0 +1,45 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import style from './index.module.css';
+import ProductItem from '../../components/productCard';
+
+const ratingComponent = ({ isFilled }) => {
+  return <div className={isFilled ? 'starFill' : 'none'} />;
+};
+
+class ProductList extends PureComponent {
+  get productItems() {
+    return this.props.products
+      .map((product) =>
+        <li key={product.id}>
+          <ProductItem
+            key={product.id}
+            isInStock={product.isInStock}
+            img={product.img}
+            title={product.title}
+            price={product.price}
+            subPriceContent={product.subPriceContent}
+            maxRating={product.maxRating}
+            rating={product.rating}
+            ratingComponent={ratingComponent}
+          />
+        </li>
+      );
+  }
+
+  render() {
+    return (
+      <ul className={ classnames(style.list) }>
+        {this.productItems}
+      </ul>
+    )
+  }
+}
+
+ProductList.propTypes = {
+  products: PropTypes.array
+}
+
+export default ProductList;
diff --git a/src/app/components/productList/index.module.css b/src/app/components/productList/index.module.css
@@ -0,0 +1,5 @@
+.list {
+  padding: 0;
+  list-style: none;
+  columns: 3;
+}
diff --git a/src/app/containers/products/index.js b/src/app/containers/products/index.js
@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux'
+
+import ProductList from '../../components/productList/index';
+import EmptyProducts from '../../components/emptyProducts/index';
+import { visibleProductsSelector } from '../../store/selectors';
+
+class Products extends PureComponent {
+  render() {
+    if(this.props.products.length > 0) {
+      return (<ProductList products={ this.props.products }/>)
+    }
+
+    return (<EmptyProducts />)
+  }
+};
+
+const mapStateToProps = function(state) {
+  return {
+    products: visibleProductsSelector(state)
+  }
+}
+
+export default connect(mapStateToProps)(Products);