101 lines
4.3 KiB
JavaScript
101 lines
4.3 KiB
JavaScript
var React = require('react'),
|
|
Router = require('react-router'),
|
|
ItemActions = require('../../actions/itemActions.js'),
|
|
ItemStore = require('../../stores/itemStore'),
|
|
NavigationStore = require('../../stores/navigationStore'),
|
|
ItemList = require('../items/itemList'),
|
|
ItemCollection = require('../../models/itemCollection'),
|
|
SectionStore = require('../../stores/sectionStore'),
|
|
SectionActions = require('../../actions/sectionActions.js'),
|
|
NavigationActions = require('../../actions/navigationActions'),
|
|
Section = require('../../models/section'),
|
|
LinkBanner = require('../linkBanner/linkBanner'),
|
|
Category = require('../../models/category');
|
|
|
|
var BySection = React.createClass({
|
|
mixins: [Router.State],
|
|
getInitialState : function() {
|
|
return {
|
|
items: (new ItemCollection()),
|
|
section : (new Section())
|
|
};
|
|
},
|
|
render : function() {
|
|
var s ={ float: 'left'};
|
|
var self = this;
|
|
return ( <div>
|
|
|
|
<div className='col-md-2'>
|
|
Here goes section for refining search, by section
|
|
</div>
|
|
<div className='col-md-10'>
|
|
|
|
<LinkBanner locationName="section" locationId={Number(this.getParams().id)} />
|
|
<div className='h3'>
|
|
Najprodavanije u sekciji {this.state.section.get('name')}
|
|
</div>
|
|
<ItemList items={this.state.items} />
|
|
<div className='h3'>Kategorije</div>
|
|
<div>
|
|
{(this.state.section.get('categories') || []).map(function(category){
|
|
return (
|
|
<div style={s}>
|
|
|
|
<a onClick={self.onCategoryClick.bind(self, category, self.state.section)}>
|
|
|
|
<img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
|
|
<div>{category.name}</div>
|
|
</a>
|
|
<ul>
|
|
{category.sub_categories.map(function(sc) {
|
|
return (<li>{sc.name}</li>)
|
|
})}
|
|
</ul>
|
|
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
</div>
|
|
</div> )
|
|
},
|
|
onCategoryClick: function(category, section) {
|
|
NavigationActions.goToCategory(new Category(category), section);
|
|
|
|
},
|
|
componentWillReceiveProps: function(nextProps) {
|
|
var sectionId = this.getParams().id;
|
|
ItemActions.loadBestSellingItemsForSection(sectionId);
|
|
SectionActions.loadSectionDetails(sectionId);
|
|
},
|
|
componentDidMount: function() {
|
|
console.log('mounting....');
|
|
var sectionId = this.getParams().id;
|
|
ItemActions.loadBestSellingItemsForSection(sectionId);
|
|
SectionActions.loadSectionDetails(sectionId);
|
|
|
|
SectionStore.addChangeListener(this._onSectionChange);
|
|
ItemStore.addChangeListener(this._onChange);
|
|
},
|
|
componentWillUnmount: function() {
|
|
SectionStore.removeChangeListener(this._onSectionChange);
|
|
ItemStore.removeChangeListener(this._onChange);
|
|
},
|
|
_onSectionChange: function() {
|
|
if(this.isMounted()) {
|
|
this.setState({
|
|
section: SectionStore.getSectionDetails()
|
|
});
|
|
}
|
|
},
|
|
_onChange: function() {
|
|
if(this.isMounted()) {
|
|
console.log('items store changed! by section');
|
|
this.setState({items: ItemStore.getBestSellingForSection()});
|
|
}
|
|
}
|
|
});
|
|
|
|
module.exports = BySection;
|