routing

package.json

@@ -4,12 +4,16 @@
   "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-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"

src/app/components/emptyProducts/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import styles from './index.module.css';
+import BaseComponent from '../baseComponent/index';
+
+class EmptyProducts extends BaseComponent {
+  render() {
+    return (
+      <div className={ classnames(styles.container) }>
+        <span className={ classnames(styles.emptyText) }>
+          Товары не найдены. Проверьте параметры фильтра.
+        </span>
+      </div>
+    );
+  }
+}
+
+export default EmptyProducts;

src/app/components/emptyProducts/index.module.css

@@ -0,0 +1,8 @@
+.container {
+  text-align: center;
+  padding: 24px 0;
+}
+.emptyText {
+  font-size: 1.4em;
+  font-weight: 700;
+}

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

@@ -1,17 +1,11 @@
 import React from 'react';
-import { connect } from 'react-redux'
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
+import style from './index.module.css';
 import ProductItem from '../../components/productCard';
 import BaseComponent from '../../components/baseComponent/index';
-import { filteredProductsSelector } from '../../store/selectors';
 
-const MAX_VISIBLE_PRODUCTS = 3;
-
-const listStyle = {
-  padding: 0,
-  listStyle: 'none',
-  columns: 3
-}
 
 const ratingComponent = ({ isFilled }) => {
   return <div className={isFilled ? 'starFill' : 'none'} />;
@@ -20,7 +14,6 @@ const ratingComponent = ({ isFilled }) => {
 class ProductList extends BaseComponent {
   get productItems() {
     return this.props.products
-      .slice(0, MAX_VISIBLE_PRODUCTS)
       .map((product) =>
         <li key={product.id}>
           <ProductItem
@@ -40,17 +33,15 @@ class ProductList extends BaseComponent {
 
   render() {
     return (
-      <ul style={ listStyle }>
+      <ul className={ classnames(style.list) }>
         {this.productItems}
       </ul>
     )
   }
-};
+}
 
-const mapStateToProps = function(state) {
-  return {
-    products: filteredProductsSelector(state)
-  }
+ProductList.propTypes = {
+  products: PropTypes.array
 }
 
-export default connect(mapStateToProps)(ProductList);
+export default ProductList;

src/app/components/productList/index.module.css

@@ -0,0 +1,5 @@
+.list {
+  padding: 0;
+  list-style: "none";
+  columns: 3;
+}

src/app/containers/products/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { connect } from 'react-redux'
+
+import ProductList from '../../components/productList/index';
+import BaseComponent from '../../components/baseComponent/index';
+import EmptyProducts from '../../components/emptyProducts/index';
+import { visibleProductsSelector } from '../../store/selectors';
+
+class Products extends BaseComponent {
+  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);

src/app/containers/productsPagination/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { connect } from 'react-redux'
+import { NavLink } from 'react-router-dom';
+import classnames from 'classnames';
+
+import styles from './index.module.css';
+import BaseComponent from '../../components/baseComponent/index';
+import { productsPageCountSelector } from '../../store/selectors';
+
+class ProductsPagination extends BaseComponent {
+
+  get paginationItems() {
+    return Array.from(Array(this.props.pageCount), (item, i) => i + 1)
+      .map((item) => {
+        return <NavLink
+          className={ classnames(styles.item) }
+          activeStyle={{
+            background: '#5695ED',
+            color: '#fff'
+          }}
+          key={item}
+          to={`/list/${item}`}>
+            {item}
+          </NavLink>
+      })
+  }
+
+  render() {
+    return (
+      <div className={ classnames(styles.container)}>
+        { this.paginationItems }
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    pageCount: productsPageCountSelector(state)
+  }
+}
+
+export default connect(mapStateToProps)(ProductsPagination);

src/app/containers/productsPagination/index.module.css

@@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.item {
+  margin: 0 2px;
+  padding: 4px 0;
+  width: 34px;
+  border: 1px solid #c5cfde;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  color: #7e8fa4;
+}
+
+.item.active {
+  background: red;
+}

src/app/routes/productPage/index.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import ProductList from '../../../app/containers/productList/index';
+import Products from '../../containers/products/index';
 import PageTitle from '../../../app/components/pageTitle/index';
 import UserFilters from '../../../app/containers/userFilters/index';
 import BaseComponent from '../../components/baseComponent/index';
+import ProductsPagination from '../../containers/productsPagination/index';
 import { getProducts } from '../../store/actionCreators';
 
 const rightBlockStyle = {
@@ -47,7 +48,8 @@ class ProductPage extends BaseComponent {
           </div>
 
           <div style={ centerBlockStyle }>
-            <ProductList/>
+            <Products/>
+            <ProductsPagination />
           </div>
 
           <div style={ leftBlockStyle }></div>