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

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);
     }
 });