Merge pull request #1813 from OpenBazaar/fixStoreCategories

Fixes issues with store categories.

Author: rmisio

js/views/itemListVw.js

@@ -38,10 +38,16 @@ module.exports = baseVw.extend({
 
   render: function(){
     var self = this;
-    //clear the list
+    // clear the list
     this.$el.empty();
-    if (this.itemsShort.models.length > 0) {
-      this.renderItemSet(this.nextToShow, this.showPerScroll);
+    // create list based on category each time this is rendered
+    if(this.category !== 'all') {
+       this.categorizedItems = this.itemsShort.where({category: this.category})
+    } else {
+      this.categorizedItems = this.itemsShort.models;
+    }
+    if (this.categorizedItems.length > 0) {
+      this.renderItemSet(0, this.showPerScroll);
     } else {
       self.renderNoneFound();
     }
@@ -51,16 +57,16 @@ module.exports = baseVw.extend({
   renderItemSet: function(start, end){
     let renderSet = [];
 
-    if (start >= this.itemsShort.models.length) return;
+    if (start >= this.categorizedItems.length) return;
 
-    renderSet = __.filter(this.itemsShort.models, function(value, index){
+    renderSet = __.filter(this.categorizedItems, function(value, index){
       return (index >= start) && (index < end);
     });
 
     __.each(renderSet, (item) => {
       if (item.toJSON().category == this.category || this.category == "all") {
         this.renderContract(item);
-      }
+       }
     }, this);
 
     this.nextToShow = end;

js/views/userPageVw.js

@@ -395,6 +395,7 @@ UserPageVw = pageVw.extend({
         self.setCustomStyles();
         self.setState(self.state, self.currentItemHash, { replaceHistory: true });
         self.$backToTop = self.$('.backToTop');
+        self.$categorySelect = self.$('.js-categories');
 
         //check if user is blocked
         if (!self.options.ownPage && isBlocked) {
@@ -598,16 +599,24 @@ UserPageVw = pageVw.extend({
     }
   },
 
-  setCategory: function(category) {
-    var $select;
+  setCategorySelect: function(category) {
+    if (category && this.$categorySelect.val() !== category &&
+        this.$categorySelect.find('option[value="' + category + '"]').length) {
+        this.$categorySelect.val(category);
+    }
+    this.showCategory(category);
+  },
 
-    if (category) {
-      $select = this.$el.find('.js-categories');
+  categoryChanged: function() {
+    this.showCategory(this.$categorySelect.val());
+  },
 
-      if ($select.val() !== category && $select.find('option[value="' + category + '"]').length) {
-        $select.val(category);
-        this.categoryChanged();
-      }
+  showCategory: function(category) {
+    if (this.itemList) {
+      this.itemList.category = category;
+      this.itemList.render();
+    } else {
+      this.renderItems(this.cachedListings);
     }
   },
 
@@ -627,10 +636,6 @@ UserPageVw = pageVw.extend({
     }
   },
 
-  categoryChanged: function() {
-    this.renderItems(this.listings.get('listings'));
-  },
-
   toggleFollowButtons: function(followed) {
     var followBtn = this.$('.js-follow'),
         unfollowBtn = this.$('.js-unfollow');
@@ -847,7 +852,6 @@ UserPageVw = pageVw.extend({
 
   renderItems: function (model, skipNSFWmodal) {
     var self = this,
-        select = this.$el.find('.js-categories'),
         selectOptions = [],
         addressCountries = self.options.userModel.get('shipping_addresses').map(function(address){
           return address.country;
@@ -857,38 +861,38 @@ UserPageVw = pageVw.extend({
     addressCountries.push(userCountry);
     skipNSFWmodal = skipNSFWmodal || this.skipNSFWmodal;
     model = model || [];
-    __.each(model, function (arrayItem) {
+    __.each(model, (arrayItem) => {
 
-      if (!self.showNSFWContent && !self.showNSFW &&!skipNSFWmodal && arrayItem.nsfw){
+      if (!this.showNSFWContent && !this.showNSFW &&!skipNSFWmodal && arrayItem.nsfw){
         arrayItem.cloak = true;
       } else {
         arrayItem.cloak = false;
       }
-      arrayItem.userCurrencyCode = self.options.userModel.get('currency_code');
-      arrayItem.serverUrl = self.options.userModel.get('serverUrl');
+      arrayItem.userCurrencyCode = this.options.userModel.get('currency_code');
+      arrayItem.serverUrl = this.options.userModel.get('serverUrl');
       arrayItem.showAvatar = false;
-      arrayItem.avatar_hash = self.model.get('page').profile.avatar_hash;
-      arrayItem.handle = self.model.get('page').profile.handle;
-      arrayItem.userID = self.pageID;
-      arrayItem.ownPage = self.options.ownPage;
+      arrayItem.avatar_hash = this.model.get('page').profile.avatar_hash;
+      arrayItem.handle = this.model.get('page').profile.handle;
+      arrayItem.userID = this.pageID;
+      arrayItem.ownPage = this.options.ownPage;
       arrayItem.onUserPage = true;
       arrayItem.userCountries = addressCountries;
       arrayItem.skipNSFWmodal = skipNSFWmodal;
-      if (arrayItem.category != "" && self.$el.find('.js-categories option[value="' + arrayItem.category + '"]').length == 0){
+      if (arrayItem.category != "" && this.$el.find('.js-categories option[value="' + arrayItem.category + '"]').length == 0){
         selectOptions[arrayItem.category] = true;
       }
-      if (self.options.ownPage === true){
-        arrayItem.imageURL = self.options.userModel.get('serverUrl')+"get_image?hash="+arrayItem.thumbnail_hash;
+      if (this.options.ownPage === true){
+        arrayItem.imageURL = this.options.userModel.get('serverUrl')+"get_image?hash="+arrayItem.thumbnail_hash;
       } else {
-        arrayItem.imageURL = self.options.userModel.get('serverUrl')+"get_image?hash="+arrayItem.thumbnail_hash+"&guid="+self.pageID;
+        arrayItem.imageURL = this.options.userModel.get('serverUrl')+"get_image?hash="+arrayItem.thumbnail_hash+"&guid="+this.pageID;
       }
     });
 
-    Object.keys(selectOptions).sort().forEach(function(selectOption) {
+    Object.keys(selectOptions).sort().forEach((selectOption) => {
       var opt = document.createElement('option');
       opt.value = selectOption;
       opt.innerHTML = selectOption;
-      select.append(opt);
+      this.$categorySelect.append(opt);
     });
 
     this.itemList = new itemListView({
@@ -897,7 +901,7 @@ UserPageVw = pageVw.extend({
       title: window.polyglot.t('NoListings'),
       message: "",
       userModel: this.options.userModel,
-      category: this.$el.find('.js-categories').val()
+      category: this.$categorySelect.val(),
     });
 
     this.registerChild(this.itemList);
@@ -1148,16 +1152,11 @@ UserPageVw = pageVw.extend({
   },
 
   storeTabClick: function(e) {
-    if (this.$el.find('.js-categories').val() != "all"){
-      $(".js-categories option[value='all']").attr("selected", "selected");
-      this.categoryChanged();
-    }
-
     this.storeClick(e);
   },
 
   storeCatClick: function(e) {
-    this.setCategory($(e.target).text());
+    this.setCategorySelect($(e.target).text());
     this.storeClick(e);
   },