refactored sections

front-ui/README.md

@@ -1,6 +1,6 @@
 # Ribica front office
 
-Front end shop-a (javascript) 
+Front end of the shop (javascript) 
 
 All the code is in the ``app`` folder. This structure will evolve over time. 
 
@@ -12,3 +12,11 @@ All the code is in the ``app`` folder. This structure will evolve over time.
 
 Visit ``http://localhost:3001/index.html``
 
+# Few flux guidelines
+
+* State is always stored in the store and only synced with component as near to the top as it makes locigal sense
+* Stores are read only - they don't allow state changes directly but implement listeners that change state when dispacher tells them
+* Stores inform components about changes in state through change event
+* Stores fetch models - components never do this but get them from the props in most cases, or from the state in some cases (top components)
+* Navigation goes through navigation store and only navigation store accesses the router
+

front-ui/app/actions/navigationActions.js

@@ -11,7 +11,32 @@ var NavigationActions = {
       actionType: NavigationConstants.CHANGE_URL,
       url: '/artikal/' + item.get('id') +'/' + item.get('name')
     });
-  }
+  },
+
+  goToSection: function(section) {
+   console.log("Going to item details");
+    AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: '/sekcija/'+ section.get('id') + '/' + section.get('name')
+    });
+  },
+
+  goToCategory: function(category,section) {
+  console.log("Going to item details");
+    AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: '/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name
+    });
+  },
+
+  goToSubCategory: function(subCategory) {
+   // TODO: implement when ready
+    AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: '/'
+    });
+  },
+
 
 };
 

front-ui/app/actions/sectionActions.js

@@ -0,0 +1,29 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var SectionConstants = require('../constants/sectionConstants');
+
+// Define action methods
+var SectionActions = {
+
+  loadSections: function() {
+    AppDispatcher.handleAction({
+      actionType: SectionConstants.LOAD_SECTIONS
+    })
+  },
+
+
+  setSectionHover: function(section) {
+    AppDispatcher.handleAction({
+      actionType: SectionConstants.SET_SECTION_HOVER,
+      section: section
+    })
+  },
+
+  unsetSectionHover: function() {
+    AppDispatcher.handleAction({
+      actionType: SectionConstants.UNSET_SECTION_HOVER
+    })
+  }
+
+};
+
+module.exports = SectionActions;

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');
+    Backbone = require('backbone'),
-
+    NavigationStore = require('../../stores/navigationStore'),
-var Navigation = require('react-router').Navigation;
+    SectionStore = require('../../stores/sectionStore'),
+    SectionActions = require('../../actions/sectionActions'),
+    NavigationActions = require('../../actions/navigationActions');
 
 Backbone.$ = $;
 
 var SectionsListComponent = React.createClass({
-  mixins : [Navigation],
+
-    getInitialState: function() {
+    _onChange: function () {
-      return {
+      if (this.isMounted()) {
-        sections : [],
+        this.setState(SectionStore.getState());
-    hoveredSection : ''
+      }
-      };
     },
+  
+    getInitialState: function() {
+      return SectionStore.getState();
+    },
+
     componentDidMount: function() {
-      var sections = new SectionCollection();
+      SectionStore.addChangeListener(this._onChange);
-      sections.fetch({success: function() {
+      SectionActions.loadSections();
-        console.log('Loaded sections:' , sections);
-        if(this.isMounted()) {
-          this.setState({
-            sections: sections.models
-          });
-        }
-
-
-      }.bind(this)});
     },
     onMouseOver: function(section) {
-      //console.log('mouse over!', section);
+      SectionActions.setSectionHover(section);
-
+    
-      this.setState({
-        hoveredSection: section.get('id')
-      });
     },
     onMouseOut: function() {
-      this.setState({
+      SectionActions.unsetSectionHover();      
-        hoveredSection : ''
-      });  
     },
     onSectionClick: function(section) {
-      //alert('clicked on section:'+ section.get('name'));
+      NavigationActions.goToSection(section);
-      this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
-      this.setState({
-        hoveredSection : ''
-      });  
-
       return false;
     },
     onCategoryClick: function(category, section) {
-
+      NavigationActions.goToCategory(category, section);    
-      this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
-      this.setState({
-        hoveredSection: ''
-      });
-      console.log('category', category.id);
       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}>

front-ui/app/constants/navigationConstants.js

@@ -2,5 +2,5 @@ var keyMirror = require('react/lib/keyMirror');
 
 // Define action constants
 module.exports = keyMirror({
-  CHANGE_URL: null
+  CHANGE_URL: null,
 });

front-ui/app/constants/sectionConstants.js

@@ -0,0 +1,8 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+  LOAD_SECTIONS: null,
+  SET_SECTION_HOVER: null,
+  UNSET_SECTION_HOVER: null
+});

front-ui/app/stores/sectionStore.js

@@ -0,0 +1,89 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var SectionCollection = require('../models/sectionCollection');
+var SectionConstants = require('../constants/sectionConstants');
+var _ = require('underscore');
+
+
+var sectionState = {
+        sections : [],
+    hoveredSection : ''
+};
+
+
+var loadSections = function() { 
+      var sections = new SectionCollection();
+      sections.fetch({success: function() {
+        sectionState.sections = sections.models;
+        // change will be called automatically when
+        // action is run but we need to emit it again
+        // when the data arive 
+        // it's a bit "unfluxy" but convenient.
+        // "true philosophy" would be to run another "data arrived" action
+        SectionStore.emitChange(); 
+      }});
+};
+
+var setHovered  = function(id) {
+  sectionState.hoveredSection = id;
+}
+
+
+// Extend SectionStore with EventEmitter to add eventing capabilities
+var SectionStore = _.extend({}, EventEmitter.prototype, {
+
+  // Return Single Item With Details 
+  getState: function() {
+    return sectionState;
+  },
+
+  // Emit Change event
+  emitChange: function() {
+    console.log("Emmiting Section 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) {
+
+    // Respond to SELECT_ITEM action
+    case SectionConstants.LOAD_SECTIONS:
+      loadSections();      
+      break;
+
+    case SectionConstants.SET_SECTION_HOVER:
+      setHovered(action.section.get('id'));
+      break;
+
+    case SectionConstants.UNSET_SECTION_HOVER:
+      setHovered('');
+      break;
+
+    default:
+      return true;
+  }
+
+  // If action was responded to, emit change event
+  SectionStore.emitChange();
+  return true;
+
+});
+
+module.exports = SectionStore;