61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
var React = require('react');
|
|
var CartStore = require('../../stores/cartStore.js');
|
|
var CartActions = require('../../actions/cartActions.js');
|
|
|
|
|
|
|
|
var buttonHolderStyle = {
|
|
display: 'inline-block'
|
|
};
|
|
|
|
var AddToCart = React.createClass({
|
|
|
|
render: function() {
|
|
|
|
return (
|
|
<div className="row-fluid add-to-cart">
|
|
<div className="span12">
|
|
<div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onIncreaseClick}>+</button></div>
|
|
<div style={buttonHolderStyle}><button className="btn"> { this.state.item.get('count') } </button></div>
|
|
<div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onDecreaseClick}>-</button></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
// Add change listeners to stores
|
|
componentDidMount: function() {
|
|
CartStore.addChangeListener(this._onChange);
|
|
CartActions.load();
|
|
},
|
|
|
|
|
|
getInitialState: function() {
|
|
var itemInCart = CartStore.getStateFor(this.props.itemId);
|
|
return { item: itemInCart }
|
|
},
|
|
|
|
|
|
_onChange: function () {
|
|
if (this.isMounted()) {
|
|
var item = CartStore.getStateFor(this.props.itemId);
|
|
this.setState({ item: item });
|
|
}
|
|
},
|
|
|
|
_onIncreaseClick: function () {
|
|
CartActions.addItem(this.props.itemId);
|
|
},
|
|
|
|
_onDecreaseClick: function () {
|
|
CartActions.takeItemOut(this.props.itemId);
|
|
},
|
|
|
|
componentWillUnmount: function () {
|
|
CartStore.removeChangeListener(this._onChange);
|
|
}
|
|
|
|
});
|
|
|
|
module.exports = AddToCart;
|