load more functionality for my-challenges & my-srms

Author: Parth Shah

app/directives/challenge-tile/challenge-tile.directive.jade

@@ -56,8 +56,9 @@
     ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
     ng-switch="challenge.track")
     header
-      // TODO: handle url for past marathon match
-      a(ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}") {{challenge.name}}
+      
+      a(ng-hide="challenge.subTrack === 'MARATHON_MATCH'", ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}") {{challenge.name}}
+      a(ng-show="challenge.subTrack === 'MARATHON_MATCH'", ng-href="https://community.{{DOMAIN}}/tc?module=MatchDetails&rd={{challenge.rounds[0].id}}") {{challenge.name}}
 
       p.date-completed {{challenge.submissionEndDate | date : 'MMMM yyyy'}}
 

app/index.jade

@@ -171,6 +171,7 @@ html
     script(src="directives/skill-tile/skill-tile.directive.js")
     script(src="directives/slideable.directive.js")
     script(src="directives/srm-tile/srm-tile.directive.js")
+    script(src="directives/tc-paginator/tc-loadMore-paginator.directive.js")
     script(src="directives/tc-paginator/tc-paginator.directive.js")
     script(src="directives/tc-section/tc-section.directive.js")
     script(src="directives/track-toggle/track-toggle.directive.js")

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

@@ -3,104 +3,92 @@
 
   angular.module('tc.myChallenges').controller('MyChallengesController', MyChallengesController);
 
-  MyChallengesController.$inject = ['ChallengeService', 'UserService', '$q', '$log', 'CONSTANTS', 'Helpers', '$scope', 'userIdentity', '$stateParams'];
+  MyChallengesController.$inject = ['ChallengeService', 'UserService', '$q', '$log', '$state', 'CONSTANTS', 'Helpers', '$scope', 'userIdentity', '$stateParams'];
 
