Wire in fetching for lazy loading

Author: jjeffryes

js/collections/usersShortCl.js

@@ -6,9 +6,16 @@ module.exports = Backbone.Collection.extend({
   model: userShort,
 
   initialize: function(models, options){
-    this.fetchURL = options.fetchURL;
+
+    /*
+    if (!options.fetchURL) {
+      throw new Error('Please provide a collection.');
+    }
+    
+    this.fetchURL = options.fetchURL;*/
   },
 
+
   url: function() {
     return app.serverConfigs.getActive().getServerBaseUrl() + '/' + this.fetchURL;
   }

js/views/userListVw.js

@@ -19,6 +19,7 @@ module.exports = Backbone.View.extend({
      options.hideFollow: boolean, hide follow button
      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);
@@ -27,7 +28,8 @@ module.exports = Backbone.View.extend({
     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
@@ -58,6 +60,8 @@ module.exports = Backbone.View.extend({
           return (index >= start) && (index < end);
         });
 
+    this.fetchedUsers = this.usersShort.length;
+
     __.each(renderSet, function(user) {
       user.set('avatarURL', self.options.serverUrl+"get_image?hash="+user.get('avatar_hash')+"&guid="+user.get('guid'));
       if(self.options.ownFollowing.indexOf(user.get('guid')) != -1){
@@ -72,9 +76,15 @@ module.exports = Backbone.View.extend({
       this.trigger('usersAdded');
     }
 
-    this.nextUserToShow = this.nextUserToShow >= this.totalUsers ? this.nextUserToShow : this.nextUserToShow + this.showPerScroll;
-    if(this.fetchMoreAfter && this.totalUsers == this.fetchMoreAfter){
-      this.trigger('fetch')
+    this.nextUserToShow = this.nextUserToShow >= this.fetchedUsers ? this.nextUserToShow : this.nextUserToShow + this.showPerScroll;
+    console.log("f: " + this.fetchedUsers)
+    console.log("t: " + this.totalUsers)
+    console.log("e: " + end)
+    console.log("fm: " + this.fetchMoreAfter)
+    if(this.fetchMoreAfter && end == this.fetchMoreAfter && this.fetchedUsers != this.totalUsers){
+      this.fetchMoreAfter = this.fetchMoreAfter + this.options.perFetch;
+      this.trigger('fetchMoreUsers');
+      console.log("fetch more from userlistvw")
     }
   },
 
@@ -93,6 +103,13 @@ module.exports = Backbone.View.extend({
     }
   },
 
+  addUsers: function(model) {
+    //add more users to the collection
+    console.log("add users")
+    this.usersShort.add(model);
+    this.renderUserSet(this.nextUserToShow, this.nextUserToShow + this.showPerScroll);
+  },
+
   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

@@ -664,6 +664,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;
@@ -690,27 +694,26 @@ module.exports = baseVw.extend({
     var self = this,
         fetchFollowersParameters;
 
-    if(this.ownPage){
+    if(this.options.ownPage){
       fetchFollowersParameters = $.param({'start': this.followerFetchStart});
     } else {
       fetchFollowersParameters = $.param({'guid': this.pageID, 'start': this.followerFetchStart});
     }
 
+    console.log("fetchFollowers")
+
     this.followers.fetch({
-      data: self.userProfileFetchParameters,
+      data: fetchFollowersParameters,
       //timeout: 5000,
       success: (model)=> {
-        var followerArray = model.get('followers');
-        this.$('.js-userFollowerCount').html(model.get('count'));
-        this.followerFetchStart += model.length;
+        var followerArray = model.get('followers'),
+            followerCount = model.get('count') || followerArray.length;
+        this.$('.js-userFollowerCount').html(followerCount);
+        this.followerFetchStart += followerArray.length;
 
         if (self.isRemoved()) return;
 
-        this.renderFollowers(followerArray);
-        //if this is not their page, see if they are being followed
-        if(this.options.ownPage === false){
-          this.toggleFollowButtons(Boolean(__.findWhere(followerArray, {guid: this.userID})));
-        }
+        this.renderFollowers(followerArray, followerCount);
       },
       error: function(model, response){
         if (self.isRemoved()) return;
@@ -793,22 +796,27 @@ 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,
-      perFetch: 30
-    });
-    this.registerChild(this.followerList);
+    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{
+      this.followerList.addUsers(model);
+    }
 
     if (model.length) {
       this.followersSearch = new window.List('searchFollowers', {
@@ -822,6 +830,11 @@ module.exports = baseVw.extend({
       this.followersSearch.reIndex();
       searchTerms && this.followersSearch.search(searchTerms);
     });
+
+    this.listenTo(this.followerList, 'fetchMoreUsers', ()=>{
+      console.log("trigger fetch");
+      this.fetchFollowers();
+    });
   },
 
   renderFollowing: function (model) {