68 lines
2.7 KiB
JavaScript
68 lines
2.7 KiB
JavaScript
import React from 'react';
|
||
|
||
export default class ProductCard extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
error: null,
|
||
isLoaded: false,
|
||
items: []
|
||
};
|
||
}
|
||
componentDidMount() {
|
||
fetch('http://localhost:8081/api/product/findAll')
|
||
.then(response => response.json())
|
||
.then(json => {
|
||
this.setState({
|
||
isLoaded: true,
|
||
items: json.data,
|
||
})
|
||
})
|
||
}
|
||
addRow=(e)=>{
|
||
var obj={
|
||
id: e.target.dataset.id,
|
||
price: e.target.dataset.price,
|
||
name: e.target.dataset.name,
|
||
img: e.target.dataset.img
|
||
}
|
||
|
||
alert(obj.id+" "+obj.name+" "+" $"+obj.price+" "+obj.img)
|
||
}
|
||
render() {
|
||
var { isLoaded, items } = this.state;
|
||
if (!isLoaded)
|
||
return <p>Loading.......</p>
|
||
else {
|
||
return (
|
||
<div className="row">
|
||
{items.map(items => (
|
||
<div className="col-md-3 col-sm-4 col-6" key={items.id}>
|
||
<figure className="card card-product">
|
||
<div className="img-wrap">
|
||
<img src={"/img/" + items.img} alt="hello" />
|
||
{/* <a className="btn-overlay" href="#id"><i class="fa fa-search-plus" ></i> Quick view</a> */}
|
||
</div>
|
||
<figcaption className="info-wrap">
|
||
<h6 className="title text-dots"><a href="www.facebook.com">{items.name}</a></h6>
|
||
<div className="action-wrap">
|
||
{/* <button type="button" className="btn btn-primary btn-sm float-right"> Order </button> */}
|
||
<button type="button" className="btn btn-primary btn-sm float-right"
|
||
onClick={this.addRow} data-price={items.price} data-name={items.name} data-id={items.id} data-img={items.img}>Order </button>
|
||
<div className="price-wrap h5">
|
||
<span className="price-new">
|
||
$ {items.price}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
))}
|
||
|
||
</div>
|
||
|
||
)
|
||
}
|
||
}
|
||
} |