Merge branch 'master' of https://github.com/senaduka/ribica

front-ui/app/actions/itemActions.js

@@ -0,0 +1,25 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var ItemConstants = require('../constants/itemConstants');
+
+// Define action methods
+var ItemActions = {
+
+  // select item
+  selectItem: function(item) {
+    AppDispatcher.handleAction({
+      actionType: ItemConstants.SELECT_ITEM,
+      item: item
+    })
+  },
+
+  loadFrontPageItems: function() {
+     AppDispatcher.handleAction({
+      actionType: ItemConstants.LOAD_FOR_FRONTPAGE
+    })
+  }
+
+
+
+};
+
+module.exports = ItemActions;

front-ui/app/components/allItems.js

@@ -0,0 +1,43 @@
+var React = require('react');
+var ItemList = require('./itemList');
+var ItemStore = require('../stores/itemStore.js');
+var ItemActions = require('../actions/itemActions.js');
+var ItemCollection = require('../models/itemCollection');
+
+
+var AllItems = React.createClass({
+
+    render: function() {  
+        if(this.state) { 
+        return (
+            <ItemList items={this.state.items} />
+        );
+    } 
+    else {
+        return (
+            <div> Not Loaded ! </div>
+        );
+
+    }
+    },
+
+    
+     // Add change listeners to stores
+    componentDidMount: function() {
+        ItemStore.addChangeListener(this._onChange);
+    },
+
+    _onChange: function () {
+      if (this.isMounted()) {
+        this.setState({
+            items: ItemStore.getItems()
+        });
+      }
+    },
+
+
+
+
+});
+
+module.exports = AllItems; 

front-ui/app/components/itemList.js

@@ -4,13 +4,11 @@ var ItemCollection = require('../models/itemCollection.js');
 
 var ItemList = React.createClass({
 
-    
-
     render: function() {
-        var itemClick = this.props.itemClick;
+
         var items = this.props.items.models.map( function(item) {
             return  (
-                 <SingleItem item={item} itemClick={itemClick}/>
+                 <SingleItem item={item} key={item.id}/>
                  );
         });
 
@@ -23,7 +21,7 @@ var ItemList = React.createClass({
             </div> 
             </div>
         );
-    },
+    }
 
 });
 

front-ui/app/components/itemMultiMediaDescriptions.js

@@ -0,0 +1,20 @@
+var React = require('react');
+
+var ItemMultimediaDescriptions = React.createClass({
+
+
+    render: function() {
+        var self = this;      
+
+        return (    
+               <div>Multimedia Description!</div>
+        );
+    },
+
+    getInitialState: function () {
+			return { descriptions: this.props.descriptions }; 
+	}
+});
+
+
+module.exports = ItemMultimediaDescriptions;  

front-ui/app/components/itemWithDetailsPage.js

@@ -0,0 +1,45 @@
+var React = require('react'),
+    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
+    ItemActions = require('../actions/itemActions'),
+    ItemStore = require('../stores/itemStore');
+
+
+var ItemWithDetailsPage = React.createClass({
+
+
+    render: function() {
+
+        return (
+            <div className="item-with-details row-fluid center">
+            <div className="span3">
+                <ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
+            </div>
+            <div className="span4">
+               quantitative descriptions
+            </div>
+            </div>
+            
+        ) ;       
+
+    },
+
+     // Add change listeners to stores
+    componentDidMount: function() {
+        ItemStore.addChangeListener(this._onChange);
+        ItemActions.loadFrontPageItems();
+    },
+
+    _onChange: function () {
+        this.setState({
+            item: ItemStore.getSelectedItem()
+        });
+    },
+
+    getInitialState: function () {
+      return { item: ItemStore.getSelectedItem() }; 
+    }
+
+});
+
+
+module.exports = ItemWithDetailsPage; 

front-ui/app/components/singleItem.js

