Merge pull request #1488 from OpenBazaar/lazyLoadFollowers

Lazy load followers

Author: jjeffryes

js/languages/en-US.json

@@ -86,7 +86,7 @@
   "SearchForItemsPlaceholder": "Type #games, #shoes or any #tag...",
   "SearchForPagesPlaceholder": "Search by name or keyword",
   "SearchFeedPlaceholder": "Type a keyword...",
-  "SearchForFollowersPlaceholder": "Type a name...",
+  "SearchForFollowersPlaceholder": "Search for a name in your currently loaded followers (scroll to load more).",
   "SearchForUsersPlaceholder": "Type a name...",
   "SearchOnUserStorePlaceholder": "Type a title...",
   "EstDeliveryDomesticPlaceholder": "3-5 Business Days",
@@ -305,9 +305,9 @@
   "Off": "Off",
   "ClickToChange": "Click to change",
   "NotProvided": "not provided",
-  "NotFollowingAnyone": "Not following anyone",
-  "NoFollowers": "No followers",
-  "NoReviews": "No reviews",
+  "NotFollowingAnyone": "No nodes being followed were loaded",
+  "NoFollowers": "No followers were loaded",
+  "NoReviews": "No reviews were loaded",
   "NoDetailsSpecified": "No details specified",
   "Moderator": "Moderator",
   "Moderator2": "Moderator:",

js/templates/userPage.html

@@ -250,18 +250,18 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
     <a class="btn btn-bar btn-tab custCol-secondary js-followingTab js-tab paddingRight18">
       <span class="ion-person fontSize11 marginRight2 textOpacity"></span>
       <%= polyglot.t('Following') %>
-      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userFollowingCount">0</span>
+      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userFollowingCount">...</span>
     </a>
     <a class="btn btn-bar btn-tab custCol-secondary js-followersTab js-tab paddingRight18">
       <span class="ion-person-stalker fontSize11 marginRight2 textOpacity1"></span>
       <%= polyglot.t('Followers') %>
-      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userFollowerCount">0</span>
+      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userFollowerCount">...</span>
     </a>
     <% if(ob.page.profile.vendor) { %>
     <a class="btn btn-bar btn-tab custCol-secondary js-storeTab js-tab paddingRight18">
       <span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
       <%= polyglot.t('Store') %>
-      <span class="pill fontSize12 textOpacity75 marginLeft2 js-listingCount">0</span>
+      <span class="pill fontSize12 textOpacity75 marginLeft2 js-listingCount">...</span>
     <% } %>
     </a>
   </div>

js/views/userListVw.js

