101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
var React = require('react'),
|
|
Router = require('react-router'),
|
|
Category = require('../../models/category'),
|
|
Section = require('../../models/section'),
|
|
ItemCollection = require('../../models/itemCollection'),
|
|
ItemActions = require('../../actions/itemActions.js'),
|
|
CategoryActions = require('../../actions/categoryActions.js'),
|
|
CategoryStore = require('../../stores/categoryStore'),
|
|
ItemStore = require('../../stores/itemStore'),
|
|
NavigationStore = require('../../stores/navigationStore'),
|
|
ItemList = require('../items/itemList'),
|
|
NavigationActions = require('../../actions/navigationActions');
|
|
|
|
var ByCategory = React.createClass({
|
|
mixins: [Router.State],
|
|
getInitialState: function() {
|
|
var category = new Category();
|
|
var items = new ItemCollection();
|
|
return {
|
|
category: category,
|
|
items: items
|
|
};
|
|
},
|
|
onFCClick: function(fc, fcv) {
|
|
|
|
alert(fc.field_name);
|
|
var q = {};
|
|
q[fc.field_name] = fcv.filter_value;
|
|
// TODO: fix this, clean this up
|
|
var s = new Section({name: 'meho'});
|
|
var c = this.state.category;
|
|
NavigationActions.goToCategory({id: c.get('id'), name: c.get('name')}, s, q)
|
|
},
|
|
render: function() {
|
|
var self = this;
|
|
return (
|
|
<div>
|
|
<div className='col-md-2'>
|
|
<div className='h4'>{this.state.category.get('name')}</div>
|
|
<div>Podkategorije</div>
|
|
<ul>
|
|
{(this.state.category.get('sub_categories') || []).map(function(sc) {
|
|
return (<li> <a>{sc.name}</a></li>)
|
|
})}
|
|
</ul>
|
|
|
|
{this.state.category.get('filter_criterias').map(function(fc) {
|
|
return (<div>
|
|
|
|
<div className='h4'>{fc.title}</div>
|
|
<ul>
|
|
{fc.filter_criteria_values.map(function(fcv) {
|
|
return (<li>
|
|
<a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
|
|
</li>)
|
|
})}
|
|
</ul>
|
|
</div>)
|
|
})}
|
|
</div>
|
|
|
|
<div className='col-md-10'>
|
|
|
|
<h3> Browse products by category : {this.state.category.get('name')}</h3>
|
|
Number of items in this category: {this.state.items.length}
|
|
<div>need to filter brand: {this.getQuery().brand}</div>
|
|
<ItemList items={this.state.items} />
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
componentWillReceiveProps: function() {
|
|
var categoryId = this.getParams().id;
|
|
ItemActions.loadByCategory(categoryId);
|
|
CategoryActions.loadCategoryDetails(categoryId);
|
|
},
|
|
componentDidMount: function() {
|
|
var categoryId = this.getParams().id;
|
|
ItemActions.loadByCategory(categoryId);
|
|
CategoryActions.loadCategoryDetails(categoryId);
|
|
|
|
ItemStore.addChangeListener(this._onChange);
|
|
CategoryStore.addChangeListener(this._onChange);
|
|
},
|
|
componentWillUnmount: function() {
|
|
ItemStore.removeChangeListener(this._onChange);
|
|
CategoryStore.removeChangeListener(this._onChange);
|
|
},
|
|
_onChange: function() {
|
|
if(this.isMounted()) {
|
|
this.setState({
|
|
items: ItemStore.getItemsForCategory(),
|
|
category: CategoryStore.getCategoryDetails()
|
|
});
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
module.exports = ByCategory;
|