@@ -1,5 +1,6 @@
-var React = require('react'),
-    Router = require('../router');
+var React = require('react');
+var ItemActions = require('../actions/itemActions');
+
 
 
 var SingleItem = React.createClass({
@@ -9,24 +10,19 @@ var SingleItem = React.createClass({
     render: function() {
         var self = this;
         var itemClick = this.itemClick;
-        var firstImage = this.state.item.get('multi_media_descriptions')[0];
+        var firstImage = this.props.item.get('multi_media_descriptions')[0];
         firstImage = firstImage || { url:  "http://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
         return (    
             <div className="single_item"  onClick={itemClick}>
              <img src={firstImage.url} />
-             <h1> { this.state.item.get('name') }</h1>
-             <div> { this.state.item.get('list_price') } KM </div>
+             <h1> { this.props.item.get('name') }</h1>
+             <div> { this.props.item.get('list_price') } KM </div>
             </div>  
         );
     },
 
-    getInitialState: function () {
-			return { item: this.props.item }; 
-	}, 
     itemClick: function(e) {
-        if(this.props.itemClick) {
-            this.props.itemClick(this.state.item, e);
-        }
+        ItemActions.selectItem(this.props.item);
     }
 });
 

front-ui/app/constants/itemConstants.js

@@ -0,0 +1,7 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+  SELECT_ITEM: null,
+  LOAD_FOR_FRONTPAGE: null
+});

front-ui/app/dispatcher/appDispatcher.js

@@ -0,0 +1,14 @@
+var Dispatcher = require('flux').Dispatcher;
+
+// Create dispatcher instance
+var AppDispatcher = new Dispatcher();
+
+// Convenience method to handle dispatch requests
+AppDispatcher.handleAction = function(action) {
+  this.dispatch({
+    source: 'VIEW_ACTION',
+    action: action
+  });
+}
+
+module.exports = AppDispatcher;

front-ui/app/models/itemWithDetails.js

@@ -2,7 +2,7 @@ var Backbone = require('backbone');
 var Globals = require('../globals');
 
 var ItemWithDetails = Backbone.Model.extend({
-	 urlRoot : Globals.ApiUrl + '/item'
+	 urlRoot : Globals.ApiUrl + '/item'	
 });
 
 module.exports = ItemWithDetails;

front-ui/app/stores/itemStore.js

@@ -0,0 +1,95 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var ItemConstants = require('../constants/itemConstants');
+var ItemCollection = require('../models/itemCollection');
+var ItemWithDetails = require('../models/itemWithDetails')
+var _ = require('underscore');
+
+// Define initial data points
+var _items = new ItemCollection(), _selectedItem = new ItemWithDetails();
+
+
+var loadItemsForFrontpage = function() { 
+        items = _items
+        items.setClassificationType(0);
+        items.setLimit(30);
+        items.setOffset(0);
+        
+        items.fetch({success: function() {
+            ItemStore.emitChange();
+        }});
+};
+
+var setSelected  = function(id) {
+  var item = new ItemWithDetails({id: this.itemId });
+  item.fetch({
+    success: function() {            
+       _selectedItem = item;
+       ItemStore.emitChange();      
+     } 
+    }
+  );
+}
+
+
+// Extend ItemStore with EventEmitter to add eventing capabilities
+var ItemStore = _.extend({}, EventEmitter.prototype, {
+
+  // Return Single Item With Details 
+  getSelectedItem: function() {
+    return _selectedItem;
+  },
+
+  // Return All Items
+  getItems: function() {
+    return _items;
+  },
+
+  // Emit Change event
+  emitChange: function() {
+    console.log("Emitting 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 ItemConstants.SELECT_ITEM:
+      setSelected(action.item.id);      
+      // TODO: this does not belong here - update when react router becommes available 
+        RIBICA.App.router.navigate(action.item.getFrontEndUrl(), {'trigger': true});
+
+      break;
+
+    case ItemConstants.LOAD_FOR_FRONTPAGE:
+      loadItemsForFrontpage();
+      break;
+
+    default:
+      return true;
+  }
+
+  // If action was responded to, emit change event
+  ItemStore.emitChange();
+  return true;
+
+});
+
+module.exports = ItemStore;

front-ui/app/views/itemDetailsView.js

@@ -1,6 +1,6 @@
 var Backbone = require('backbone'),
     React = require('react'),
-    ItemWithDetails = require('../models/itemWithDetails');
+    ItemWithDetailsPage = require('../components/itemWithDetailsPage');
 
 var ItemDetailsView = Backbone.View.extend({
     el: '#content',
@@ -10,21 +10,12 @@ var ItemDetailsView = Backbone.View.extend({
     },
 
     render: function() {
+        var self = this;
         this.$el.html(this.template);
-        var item = new ItemWithDetails({id: this.itemId });
-        console.log(item);
-
-        item.fetch({success: function() {
-
-            /*var resultItems = items.map(function (a) { return a.attributes });
-            React.render(new ItemList({            
-                items: items,
-                itemClick: self.itemClick
-            }), self.$('.item-details-container').get(0)); */
-        console.log("great success!");
-            
-        return this; }
-        });
+    
+            React.render(<ItemWithDetailsPage />, self.$('.item-details-container').get(0));            
+    
+        return this;
     }
 });
 

front-ui/app/views/startPageItemsView.js

@@ -1,9 +1,7 @@
 var Backbone = require('backbone'),
     React = require('react'),
-    ItemList = require('../components/itemList'),
-    ItemCollection = require('../models/itemCollection'),
-    Item = require('../models/item'),
-    Router = require('../router');
+    AllItems = require('../components/allItems'),
+    ItemActions = require('../actions/itemActions');
 
 var StartPageItemsView = Backbone.View.extend({
     el: '#content',
@@ -13,29 +11,9 @@ var StartPageItemsView = Backbone.View.extend({
     },
     render: function() {
         this.$el.html(this.template);
-        var items = new ItemCollection();
-        items.setClassificationType(0);
-        items.setLimit(30);
-        items.setOffset(0);
-        var self = this;
-        items.fetch({success: function() {
-
-           // var resultItems = items.map(function (a) { return a.attributes });
-            React.render(new ItemList({            
-                items: items,
-                itemClick: self.itemClick
-            }),
-                self.$('.item-list-container').get(0));
-            
-        }});
+        ItemActions.loadFrontPageItems();
+        React.render(<AllItems />, self.$('.item-list-container').get(0));
         return this;
-    },
-    itemClick: function(item) {
-
-        // not sure if there is a better way to access the app object
-        // TODO: if found replace it ! 
-        RIBICA.App.router.navigate(item.getFrontEndUrl(), {'trigger': true});
-
     }
 
 });

front-ui/build/index.html

@@ -15,16 +15,14 @@
     <div class='col-md-12' id='header'></div>
 </div>
 <div class='row'>
-
     <div class='col-md-2' style='border: 1px solid red;'>
-    
         this comes herer
     </div>
     <div class='col-md-10' style='border: 1px solid blue;'>
     
-<div id='content'>
+	<div id='content'>
+	</div>
 </div>
-    </div>
 </div>
 
 </div>

front-ui/package.json

@@ -9,15 +9,19 @@
   "author": "",
   "license": "BSD-2-Clause",
   "devDependencies": {
-    "grunt-cli": "~0.1.13",
-    "grunt": "~0.4.5",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-contrib-concat": "~0.5.0",
-    "grunt-browserify": "~3.2.1",
-    "grunt-contrib-connect": "~0.9.0",
     "browserify": "~8.1.0",
+    "events": "^1.0.2",
+    "flux": "^2.0.1",
+    "grunt": "~0.4.5",
+    "grunt-browserify": "~3.2.1",
+    "grunt-cli": "~0.1.13",
+    "grunt-contrib-concat": "~0.5.0",
+    "grunt-contrib-connect": "~0.9.0",
+    "grunt-contrib-uglify": "~0.7.0",
+    "grunt-contrib-watch": "~0.6.1",
+    "merry-go-round": "^0.1.1",
     "reactify": "~0.17.1",
-    "grunt-contrib-uglify": "~0.7.0"
+    "underscore": "^1.7.0"
   },
   "dependencies": {
     "react": "~0.12.2",