@@ -17,15 +17,19 @@ module.exports = Backbone.View.extend({
      options.serverUrl: server url to pass into each user view
      options.ownFollowing: array of guids this user is following
      options.hideFollow: boolean, hide follow button
-     options.reverse; should the list of users be reversed?
+     options.reverse: should the list of users be reversed?
+     options.perFetch: the number of users returned per fetch (optional, only applies to the get_followers api)
+     options.followerCount: the total number of followers (optional, only applise to the get_followers api)
      */
     //the model must be passed in by the constructor
     this.usersShort = new usersShortCollection(this.model);
     this.options.reverse && this.usersShort.models.reverse();
     this.subViews = [];
     this.showPerScroll = 10;
+    this.fetchMoreAfter = options.perFetch;
     this.nextUserToShow = 0;
-    this.totalUsers = this.usersShort.length;
+    this.fetchedUsers = this.usersShort.length;
+    this.totalUsers = this.options.followerCount;
     this.$container = $('#obContainer');
 
     //listen to scrolling on container
@@ -34,6 +38,11 @@ module.exports = Backbone.View.extend({
     );
     this.$container.on('scroll', this.scrollHandler);
 
+    this.listenTo(this.usersShort, 'add', (data)=>{
+      this.fetchedUsers = this.usersShort.length;
+      this.renderUserSet(this.nextUserToShow, this.nextUserToShow + this.showPerScroll);
+    });
+
     this.render();
   },
 
@@ -70,7 +79,12 @@ module.exports = Backbone.View.extend({
       this.trigger('usersAdded');
     }
 
-    this.nextUserToShow = this.nextUserToShow >= this.totalUsers ? this.nextUserToShow : this.nextUserToShow + this.showPerScroll;
+    this.nextUserToShow = this.nextUserToShow >= this.fetchedUsers ? this.nextUserToShow : this.nextUserToShow + this.showPerScroll;
+
+    if(this.fetchMoreAfter && end == this.fetchMoreAfter && this.fetchedUsers < this.totalUsers){
+      this.fetchMoreAfter = this.fetchMoreAfter + this.options.perFetch;
+      this.trigger('fetchMoreUsers');
+    }
   },
 
   renderUser: function(item){
@@ -88,6 +102,11 @@ module.exports = Backbone.View.extend({
     }
   },
 
+  addUsers: function(model) {
+    //add more users to the collection
+    this.usersShort.add(model);
+  },
+
   renderNoneFound: function(){
     var simpleMessage = new simpleMessageView({title: this.options.title, message: this.options.message, el: this.$el});
     this.subViews.push(simpleMessage);

js/views/userPageVw.js

@@ -183,6 +183,9 @@ module.exports = baseVw.extend({
     //set view's userID from the userModel;
     this.userID = options.userModel.get('guid');
     this.userProfileFetchParameters = {};
+    this.followerFetchStart = 0;
+    this.followersFetchPer = 30;
+    this.followerFetchTotal = 0;
     this.itemFetchParameters = {};
     this.model = new Backbone.Model();
     this.globalUserProfile = options.userProfile;
@@ -663,6 +666,10 @@ module.exports = baseVw.extend({
             if(self.options.ownPage === false && Boolean(__.findWhere(followingArray, {guid: self.userID}))){
               self.$('.js-followsMe').removeClass('hide')
             }
+            //mark whether page is being followed
+            if(self.options.ownPage === false){
+              self.toggleFollowButtons(Boolean(__.findWhere(followingArray, {guid: self.pageID})));
+            }
 
           }).fail(function(jqXHR, status, errorThrown){
             if (self.isRemoved()) return;
@@ -685,21 +692,34 @@ module.exports = baseVw.extend({
     });
   },
 
-  fetchFollowers: function(){
-    var self = this;
+  fetchFollowers: function(ignoreTotal){
+    var self = this,
+        fetchFollowersParameters;
 
+    if(!ignoreTotal && this.followerFetchStart > 0 && this.followerFetchStart >= this.followerFetchTotal){
+      //don't fetch again if all of the followers have been fetched
+      return;
+    }
+
+    if(this.options.ownPage){
+      fetchFollowersParameters = $.param({'start': this.followerFetchStart});
+    } else {
+      fetchFollowersParameters = $.param({'guid': this.pageID, 'start': this.followerFetchStart});
+    }
+    
     this.followers.fetch({
-      data: self.userProfileFetchParameters,
-      //timeout: 5000,
-      success: function(model){
-        var followerArray = model.get('followers');
+      data: fetchFollowersParameters,
+      success: (model)=> {
+        var followerArray = model.get('followers') || [];
+
+        this.followerFetchTotal = model.get('count') || followerArray.length; //the length is for older servers
+        this.$('.js-userFollowerCount').html(this.followerFetchTotal);
 
         if (self.isRemoved()) return;
 
-        self.renderFollowers(followerArray);
-        //if this is not their page, see if they are being followed
-        if(self.options.ownPage === false){
-          self.toggleFollowButtons(Boolean(__.findWhere(followerArray, {guid: self.userID})));
+        if(followerArray.length || this.followerFetchTotal == 0){
+          //always render the first time so the no followers message is shown for no followers
+          this.renderFollowers(followerArray, this.followerFetchTotal);
         }
       },
       error: function(model, response){
@@ -713,6 +733,7 @@ module.exports = baseVw.extend({
         }
       }
     });
+    this.followerFetchStart += this.followersFetchPer;
   },
 
   getIsModerator: function () {
@@ -783,25 +804,31 @@ module.exports = baseVw.extend({
     }
   },
 
-  renderFollowers: function (model) {
+  renderFollowers: function (model, followerCount) {
     "use strict";
 
     model = model || [];
-    this.followerList = new personListView({
-      model: model,
-      el: '.js-list1',
-      title: window.polyglot.t('NoFollowers'),
-      message: "",
-      ownFollowing: this.ownFollowing,
-      hideFollow: true,
-      serverUrl: this.options.userModel.get('serverUrl'),
-      reverse: true
-    });
-    this.registerChild(this.followerList);
-
-    this.$('.js-userFollowerCount').html(model.length);
+    //if view doesn't exist, create it
+    if(!this.followerList) {
+      this.followerList = new personListView({
+        model: model,
+        el: '.js-list1',
+        title: window.polyglot.t('NoFollowers'),
+        message: "",
+        ownFollowing: this.ownFollowing,
+        hideFollow: true,
+        serverUrl: this.options.userModel.get('serverUrl'),
+        reverse: true,
+        perFetch: 30,
+        followerCount: followerCount
+      });
+      this.registerChild(this.followerList);
+    }else if(model.length) {
+      this.followerList.addUsers(model);
+    }
 
     if (model.length) {
+      //refresh search
       this.followersSearch = new window.List('searchFollowers', {
         valueNames: ['js-searchName', 'js-searchHandle'],
         page: 1000
@@ -813,6 +840,10 @@ module.exports = baseVw.extend({
       this.followersSearch.reIndex();
       searchTerms && this.followersSearch.search(searchTerms);
     });
+
+    this.listenTo(this.followerList, 'fetchMoreUsers', ()=>{
+      this.fetchFollowers();
+    });
   },
 
   renderFollowing: function (model) {