old-ribica/front-ui/app/components/browsing/bySection.js

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;