#4, добавила отображение товаров

src/components/Product/Product.js

+import React from "react";
+import {Button, Card, CardBody, CardImg, CardText, Col} from "reactstrap";
+import {NavLink} from "react-router-dom";
+import PropTypes from "prop-types";
+import config from "../../config";
+
+const Product = (props) => {
+  return (
+    <Col md={5} className='mb-3  p-3'>
+      <Card className='p-3 h-100'>
+        <CardImg top className='w-80' src={config.apiURL + '/uploads/' + props.image} alt="Card image cap" />
+        <CardBody>
+          <h5 className='mb-0 font-weight-bold'>{props.title}</h5>
+          <CardText> price: {props.price}</CardText>
+          <Button tag={NavLink} to={/products/ + props.id}>Show product</Button>
+        </CardBody>
+      </Card>
+    </Col>
+  );
+};
+
+Product.propTypes = {
+  id: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired
+};
+
+export default Product;

src/components/UI/Toolbar/Menus/UserMenu.js

@@ -12,7 +12,7 @@ const UserMenu = ({user, logout}) => {
             <NavItem>
                 <NavLink tag={RouterNavLink} to="/products/new" exact>Create product</NavLink>
             </NavItem>
-            <UncontrolledDropdown className='ml-5' nav navbar inNavbar>
+            <UncontrolledDropdown className='ml-5'>
                 <DropdownToggle nav caret>
                     Hello, {user.displayName}!
                 </DropdownToggle>

src/containers/App.js

 import React, {Component, Fragment} from 'react';
-import Toolbar from "../components/UI/Toolbar/Toolbar";
 import {Container} from "reactstrap";
 import {Route, Switch, withRouter} from "react-router-dom";
-import Register from "./Register/Register";
-import Login from "./Login/Login";
 import {connect} from "react-redux";
 import {NotificationContainer} from "react-notifications";
-import {logoutUser} from "../store/actions/usersActions";
+import Toolbar from "../components/UI/Toolbar/Toolbar";
+import Products from "./Products/Products";
+import Register from "./Register/Register";
+import Login from "./Login/Login";
 import AddProductForm from "./AddProductForm/AddProductForm";
+import {logoutUser} from "../store/actions/usersActions";
+
 
 class App extends Component {
     render() {
@@ -23,6 +25,9 @@ class App extends Component {
                 <main>
                     <Container className="mt-5">
                         <Switch>
+                            <Route path="/" exact component={Products} />
+                            <Route path="/products" exact component={Products} />
+                            <Route path="/category/:id" exact component={Products} />
                             <Route path="/register" exact component={Register} />
                             <Route path="/login" exact component={Login} />
                             <Route path="/products/new" exact component={AddProductForm} />

src/App.test.js → src/containers/App.test.js

 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './containers/App';
+import App from './App';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);

src/containers/Products/Products.css

+.Products{
+    display: flex;
+}
+
+.Products_categories{
+    width: 30%;
+}
+.Products_items{
+    width: 70%;
+}
\ No newline at end of file

src/containers/Products/Products.js

+import React, {Component} from "react";
+import {Nav, NavItem, Row} from "reactstrap";
+import {connect} from "react-redux";
+import {NavLink} from "react-router-dom";
+import './Products.css';
+import Product from "../../components/Product/Product";
+import {fetchCategories} from "../../store/actions/categoriesActions";
+import {fetchProducts} from "../../store/actions/productsActions";
+
+class Products extends Component {
+    componentDidMount() {
+        this.props.onFetchCategories();
+        this.props.fetchProducts(this.props.match.params.id)
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.match.params.id !== prevProps.match.params.id) {
+            this.props.fetchProducts(this.props.match.params.id)
+        }
+    };
+
+    render() {
+        return (
+            <div className='Products'>
+                <Nav navbar c vertical className='Products_categories'>
+                    <NavItem>
+                        <NavLink to='/'> All items</NavLink>
+                    </NavItem>
+                    {this.props.categories.map(category => {
+                        return (
+                            <NavItem key={category._id}>
+                                <NavLink to={'/category/' + category._id}>{category.title}</NavLink>
+                            </NavItem>)
+                    })}
+                </Nav>
+                <div className='Products_items'>
+                    <h3>
+                        Products:
+                    </h3>
+                    <Row>
+                        {this.props.products.length > 0 ? (
+                            this.props.products.map(product => {
+                                return (
+                                    <Product key={product._id} id={product._id} image={product.image}
+                                             title={product.title}
+                                             price={product.price}/>
+                                );
+                            })) : <h1>Nothing to see here</h1>
+                        }
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        categories: state.categories.categories,
+        products: state.products.products
+    }
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onFetchCategories: () => dispatch(fetchCategories()),
+        fetchProducts: (category) => dispatch(fetchProducts(category)),
+    }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Products);

src/store/actions/productsActions.js

@@ -44,18 +44,6 @@ export const fetchProducts = (category) => {
     };
 };
 
-export const getFullProduct = id => {
-    return dispatch => {
-        axios.get('/products/' + id)
-            .then(res => {
-                dispatch(getFullProductSuccess(res.data));
-            })
-            .catch(e => {
-                dispatch(fetchError(e));
-            })
-    };
-};
-
 
 export const createProduct = product => {
     return (dispatch, getState) => {
@@ -74,19 +62,3 @@ export const createProduct = product => {
 };
 
 
-export const deleteProduct = id => {
-    return (dispatch, getState) => {
-        const token = getState().users.user.token;
-        const headers = {Token: token};
-        console.log(headers)
-        axios.delete('/products/' + id, {headers})
-            .then(() => {
-                dispatch(push('/'));
-                NotificationManager.success("Deleted!");
-            })
-            .catch(e => {
-                dispatch(fetchError(e));
-            })
-    };
-
-};