Skip to content

Commit 69976c2

Browse files
ghost-code-ninjaghost-code-ninja
committed
Add onClickEvent to add product to wishlist
1 parent 65ab804 commit 69976c2

File tree

1 file changed

+108
-42
lines changed

1 file changed

+108
-42
lines changed

‎src/components/categories/CategoryProduct.js‎

Lines changed: 108 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,123 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22
import { connect } from 'react-redux'
33

4-
const CategoryProduct = (props) => {
4+
class CategoryProduct extends Component {
5+
state = { }
56

6-
// console.log("product props", props);
7-
// console.log(props.match.params.id[0])
7+
handleOnClick = (productId) => {
8+
console.log(productId)
9+
// this.props.addWishlist(productId)
10+
}
811

9-
let product = props.products.products.filter(product => product.id === props.match.params.id)[0]
10-
// console.log("product is", product)
1112

12-
let productColors = product ? product.attributes.colors.map(color =>
13-
<div key={color.color_id}>
14-
<li className="product-text">{color.color_name}</li>
15-
</div>
16-
) : null
17-
13+
render() {
1814

19-
return(
20-
<div className="main">
21-
<div className="product-main">
22-
<div className="product-flex">
23-
<div className="product col-5">
24-
<li className="product-image">{product ? <img src={ product.attributes.image } alt="product" ></img> : null}</li>
15+
let product = this.props.products.products.filter(product => product.id === this.props.match.params.id)[0]
16+
// console.log("product is", product)
17+
18+
let productColors = this.product ? this.product.attributes.colors.map(color =>
19+
<div key={color.color_id}>
20+
<li className="product-text">{color.color_name}</li>
21+
</div>
22+
) : null
23+
24+
return(
25+
<div className="main">
26+
<div className="product-main">
27+
<div className="product-flex">
28+
<div className="product col-5">
29+
<li className="product-image">{product ? <img src={ product.attributes.image } alt="product" ></img> : null}</li>
30+
</div>
2531
</div>
32+
33+
<div className="product-info col-7">
34+
<li className="product-text"> <b className="titlespacing">Product Name:</b> {product ? product.attributes.name : null}</li>
35+
<li className="product-text"><b className="titlespacing">Description:</b> {product ? product.attributes.description : null}</li>
36+
<li className="product-text"><b className="titlespacing">Item Number:</b> {product ? product.attributes.item_number : null}</li>
37+
38+
<br></br>
39+
<li className="product-text"><b className="titlespacing">Colors:</b> </li>
40+
{ productColors }
41+
42+
<br></br>
43+
<li className="product-text"><b className="titlespacing" >Price:</b> ${product ? product.attributes.price : null}</li>
44+
45+
<br></br>
46+
<br></br>
47+
48+
<button onClick={() => this.handleOnClick(`${product.attributes.id}`)} className="product-button">Add to Wish List</button>
49+
<br></br>
50+
</div>
2651
</div>
52+
</div>
53+
)
54+
}
55+
56+
}
57+
const mapStateToProps = state => {
58+
return {
59+
products: state.productReducer,
60+
};
61+
}
62+
63+
64+
export default connect(mapStateToProps)(CategoryProduct);
65+
66+
67+
68+
// export default CategoryProduct;
69+
70+
// const CategoryProduct = (props) => {
2771

28-
<div className="product-info col-7">
29-
<li className="product-text"> <b className="titlespacing">Product Name:</b> {product ? product.attributes.name : null}</li>
30-
<li className="product-text"><b className="titlespacing">Description:</b> {product ? product.attributes.description : null}</li>
31-
<li className="product-text"><b className="titlespacing">Item Number:</b> {product ? product.attributes.item_number : null}</li>
72+
// // console.log("product props", props);
73+
// // console.log(props.match.params.id[0])
3274

33-
<br></br>
34-
<li className="product-text"><b className="titlespacing">Colors:</b> </li>
35-
{ productColors }
75+
// let product = props.products.products.filter(product => product.id === props.match.params.id)[0]
76+
// // console.log("product is", product)
77+
78+
// let productColors = product ? product.attributes.colors.map(color =>
79+
// <div key={color.color_id}>
80+
// <li className="product-text">{color.color_name}</li>
81+
// </div>
82+
// ) : null
83+
84+
85+
// return(
86+
// <div className="main">
87+
// <div className="product-main">
88+
// <div className="product-flex">
89+
// <div className="product col-5">
90+
// <li className="product-image">{product ? <img src={ product.attributes.image } alt="product" ></img> : null}</li>
91+
// </div>
92+
// </div>
93+
94+
// <div className="product-info col-7">
95+
// <li className="product-text"> <b className="titlespacing">Product Name:</b> {product ? product.attributes.name : null}</li>
96+
// <li className="product-text"><b className="titlespacing">Description:</b> {product ? product.attributes.description : null}</li>
97+
// <li className="product-text"><b className="titlespacing">Item Number:</b> {product ? product.attributes.item_number : null}</li>
98+
99+
// <br></br>
100+
// <li className="product-text"><b className="titlespacing">Colors:</b> </li>
101+
// { productColors }
36102

37-
<br></br>
38-
<li className="product-text"><b className="titlespacing" >Price:</b> ${product ? product.attributes.price : null}</li>
103+
// <br></br>
104+
// <li className="product-text"><b className="titlespacing" >Price:</b> ${product ? product.attributes.price : null}</li>
39105

40-
<br></br>
41-
<br></br>
106+
// <br></br>
107+
// <br></br>
42108

43-
<button className="product-button">Add to Wish List</button>
44-
<br></br>
45-
</div>
46-
</div>
47-
</div>
48-
)
49-
}
109+
// <button onClick={this.handleOnClick} className="product-button">Add to Wish List</button>
110+
// <br></br>
111+
// </div>
112+
// </div>
113+
// </div>
114+
// )
115+
// }
50116

51-
const mapStateToProps = state => {
52-
return {
53-
products: state.productReducer,
54-
};
55-
}
117+
// const mapStateToProps = state => {
118+
// return {
119+
// products: state.productReducer,
120+
// };
121+
// }
56122

57-
export default connect(mapStateToProps)(CategoryProduct);
123+
// export default connect(mapStateToProps)(CategoryProduct);

0 commit comments

Comments
 (0)