Skip to content

Commit 6bae9a3

Browse files
ghost-code-ninjaghost-code-ninja
committed
Change category product component back to functional component instead of class
1 parent 69976c2 commit 6bae9a3

File tree

1 file changed

+41
-109
lines changed

1 file changed

+41
-109
lines changed

‎src/components/categories/CategoryProduct.js‎

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

4-
class CategoryProduct extends Component {
5-
state = { }
64

7-
handleOnClick = (productId) => {
8-
console.log(productId)
9-
// this.props.addWishlist(productId)
10-
}
5+
const CategoryProduct = (props) => {
116

7+
// console.log("product props", props);
8+
// console.log(props.match.params.id[0])
129

13-
render() {
10+
let product = props.products.products.filter(product => product.id === props.match.params.id)[0]
11+
// console.log("product is", product)
1412

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>
31-
</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>
51-
</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) => {
71-
72-
// // console.log("product props", props);
73-
// // console.log(props.match.params.id[0])
74-
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
13+
let productColors = product ? product.attributes.colors.map(color =>
14+
<div key={color.color_id}>
15+
<li className="product-text">{color.color_name}</li>
16+
</div>
17+
) : null
8318

8419

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>
20+
return(
21+
<div className="main">
22+
<div className="product-main">
23+
<div className="product-flex">
24+
<div className="product col-5">
25+
<li className="product-image">{product ? <img src={ product.attributes.image } alt="product" ></img> : null}</li>
26+
</div>
27+
</div>
9328

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>
29+
<div className="product-info col-7">
30+
<li className="product-text"> <b className="titlespacing">Product Name:</b> {product ? product.attributes.name : null}</li>
31+
<li className="product-text"><b className="titlespacing">Description:</b> {product ? product.attributes.description : null}</li>
32+
<li className="product-text"><b className="titlespacing">Item Number:</b> {product ? product.attributes.item_number : null}</li>
9833

99-
// <br></br>
100-
// <li className="product-text"><b className="titlespacing">Colors:</b> </li>
101-
// { productColors }
34+
<br></br>
35+
<li className="product-text"><b className="titlespacing">Colors:</b> </li>
36+
{ productColors }
10237

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

106-
// <br></br>
107-
// <br></br>
108-
109-
// <button onClick={this.handleOnClick} className="product-button">Add to Wish List</button>
110-
// <br></br>
111-
// </div>
112-
// </div>
113-
// </div>
114-
// )
115-
// }
41+
<br></br>
42+
<br></br>
43+
</div>
44+
</div>
45+
</div>
46+
)
47+
}
11648

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

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

0 commit comments

Comments
 (0)