we are using flux now ... yaaay ...

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

@@ -7,7 +7,7 @@ var ItemMultimediaDescriptions = React.createClass({
         var self = this;      
 
         return (    
-               
+               <div>Multimedia Description!</div>
         );
     },
 

front-ui/app/components/itemWithDetailsPage.js

@@ -1,14 +1,18 @@
 var React = require('react'),
-    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions');
+    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.props.item.get('multi_media_descriptions')} />
+                <ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
             </div>
             <div className="span4">
                quantitative descriptions
@@ -17,6 +21,22 @@ var ItemWithDetailsPage = React.createClass({
             
         ) ;       
 
+    },
+
+     // 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() }; 
     }
 
 });

front-ui/app/components/singleItem.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var ItemActions = require('../actions/itemActions');
 
 
 
@@ -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);
     }
 });