From 4e0f3ecee28162d0ca17b67a79d0652ae20bd3d5 Mon Sep 17 00:00:00 2001 From: Senad Uka Date: Thu, 5 Feb 2015 07:05:06 +0100 Subject: [PATCH] you can now play with number of items to add --- front-ui/app/actions/cartActions.js | 29 ++++++ front-ui/app/components/cart/addToCart.js | 35 +++++--- .../components/items/itemWithDetailsPage.js | 2 +- front-ui/app/components/items/traits.js | 4 +- front-ui/app/constants/cartConstants.js | 10 +++ front-ui/app/css/cart.css | 2 +- front-ui/app/stores/cartStore.js | 90 +++++++++++++++++++ 7 files changed, 156 insertions(+), 16 deletions(-) create mode 100644 front-ui/app/actions/cartActions.js create mode 100644 front-ui/app/constants/cartConstants.js create mode 100644 front-ui/app/stores/cartStore.js diff --git a/front-ui/app/actions/cartActions.js b/front-ui/app/actions/cartActions.js new file mode 100644 index 0000000..cfc8b44 --- /dev/null +++ b/front-ui/app/actions/cartActions.js @@ -0,0 +1,29 @@ +var AppDispatcher = require('../dispatcher/appDispatcher'); +var CartConstants = require('../constants/cartConstants'); + +// Define action methods +var CartActions = { + + load: function() { + AppDispatcher.handleAction({ + actionType: CartConstants.LOAD + }); + }, + + + addItem: function(itemId) { + AppDispatcher.handleAction({ + actionType: CartConstants.ADD_ITEM, + itemId: itemId + }); + }, + + takeItemOut: function(itemId) { + AppDispatcher.handleAction({ + actionType: CartConstants.TAKE_ITEM_OUT, + itemId: itemId + }); + } +}; + +module.exports = CartActions; \ No newline at end of file diff --git a/front-ui/app/components/cart/addToCart.js b/front-ui/app/components/cart/addToCart.js index 224e4d7..e3b7fd6 100644 --- a/front-ui/app/components/cart/addToCart.js +++ b/front-ui/app/components/cart/addToCart.js @@ -1,40 +1,51 @@ var React = require('react'); +var CartStore = require('../../stores/cartStore.js'); +var CartActions = require('../../actions/cartActions.js'); + +var countStyle = { + width: '100%' +}; + var AddToCart = React.createClass({ render: function() { return (
-
-
-
-
+
+
+
+
); }, // Add change listeners to stores componentDidMount: function() { - /*ItemActions.loadFrontPageItems(); - ItemStore.addChangeListener(this._onChange); */ + CartActions.load(); + CartStore.addChangeListener(this._onChange); }, getInitialState: function() { - return { - //items: ItemStore.getItems() - } + return CartStore.getStateFor(this.props.itemId) }, _onChange: function () { if (this.isMounted()) { - /* this.setState({ - items: ItemStore.getItems() - }); */ + this.setState(CartStore.getStateFor(this.props.itemId)); } }, + + _onIncreaseClick: function () { + CartActions.addItem(this.props.itemId); + }, + + _onDecreaseClick: function () { + CartActions.takeItemOut(this.props.itemId); + } }); module.exports = AddToCart; diff --git a/front-ui/app/components/items/itemWithDetailsPage.js b/front-ui/app/components/items/itemWithDetailsPage.js index 3d314c5..2d0098d 100644 --- a/front-ui/app/components/items/itemWithDetailsPage.js +++ b/front-ui/app/components/items/itemWithDetailsPage.js @@ -22,7 +22,7 @@ var ItemWithDetailsPage = React.createClass({ onClickLeft={this.onClickLeft} onClickRight={this.onClickRight} onSelectImage={this.onSelectImage} /> - + diff --git a/front-ui/app/components/items/traits.js b/front-ui/app/components/items/traits.js index 8d9d899..4f28b48 100644 --- a/front-ui/app/components/items/traits.js +++ b/front-ui/app/components/items/traits.js @@ -8,11 +8,11 @@ var Traits = React.createClass({ for(var traitKey in traits ) { if(traits.hasOwnProperty(traitKey)) { var traitValue = this.props.traits[traitKey]; - traitsPresentation.push(
{traitKey}: {traitValue}
); + traitsPresentation.push(
{traitKey}: {traitValue}
); } } - console.log(traitsPresentation); + return (
diff --git a/front-ui/app/constants/cartConstants.js b/front-ui/app/constants/cartConstants.js new file mode 100644 index 0000000..c6a50d9 --- /dev/null +++ b/front-ui/app/constants/cartConstants.js @@ -0,0 +1,10 @@ +var keyMirror = require('react/lib/keyMirror'); + +// Define action constants +module.exports = keyMirror({ + LOAD: null, + ADD_ITEM: null, + // because removeItem can be used to completely remove item + // and not just decrease count by 1 + TAKE_ITEM_OUT: null +}); diff --git a/front-ui/app/css/cart.css b/front-ui/app/css/cart.css index 5d5d02d..e7c700e 100644 --- a/front-ui/app/css/cart.css +++ b/front-ui/app/css/cart.css @@ -1,3 +1,3 @@ .add-to-cart { - padding-top: 20px; + padding-top: 20px; } \ No newline at end of file diff --git a/front-ui/app/stores/cartStore.js b/front-ui/app/stores/cartStore.js new file mode 100644 index 0000000..bbc0d04 --- /dev/null +++ b/front-ui/app/stores/cartStore.js @@ -0,0 +1,90 @@ +var AppDispatcher = require('../dispatcher/appDispatcher'); +var EventEmitter = require('events').EventEmitter; +var CartConstants = require('../constants/cartConstants'); +var _ = require('underscore'); + +var states = { +} + + +var loadCart = function() { + +}; + +var addItem = function(itemId) { + // TODO: push state to server side + var state = states[itemId] || { count: 0 }; + state.count++; + states[itemId] = state; +}; + +var takeItemOut = function(itemId) { + // TODO: push state to server side + var state = states[itemId] || { count: 0 }; + if (state.count > 0) { + state.count--; + } + states[itemId] = state; +}; + + + + +// Extend CartStore with EventEmitter to add eventing capabilities +var CartStore = _.extend({}, EventEmitter.prototype, { + + getStateFor: function(itemId) { + // TODO: get from server side ? + var state = states[itemId] || { count: 0 } + return state + }, + + // Emit Change event + emitChange: function() { + console.log("Emitting change!"); + this.emit('change'); + }, + + // Add change listener + addChangeListener: function(callback) { + this.on('change', callback); + }, + + // Remove change listener + removeChangeListener: function(callback) { + this.removeListener('change', callback); + } + +}); + + +// Register callback with AppDispatcher +AppDispatcher.register(function(payload) { + var action = payload.action; + var text; + + switch (action.actionType) { + + case CartConstants.LOAD: + loadCart(); + break; + + case CartConstants.ADD_ITEM: + addItem(action.itemId); + break; + + case CartConstants.TAKE_ITEM_OUT: + takeItemOut(action.itemId); + break; + + default: + return true; + } + + // If action was responded to, emit change event + CartStore.emitChange(); + return true; + +}); + +module.exports = CartStore;