fixes #906 infinite scolling for user challenges

Author: shubhendusaurabh

app/directives/tc-endless-paginator/tc-endless-paginator.directive.js

@@ -10,12 +10,15 @@ import angular from 'angular'
       template: require('./tc-endless-paginator')(),
       scope: {
         state: '=',
-        pageParams: '='
+        pageParams: '=',
+        firstLoadMore: '=?'
       },
       controller: ['$scope', function($scope) {
+        $scope.firstLoadMore = true
         $scope.loadMore = function() {
           $scope.pageParams.currentOffset += $scope.pageParams.limit
           $scope.pageParams.updated++
+          $scope.firstLoadMore = false
         }
       }]
     }

app/directives/tc-endless-paginator/tc-endless-paginator.jade

@@ -1,3 +1,3 @@
 div.paginator
   tc-section(state="state")
-    button.tc-btn.tc-btn-s(ng-show="pageParams.totalCount > pageParams.currentCount", ng-click="loadMore()") Load More
+    button.tc-btn.tc-btn-s(ng-show="pageParams.totalCount > pageParams.currentCount && firstLoadMore", ng-click="loadMore()") Load More

app/directives/tc-section/tc-section.jade

@@ -1,5 +1,5 @@
 section(ng-switch="state")
-  .section-loading(ng-switch-when="loading")
+  .section-loading(ng-transclude, ng-switch-when="loading")
 
   .section-error(ng-switch-when="error")
     p {{errMsg}}

app/my-challenges/my-challenges.controller.js

@@ -20,6 +20,7 @@ import _ from 'lodash'
     vm.loadMore = loadMore
     vm.getChallenges = getChallenges
     vm.totalCount = 0
+    vm.firstLoadMore = true
     // this will help to keep track of pagination across individual api calls
     var counts = {
       devDesign: {total: 0, current: 0},
@@ -99,7 +100,7 @@ import _ from 'lodash'
 
     function getDevDesignChallenges(offset) {
       var params = {
-        limit: 12,
+        limit: CONSTANTS.CHALLENGES_LOADING_CHUNK,
         offset: offset,
         orderBy: vm.orderBy + ' desc',
         filter: 'status=' + vm.statusFilter
@@ -125,7 +126,7 @@ import _ from 'lodash'
         _filter = 'status=past&isRatedForMM=true'
       }
       var params = {
-        limit: 12,
+        limit: CONSTANTS.CHALLENGES_LOADING_CHUNK,
         offset: offset,
         orderBy: vm.statusFilter === 'active' ? 'startDate' : 'endDate desc',
         filter: _filter
@@ -142,12 +143,14 @@ import _ from 'lodash'
     }
 
     function loadMore() {
-      currentOffset+=12
-      vm.getChallenges(currentOffset, false)
+      if (vm.loading === CONSTANTS.STATE_READY) {
+        currentOffset += CONSTANTS.CHALLENGES_LOADING_CHUNK
+        vm.getChallenges(currentOffset, false)
+      }
     }
 
     window.onscroll = function() {
-      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+      if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - CONSTANTS.INFINITE_SCROLL_OFFSET)) {
         if (vm.totalCount > vm.myChallenges.length) {
           vm.loadMore()
         }

app/profile/subtrack/subtrack.controller.js

@@ -26,9 +26,9 @@ import _ from 'lodash'
     vm.showNav = showNav
     vm.back = back
     vm.subTrackStats = []
-
+    vm.loadMore = loadMore
     vm.pageName = vm.subTrack
-
+    vm.firstLoadMore = true
     vm.tabs = ['statistics']
 
     if (vm.track !== 'COPILOT') {
@@ -41,7 +41,7 @@ import _ from 'lodash'
     // paging params, these are updated by tc-pager
     vm.pageParams = {
       currentOffset : 0,
-      limit: 16,
+      limit: CONSTANTS.CHALLENGES_LOADING_CHUNK,
       currentCount: 0,
       totalCount: 0,
       // counter used to indicate page change
@@ -139,6 +139,7 @@ import _ from 'lodash'
       // watches page change counter to reload the data
       $scope.$watch('vm.pageParams.updated', function(newValue, oldValue) {
         if (newValue !== oldValue) {
+          vm.firstLoadMore = false
           _getChallenges()
         }
       })
@@ -156,6 +157,21 @@ import _ from 'lodash'
       $window.history.back()
     }
 
+    function loadMore() {
+      if (vm.status.challenges === CONSTANTS.STATE_READY) {
+        vm.pageParams.currentOffset += CONSTANTS.CHALLENGES_LOADING_CHUNK
+        _getChallenges()
+      }
+    }
+
+    window.onscroll = function() {
+      if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - CONSTANTS.INFINITE_SCROLL_OFFSET)) {
+        if (vm.pageParams.totalCount > vm.challenges.length && vm.firstLoadMore == false) {
+          vm.loadMore()
+        }
+      }
+    }
+
     function _getChallenges() {
       vm.status.challenges = CONSTANTS.STATE_LOADING
       var params = {

app/topcoder.constants.js

@@ -43,5 +43,7 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
   'REGISTERED'             : 'REGISTERED',
   'SUBMISSION_TYPE_CONTEST': 'Contest Submission',
   'STATUS_ACTIVE'          : 'Active',
-  'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win'
+  'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win',
+  'CHALLENGES_LOADING_CHUNK' : 12,
+  'INFINITE_SCROLL_OFFSET' : '400' // footer is 300px and challenge tile is 400px
 })

assets/css/directives/tc-section.scss

@@ -5,6 +5,7 @@
 
   .section-loading {
     width: 100%;
+    min-width: 50px;
     min-height: 100px;
     background: url(../../images/ripple.gif) no-repeat center center;
   }