-  function MyChallengesController(ChallengeService, UserService, $q, $log, CONSTANTS, Helpers, $scope, userIdentity, $stateParams) {
+  function MyChallengesController(ChallengeService, UserService, $q, $log, $state, CONSTANTS, Helpers, $scope, userIdentity, $stateParams) {
+    $log = $log.getInstance('MyChallengesController');
     var vm = this;
     vm.domain = CONSTANTS.domain;
-    vm.loading = true;
     vm.myChallenges = [];
-    vm.userHasChallenges = true;
-    vm.viewActiveChallenges = viewActiveChallenges;
-    vm.viewPastChallenges = viewPastChallenges;
-    vm.view = 'tile';
+    vm.loading = CONSTANTS.STATE_LOADING;
+    vm.view = UserService.getPreference($state.$current.name+'.challengeListView') || 'tile';
     vm.changeView = changeView;
+    vm.changeFilter = changeFilter;
+    vm.loadMore = loadMore;
+    vm.getChallenges = getChallenges;
+    vm.totalCount = 0;
     vm.statusFilter = _.get($stateParams, 'status','active');
+    if (vm.statusFilter !== 'active' && vm.statusFilter !== 'completed') {
+      $log.error('invalid filter, defaulting to active');
+      vm.statusFilter = 'active';
+    }
+    vm.orderBy;
 
-    // paging params, these are updated by tc-pager
-    vm.pageParams = {
-      offset : 0,
-      limit: 16,
-      count: 0,
-      totalCount: 0,
-      // counter used to indicate page change
-      updated: 0
+    var currentOffset = 0;
+    var defaultParams = {
+      orderBy: 'submissionEndDate',
+      limit: 10
     };
-    vm.orderBy = 'submissionEndDate';
 
     var userId = userIdentity.userId;
     var handle = userIdentity.handle;
 
     activate();
 
     function activate() {
-      vm.isError = false;
       vm.isCopilot = _.includes(userIdentity.roles, 'copilot');
-
-      // watches page change counter to reload the data
-      $scope.$watch('vm.pageParams.updated', function(updatedParams) {
-        _getChallenges();
-      });
-      if (vm.statusFilter == 'completed') {
-        viewPastChallenges();
-      } else {
-        viewActiveChallenges();
-      }
+      vm.myChallenges = [];
+      changeFilter(vm.statusFilter);
     }
 
     function changeView(view) {
       vm.view = view;
+      // update UserPreference
+      UserService.setPreference($state.$current.name+'.challengeListView', view);
     }
 
-    function viewActiveChallenges() {
-      if (vm.statusFilter != 'active') {
-        vm.myChallenges = [];
-        vm.pageParams.offset = 0;
-        vm.statusFilter = 'active';
-        _getChallenges();
-      }
-    };
+    function changeFilter(filter) {
+      currentOffset = 0;
+      vm.statusFilter = filter;
+      vm.orderBy = vm.statusFilter === 'active' ? 'registrationEndDate' : 'submissionEndDate';
+      vm.getChallenges(currentOffset);
+    }
 
-    function viewPastChallenges() {
-      if (vm.statusFilter != 'completed') {
+    function getChallenges(offset) {
+      vm.loading = CONSTANTS.STATE_LOADING;
+      if (!offset) {
+        // reset
+        offset = 0;
         vm.myChallenges = [];
-        vm.pageParams.offset = 0;
-        vm.statusFilter = 'completed';
-        _getChallenges();
       }
-    };
 
-    function _getChallenges() {
       var params = {
-        limit: vm.pageParams.limit,
-        offset: vm.pageParams.offset,
-        orderBy: vm.orderBy, // TODO verify if this is the correct sort order clause,
+        limit: defaultParams.limit,
+        offset: offset,
+        orderBy: vm.orderBy + ' desc',
         filter: "status=" + vm.statusFilter
       };
-      vm.loading = true;
 
       return ChallengeService.getUserChallenges(handle, params)
-      .then(function(challenges){
+      .then(function(challenges) {
         if (vm.statusFilter == 'active') {
           ChallengeService.processActiveDevDesignChallenges(challenges);
         } else {
           ChallengeService.processPastChallenges(challenges);
         }
-        if (challenges.length > 0) {
-          vm.myChallenges = challenges;
-          vm.userHasChallenges = true;
-          vm.loading = false;
-        } else {
-          vm.userHasChallenges = false;
-          vm.loading = false;
-        }
+        vm.myChallenges = vm.myChallenges.concat(challenges);
+        vm.totalCount = challenges.metadata.totalCount;
+        vm.loading = CONSTANTS.STATE_READY;
       })
       .catch(function(err) {
-        vm.userHasChallenges = false;
-        vm.isError = true;
-        vm.loading = false;
+        vm.loading = CONSTANTS.STATE_ERROR;
         $log.error(err);
       });
     }
+
+    function loadMore() {
+      currentOffset+=1;
+      vm.getChallenges(currentOffset);
+    }
   }
 })();

app/my-challenges/my-challenges.jade

@@ -7,28 +7,29 @@
 
         .my-challenges // My Challenges
 
-    .section-loading(ng-show="vm.loading")
-
-    section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
-      p(ng-hide="vm.isError") You have not participated in any challenges yet.
-
-      p(ng-show="vm.isError") There was an error fetching challenges. Please try again later.
-
     .content
-      section.challenges(ng-show="vm.userHasChallenges && !vm.loading")
+      section.challenges
         .top
           .filters
-            a(ng-click="vm.viewActiveChallenges()", ng-class="{disabled: vm.statusFilter == 'active'}") Active
+            a(ng-click="vm.statusFilter !== 'active' && vm.changeFilter('active')", ng-class="{disabled: vm.statusFilter == 'active'}") Active
             span   |  
-            a(ng-click="vm.viewPastChallenges()", ng-class="{disabled: vm.statusFilter == 'completed'}") Past
+            a(ng-click="vm.statusFilter !== 'completed' && vm.changeFilter('completed')", ng-class="{disabled: vm.statusFilter == 'completed'}") Past
 
           .challenge-view-toggle
             button.tile(ng-click="vm.changeView('tile')", ng-class="{ disabled: vm.view === 'tile' }") Grid
 
             button.list(ng-click="vm.changeView('list')", ng-class="{ disabled: vm.view === 'list' }") List
 
-        .data(ng-class="vm.view + '-view'")
-          challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.view", ng-class="vm.view + '-view'")
+        .noChallenges(ng-show="vm.myChallenges.length === 0 && vm.loading === 'ready'")
+          p(ng-show="vm.statusFilter === 'completed'") You have not participated in any challenges yet.
+          p(ng-if="vm.statusFilter === 'active'") There are no upcoming challenges.
+
+        .hasChallenges(ng-show="vm.myChallenges.length")
+
+          .data(ng-class="vm.view + '-view'")                      
+            challenge-tile(
+              ng-repeat="challenge in vm.myChallenges | orderBy:vm.orderBy:false", 
+              challenge="challenge", view="vm.view", ng-class="vm.view + '-view'")
 
-        .bottom
-          tc-paginator(data="vm.myChallenges", page-params="vm.pageParams")
+          tc-section(state="vm.loading")
+              button.tc-btn(ng-show="vm.totalCount > vm.myChallenges.length", ng-click="vm.loadMore()") Load More

app/my-challenges/my-challenges.spec.js

@@ -2,7 +2,7 @@
 describe('My Challenges Controller', function() {
   var controller;
   var domain;
-  var authService, challengeService, userService, identity;
+  var authService, challengeService, userService, identity, mockState;
   var marathons = mockData.getMockMarathons();
   var challenges = mockData.getMockiOSChallenges();
 
@@ -35,6 +35,8 @@ describe('My Challenges Controller', function() {
       };
     };
 
+    mockState = { '$current' : {'name': 'test'}};
+
     // mock user api
     sinon.stub(userService, 'getUserIdentity', function() {
       return {
@@ -63,59 +65,62 @@ describe('My Challenges Controller', function() {
 
   bard.verifyNoOutstandingHttpRequests();
 
-  xdescribe('inialization', function() {
-    var myChallenges = null;
+  describe('intialization', function() {
+    var ctrl = null;
+    var spy;
     beforeEach( function(){
       $scope = $rootScope.$new();
-      myChallenges = $controller('MyChallengesController', {
+      ctrl = $controller('MyChallengesController', {
         ChallengeService : challengeService,
         UserService : userService,
         $scope: $scope,
         userIdentity: identity,
-        statusFilter: 'active'
+        $state: mockState
       });
       $rootScope.$apply();
+      spy = sinon.spy(ctrl, 'getChallenges');
     });
 
     it('vm.domain should exist', function() {
-      expect(myChallenges.domain).to.equal(domain);
+      expect(ctrl.domain).to.equal(domain);
     });
 
-    it('vm.userHasChallenges should be initialized to default value', function() {
+    it('default values should be initialized', function() {
       // default value for pageIndex
-      expect(myChallenges.userHasChallenges).to.equal(true);
-    });
-
-    it('myChallenges.myChallenges should be initialized', function() {
-      // default value for pageIndex
-      expect(myChallenges.myChallenges).to.exist;
-      expect(myChallenges.myChallenges.length).to.equal(challenges.length);
+      expect(ctrl.myChallenges).to.exist;
+      // expect(ctrl.myChallenges.length).to.equal(challenges.length);
+      expect(ctrl.totalCount).to.equal(2);
+      expect(ctrl.statusFilter).to.equal('active');
+      expect(ctrl.view).to.equal('tile');
+      expect(ctrl.loading).to.equal('ready');
+      expect(spy.withArgs(0).calledOnce);
     });
   });
 
-  xdescribe('active/past filters', function() {
-    var myChallenges = null;
+  describe('active/past filters', function() {
+    var ctrl = null;
+    var spy;
     beforeEach( function(){
       $scope = $rootScope.$new();
-      myChallenges = $controller('MyChallengesController', {
+      ctrl = $controller('MyChallengesController', {
         ChallengeService : challengeService,
         UserService : userService,
         $scope: $scope,
         userIdentity: identity,
-        statusFilter: 'completed'
+        $state: mockState,
+        $stateParams: {'status': 'completed'}
       });
       $rootScope.$apply();
+      spy = sinon.spy(ctrl, 'getChallenges');
     });
 
     it('past challenges should be fetched', function() {
-      expect(myChallenges.myChallenges).to.exist;
-      expect(myChallenges.myChallenges.length).to.equal(challenges.length);
-      // apply past filter
-      myChallenges.viewPastChallenges();
-      $rootScope.$apply();
-      expect(myChallenges.myChallenges).to.exist;
+      expect(ctrl.myChallenges).to.exist;
       // should have one less challenge for past filter as per mocked method
-      expect(myChallenges.myChallenges.length).to.equal(challenges.length - 1);
+      expect(ctrl.myChallenges.length).to.equal(challenges.length - 1);
+      expect(spy.withArgs(0).calledOnce);
+      expect(ctrl.statusFilter).to.equal('completed');
+      expect(ctrl.loading).to.equal('ready');
     });
   });