Add to cart back

client/src/components/Product_card/index.js

@@ -1,68 +1,71 @@
-
 import React, { Component } from 'react'
 import './style.css'
-import axios from 'axios';
+import axios from 'axios'
 import { Link } from 'react-router-dom'
 
-
 class ProductCard extends React.Component {
   state = {
-
     products: [],
-    loading:true,
+    loading: true,
+    path1:"/shop"
   }
-  
+
   componentDidMount() {
-    if(this.props.match.params.id)
-    {
-    axios.get(`/shop/${this.props.match.params.id}`)
-    .then( ({data}) => {    
-        this.setState({products:data,loading:false})
-    })}
-    else{
-      axios.get("/shop")
-      .then( ({data}) => {
-        this.setState({products:data,loading:false})
-
+    this.setState({path1:this.props.path})
+    if (this.props.match.params.id) {
+      axios.get(`/shop/${this.props.match.params.id}`).then(({ data }) => {
+        this.setState({ products: data, loading: false })
+      })
+    } else {
+      axios.get('/shop').then(({ data }) => {
+        this.setState({ products: data, loading: false })
       })
     }
   }
-  
-  searchedProducts = (products)=>{
-this.setState({products:products,loading:false})
+
+  searchedProducts = products => {
+    this.setState({ products: products, loading: false })
   }
 
-  render () {
-  const {products,loading,searchedProducts} = this.state
-    const myProducts = this.props.resultAfterSerch ? this.props.resultAfterSerch:products
+  render() {
+    const { products, loading, searchedProducts } = this.state
+    const myProducts = this.props.resultAfterSerch
+      ? this.props.resultAfterSerch
+      : products
     return (
       <>
-      {!loading ? myProducts.length>0 ?(
-
-myProducts.map(e=>(
-  <Link  to={ '/product/' + e.id }><div className="cards">
-  <div className="product-card-back" >
-      <div className="product-card" >
-      <img className="product-img" src={e.img} alt="product-img"/>
-      <p className="product-name">{e.name}</p>
-      <p className="product-price">₪ {e.price}</p>
-    </div>
-  </div>
-  </div>
-  </Link>
-        ))) : (<h1>There is no products</h1>
-      ):(
-        <img
-        className="loading"
-        src="https://media1.tenor.com/images/556e9ff845b7dd0c62dcdbbb00babb4b/tenor.gif?itemid=5300368"
-        alt="loading"
-      />
-
-      )}
-    </>
+        {!loading ? (
+          myProducts.length > 0 ? (
+            myProducts.map(e => (
+              <Link to={'/product/' + e.id + this.state.path1} key = {e.id} >
+                <div className="cards">
+                  <div className="product-card-back">
+                    <div className="product-card">
+                      <img
+                        className="product-img"
+                        src={e.img}
+                        alt="product-img"
+                      />
+                      <p className="product-name">{e.name}</p>
+                      <p className="product-price">₪ {e.price}</p>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))
+          ) : (
+            <h1>There is no products</h1>
+          )
+        ) : (
+          <img
+            className="loading"
+            src="https://media1.tenor.com/images/556e9ff845b7dd0c62dcdbbb00babb4b/tenor.gif?itemid=5300368"
+            alt="loading"
+          />
+        )}
+      </>
     )
   }
 }
 
 export default ProductCard
-

client/src/components/Product_page/Add_quantity_cart/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
-import axios from 'axios'
 import './style.css'
+import axios from 'axios'
+import swal from 'sweetalert'
 
 class AddQuantityCart extends Component {
   state = {
@@ -16,9 +17,22 @@ class AddQuantityCart extends Component {
     axios
       .post('/add-to-cart', productInfo)
       .then(response => {
-        console.log(response, 'done, added to cart')
+        swal({
+          title: 'added to cart',
+          icon: 'success',
+          button: 'Continue shoping'
+        }).then(res => {
+          window.location.href = `${this.props.prePath}`
+        })
       })
       .catch(error => {
+        swal({
+          title: 'err add to cart',
+          icon: 'error',
+          button: 'return to shoping'
+        }).then(res => {
+          window.location.href = `${this.props.prePath}`
+        })
         console.log(error, 'components/Product_page/Add_quantity_cart')
       })
   }

client/src/components/Product_page/index.js

@@ -5,17 +5,25 @@ import ProductInfo from '../Product_page/product_info'
 import AddQuantityCart from '../Product_page/Add_quantity_cart'
 
 class ProductPage extends Component {
-  state = {price:0}
+  state = { price: 0 }
 
-  setPrice=(newPrice)=>{
-    this.setState({price:newPrice})
+  setPrice = newPrice => {
+    this.setState({ price: newPrice })
   }
-  render () {
+  render() {
     return (
       <>
         <NavBar />
-        <ProductInfo id={this.props.match.params.id} price={this.state.price} setPrice={this.setPrice} />
-        <AddQuantityCart id={this.props.match.params.id } price={this.state.price} />
+        <ProductInfo
+          id={this.props.match.params.id}
+          price={this.state.price}
+          setPrice={this.setPrice}
+        />
+        <AddQuantityCart
+          id={this.props.match.params.id}
+          prePath={this.props.location.pathname.split(this.props.match.url)[1]}
+          price={this.state.price}
+        />
       </>
     )
   }

client/src/components/Shop/index.js

@@ -38,7 +38,7 @@ class Shop extends Component {
           trigger={this.state.afterSearchTrigger}
           serchArray={this.searchSetArray}
         />
-        <ProductCard resultAfterSerch={resultProducts} {...this.props} />
+        <ProductCard resultAfterSerch={resultProducts} path={this.props.location.pathname} {...this.props} />
       </div>
     )
   }

src/controller/add_to_cart.js

@@ -1,11 +1,14 @@
 const addToCart = require('../database/queries/add_to_cart')
 
-exports.post = (req, res) => {
+exports.post = (req, res, next) => {
   const { productID, quantity, price } = req.body
   const userID = 1 // user id static we will get user id from cookies
   addToCart(userID, productID, quantity, price)
     .then(result => {
       res.send(JSON.stringify({ product: result }))
     })
-    .catch(err => console.log(err, 'add_to_cart.js'))
+    .catch(err => {
+      console.log(err, 'controller/add_to_cart.js')
+      next(err)
+    })
 }