#5, добавила возможность просмотра одного товара, возможность удаления товаров

src/components/UI/Toolbar/Toolbar.js

@@ -13,7 +13,7 @@ const Toolbar = ({user, logout}) => {
   return (
     <Navbar color="dark" dark expand="md">
       <Container>
-        <NavbarBrand tag={RouterNavLink} to="/">Market</NavbarBrand>
+        <NavbarBrand tag={RouterNavLink} to="/">Some market</NavbarBrand>
 
         <Nav className="ml-auto" navbar>
           

src/containers/App.js

@@ -9,6 +9,8 @@ import Register from "./Register/Register";
 import Login from "./Login/Login";
 import AddProductForm from "./AddProductForm/AddProductForm";
 import {logoutUser} from "../store/actions/usersActions";
+import FullProduct from "./FullProduct/FullProduct";
+
 
 
 class App extends Component {
@@ -31,6 +33,7 @@ class App extends Component {
                             <Route path="/register" exact component={Register} />
                             <Route path="/login" exact component={Login} />
                             <Route path="/products/new" exact component={AddProductForm} />
+                            <Route path="/products/:id" exact component={FullProduct} />
                         </Switch>
                     </Container>
                 </main>

src/containers/FullProduct/FullProduct.js

+import React, {Component} from "react";
+import {connect} from "react-redux";
+import config from "../../config";
+import './FullProduct.css'
+import {Badge, Button} from "reactstrap";
+import {NavLink} from "react-router-dom";
+import {deleteProduct, getFullProduct} from "../../store/actions/productsActions";
+
+class FullProduct extends Component {
+
+    componentDidMount() {
+        this.props.getFullProduct(this.props.match.params.id)
+    }
+
+
+    render() {
+
+        return (
+            <>
+
+                {(this.props.fullProduct && this.props.fullProduct.author) ? (
+                    <>
+                        <img width="500" className='postImage'
+                             src={config.apiURL + '/uploads/' + this.props.fullProduct.image} alt=""/>
+                        <h2>product name: {this.props.fullProduct.title}</h2>
+                        <h5>price: {this.props.fullProduct.price} $</h5>
+                        <h5> category: {this.props.fullProduct.category.title}</h5>
+                        <h5> description: {this.props.fullProduct.description}</h5>
+                        <h6 className='mt-3'>author: {this.props.fullProduct.author.displayName}</h6>
+                        <h6> phone: {this.props.fullProduct.author.phone}</h6>
+
+                    </>
+                ) : null}
+
+                {(this.props.fullProduct && this.props.fullProduct.author && this.props.user && this.props.user.username === this.props.fullProduct.author.username) ? (
+                    <Button className='mt-4' color='danger'
+                            onClick={() => this.props.deleteProduct(this.props.match.params.id)}>Delete
+                        product</Button>) : null}
+            </>
+
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        fullProduct: state.products.fullProduct,
+        user: state.users.user
+    }
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        getFullProduct: (id) => dispatch(getFullProduct(id)),
+        deleteProduct: (id) => dispatch(deleteProduct(id))
+
+    }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FullProduct);

src/containers/Products/Products.css

 .Products{
     display: flex;
 }
-
 .Products_categories{
     width: 30%;
 }

src/containers/Products/Products.js

@@ -45,7 +45,7 @@ class Products extends Component {
                                              title={product.title}
                                              price={product.price}/>
                                 );
-                            })) : <h1>Nothing to see here</h1>
+                            })) : <h5> No products in this category</h5>
                         }
                     </Row>
                 </div>

src/store/actions/productsActions.js

@@ -44,6 +44,18 @@ 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) => {
@@ -62,3 +74,19 @@ 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));
+            })
+    };
+
+};