byCategory component small refactoring

front-ui/app/components/browsing/byCategory.js

@@ -9,27 +9,28 @@ var React = require('react'),
     ItemStore = require('../../stores/itemStore'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemList = require('../items/itemList'),
-    NavigationActions = require('../../actions/navigationActions');
+    NavigationActions = require('../../actions/navigationActions'),
+    Globals = require('../../globals');
 
 var ByCategory = React.createClass({
   mixins: [Router.State],
-  getInitialState: function() {
+    getInitialState: function() {
-    var category = new Category();
+      var category = new Category();
-    var items = new ItemCollection();
+      var items = new ItemCollection();
-    return {
+      return {
-      category: category,
+        category: category,
-    items: items,
+        items: items,
-    filter :{},
+        filter :{},
-    pagination: {}
+        pagination: {}
-    };
+      };
-  },
+    },
     filter: {},
     onFCClick: function(fc, fcv) {
       var q = {};
       q[fc.field_name] = fcv.filter_value;
       var section = new Section(this.state.category.get('section'));
       var category = this.state.category;
-      
+
       this.filter[fc.field_name] = fcv.filter_value;
       NavigationActions.goToCategory(category, section, this.filter, 0, this.state.pagination.limit);
     },
@@ -48,48 +49,48 @@ var ByCategory = React.createClass({
     },
     render: function() {
       var self = this;
-      
-      return (
-        <div>
-<div className='col-md-2'> 
-<div className='h4'>{this.state.category.get('name')}</div>
-<div>Podkategorije</div>
-        <ul>
-        {(this.state.category.get('sub_categories') || []).map(function(sc) {
-          return (<li> <a>{sc.name}</a></li>)
-                                                             })}
-        </ul>
 
-        {this.state.category.get('filter_criterias').map(function(fc) {
+      return (
-          return (<div>
+          <div>
-            
+          <div className='col-md-2'> 
-        <div className='h4' style={{color: '#cd3071'}}>{fc.title}</div>
+          <div className='h4'>{this.state.category.get('name')}</div>
-        <ul>
+          <div>Podkategorije</div>
-        {fc.filter_criteria_values.map(function(fcv) {
+          <ul>
-          return (<li>
+          {(this.state.category.get('sub_categories') || []).map(function(sc) {
-              <a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
+                                                                                return (<li> <a>{sc.name}</a></li>)
-            </li>)
+                                                                              })}
-                                                     })}
+          </ul>
-        </ul>
+
-            </div>)
+          {this.state.category.get('filter_criterias').map(function(fc) {
-                                                                      })}
+                                                                          return (<div>
-        </div>
+
+                                                                            <div className='h4' style={{color: '#cd3071'}}>{fc.title}</div>
+                                                                            <ul>
+                                                                            {fc.filter_criteria_values.map(function(fcv) {
+                                                                                                                           return (<li>
+                                                                                                                             <a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
+                                                                                                                             </li>)
+                                                                                                                         })}
+                                                                            </ul>
+                                                                            </div>)
+                                                                        })}
+      </div>
 
         <div className='col-md-10'>
-        
+
         <h3> Kategorija - {this.state.category.get('name')}</h3>
         Number of items in this category: {this.state.items.length}
-        <div>
+      <div>
-        {this.appliedCategoryFiltersArray().map(function(acf) {
+      {this.appliedCategoryFiltersArray().map(function(acf) {
-            return (<span>
+                                                              return (<span>
-              {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
+                                                                {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
-              
-              </span>)
-                                                              })} 
-        </div>
 
-          
+                                                                </span>)
-          <div> total count is : {this.state.items.totalCount}</div>
+                                                            })} 
+      </div>
+
+
+        <div> total count is : {this.state.items.totalCount}</div>
         <ItemList items={this.state.items} paginationEnabled={true} total={this.state.items.totalCount} limit={this.state.pagination.limit} onPageChange={this.changePage} currentOffset={this.state.pagination.offset} />
         </div>
         </div>
@@ -104,14 +105,13 @@ var ByCategory = React.createClass({
       }
       return filters;
     },
-    componentWillReceiveProps: function() {
+    update: function() {
       var categoryId = this.getParams().id;
 
       this.filter = this.getQuery();
       var offset = this.filter.offset || 0;
-      var limit = this.filter.limit || 30;
+      var limit = this.filter.limit || Globals.DefaultPageSize;
 
- 
       this.setState({
         filter: this.filter,
         pagination: {
@@ -122,23 +122,11 @@ var ByCategory = React.createClass({
       ItemActions.loadByCategory(categoryId, offset, limit, this.filter);
       CategoryActions.loadCategoryDetails(categoryId);
     },
+    componentWillReceiveProps: function() {
+      this.update();
+    },
     componentDidMount: function() {
-      var categoryId = this.getParams().id;
+      this.update();
-      
-      this.filter = this.getQuery();
-
-      var offset = this.filter.offset || 0;
-      var limit = this.filter.limit || 30;
-      this.setState({
-        filter: this.filter,
-        pagination: {
-          offset: offset,
-          limit: limit
-        }
-      });
-
-      ItemActions.loadByCategory(categoryId, offset, limit, this.getQuery());
-      CategoryActions.loadCategoryDetails(categoryId);
 
       ItemStore.addChangeListener(this._onChange);
       CategoryStore.addChangeListener(this._onChange);

front-ui/app/globals.js

@@ -1,5 +1,6 @@
 module.exports = {
     ApiUrl: 'http://localhost:4567',
+    DefaultPageSize: 18,
     FormatCurrency: function(amount_s) {
     	var amount = parseFloat(amount_s);
     	return ( amount.toFixed(2) + " KM" )