now displaying traits on item details page

front-ui/app/components/items/itemWithDetailsPage.js

@@ -1,5 +1,6 @@
 var React = require('react'),
     Carousel = require('../shared/carousel'),
+    Traits = require('../items/traits'),
     ItemDetailsActions = require('../../actions/itemDetailsActions'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemDetailsStore = require('../../stores/itemDetailsStore');
@@ -12,32 +13,26 @@ var ItemWithDetailsPage = React.createClass({
     render: function() {
 
       return (
-
-
         <div className="item-with-details row-fluid center">
-        <div className="col-md-5">
+          <div className="col-md-5">
-
+            <Carousel images={this.state.images}
-    
+                    selected={this.state.currentImage}
-          <Carousel images={this.state.images}
+                    onClickLeft={this.onClickLeft}
-                  selected={this.state.currentImage}
+                    onClickRight={this.onClickRight}
-                  onClickLeft={this.onClickLeft}
+                    onSelectImage={this.onSelectImage} />
-                  onClickRight={this.onClickRight}
-                  onSelectImage={this.onSelectImage} />
         
-        </div>
+          </div>
-        <div className="col-md-7">
-        <h3> {this.state.item.get('name')} </h3>
-        <div>
-        <div className='h4'> {this.state.item.get('list_price')} KM</div>
-        <div className='h5'>{this.state.item.get('pricePerUnit')}</div>
 
+          <div className="col-md-7">
+            <h3> {this.state.item.get('name')}</h3>
+            <div>
+             <div className='h4'> {this.state.item.get('list_price')} KM</div>
+             <div className='h5'>{this.state.item.get('pricePerUnit')}</div>
+             <div> {this.state.item.get('description')}</div>
+            </div>
 
-
+            <Traits traits={this.state.item.get('traits')} />
-        <div> {this.state.item.get('description')}</div>
+          </div>
-        </div>
-
-        quantitative descriptions
-        </div>
         </div>
         );       
 
@@ -50,6 +45,11 @@ var ItemWithDetailsPage = React.createClass({
       ItemDetailsActions.loadItemWithDetails();
     },
 
+    componentWillUnmount: function () {
+      ItemDetailsStore.removeChangeListener(this._onChange);
+      NavigationStore.removeChangeListener(this._onChange);
+    },
+
 
     onClickLeft: function() {
       ItemDetailsActions.previousCarouselImage();

front-ui/app/components/items/traits.js

@@ -0,0 +1,27 @@
+var React = require('react');
+
+var Traits = React.createClass({
+    render: function() {
+
+      var traitsPresentation = [];
+      var traits = (this.props.traits || {});
+      for(var traitKey in traits )  {
+        if(traits.hasOwnProperty(traitKey)) {
+          var traitValue = this.props.traits[traitKey];
+          traitsPresentation.push( <div className="single_trait">{traitKey}: {traitValue}</div>   );
+        }
+      }
+
+      console.log(traitsPresentation); 
+      return (    
+        <div className="row-fluid">
+           <div className="span12"> 
+               {traitsPresentation}
+           </div>        
+        </div>  
+        );
+    }
+});
+
+
+module.exports = Traits;  

front-ui/app/css/items.css

@@ -7,6 +7,12 @@
 
 }
 
+.single_trait {
+	display: inline-block;
+	text-align: center;
+	padding-right: 5px;
+}
+
 .single_item img { 
 	padding: 5px;