refactored sections

front-ui/app/components/shared/sectionsListComponent.js

@@ -1,65 +1,49 @@
 var React = require('react'),
     SectionCollection = require('../../models/sectionCollection'),
     Section = require('../../models/section'),
-    Backbone = require('backbone');
-
-var Navigation = require('react-router').Navigation;
+    Backbone = require('backbone'),
+    NavigationStore = require('../../stores/navigationStore'),
+    SectionStore = require('../../stores/sectionStore'),
+    SectionActions = require('../../actions/sectionActions'),
+    NavigationActions = require('../../actions/navigationActions');
 
 Backbone.$ = $;
 
 var SectionsListComponent = React.createClass({
-  mixins : [Navigation],
-    getInitialState: function() {
-      return {
-        sections : [],
-    hoveredSection : ''
-      };
+
+    _onChange: function () {
+      if (this.isMounted()) {
+        this.setState(SectionStore.getState());
+      }
     },
+  
+    getInitialState: function() {
+      return SectionStore.getState();
+    },
+
     componentDidMount: function() {
-      var sections = new SectionCollection();
-      sections.fetch({success: function() {
-        console.log('Loaded sections:' , sections);
-        if(this.isMounted()) {
-          this.setState({
-            sections: sections.models
-          });
-        }
-
-
-      }.bind(this)});
+      SectionStore.addChangeListener(this._onChange);
+      SectionActions.loadSections();
     },
     onMouseOver: function(section) {
-      //console.log('mouse over!', section);
-
-      this.setState({
-        hoveredSection: section.get('id')
-      });
+      SectionActions.setSectionHover(section);
+    
     },
     onMouseOut: function() {
-      this.setState({
-        hoveredSection : ''
-      });  
+      SectionActions.unsetSectionHover();      
     },
     onSectionClick: function(section) {
-      //alert('clicked on section:'+ section.get('name'));
-      this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
-      this.setState({
-        hoveredSection : ''
-      });  
-
+      NavigationActions.goToSection(section);
       return false;
     },
     onCategoryClick: function(category, section) {
-
-      this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
-      this.setState({
-        hoveredSection: ''
-      });
-      console.log('category', category.id);
+      NavigationActions.goToCategory(category, section);    
       return false;
     },
     onSubcategoryClick: function(subcategory) {
-
+      // implement in navigation actions
+      // and call 
+      // when ready
       return false;
     },
     render: function() {
@@ -82,7 +66,7 @@ var SectionsListComponent = React.createClass({
                                                          </a>
                                                          <div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"}  >
 
-                                                         <ul onMouseLeave={self.onMouseOut.bind(self)}  >
+                                                         <ul onMouseLeave={self.onMouseOut}  >
                                                          {section.get('categories').map(function(category) {
                                                                                                              return (
                                                                                                                <li key={category.id}>