Show empty state if a user has not participated in any challenges

Author: Nick Litwin

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

@@ -10,6 +10,7 @@
     vm.domain = CONSTANTS.domain;
     vm.loading = true;
     vm.myChallenges = [];
+    vm.userHasChallenges = true;
 
     // Can we remove these since the filter is going on a different page?
     vm.viewActiveChallenges = viewActiveChallenges;
@@ -51,20 +52,26 @@
         var challenges = data[0];
         var spotlightChallenges = data[1];
 
-        // Helpers.addTrack(challenges);
-        processChallengesResponse(challenges);
+        if (challenges.length > 0) {
+          processChallengesResponse(challenges);
 
-        vm.myChallenges = challenges;
-        console.log('regular challenges: ', vm.myChallenges.plain())
+          vm.myChallenges = challenges;
+          console.log('regular challenges: ', vm.myChallenges.plain())
 
-        vm.spotlightChallenge = spotlightChallenges[0];
-        console.log('spotlight: ', vm.spotlightChallenge);
-
-        vm.loading = false;
+          vm.spotlightChallenge = spotlightChallenges[0];
+          console.log('spotlight: ', vm.spotlightChallenge);
 
+          vm.userHasChallenges = true;
+          vm.loading = false;
+        } else {
+          vm.userHasChallenges = false;
+          vm.spotlightChallenges = spotlightChallenges.slice(0, 2);
+          vm.loading = false;
+        }
       })
       .catch(function(err) {
         $log.error(err);
+        vm.userHasChallenges = true;
         vm.loading = false;
         // TODO - handle error
       });

app/my-dashboard/my-challenges/my-challenges.jade

@@ -1,12 +1,14 @@
 header
   h1.section-title My Challenges
 
-  p
+  p.noChallenges(ng-hide="vm.userHasChallenges") You have not participated in any challenges yet.
+
+  p.viewChallenges(ng-show="vm.userHasChallenges")
     a(ui-sref="something") View All My Challenges
 
 .section-loading(ng-show="vm.loading")
 
-section.challenges(ng-hide="vm.loading")
+section.challenges(ng-if="vm.userHasChallenges && !vm.loading")
   challenge-tile.tile(ng-repeat="challenge in vm.myChallenges", challenge="challenge", domain="vm.domain")
 
   challenge-tile.tile.spotlight(spotlight, challenge="vm.spotlightChallenge", domain="vm.domain")
@@ -15,10 +17,13 @@ section.challenges(ng-hide="vm.loading")
   .new-challenges.link
     a(href="https://www.{{vm.domain}}/challenges/") Find New Challenges
 
-  .topcoder-direct.link
+  .topcoder-direct.link(ng-show="vm.userHasChallenges")
     a(href="https://www.{{vm.domain}}/direct") Launch Topcoder Direct
 
-  .help-library.link(ng-show='vm.myChallenges.length == 0')
+  .help-library.link(ng-hide="vm.userHasChallenges")
     a(href="https://community.{{vm.domain}}/", target="_blank") View Help Library
 
+.spotlightChallenges(ng-hide="vm.userHasChallenges")
+  challenge-tile.tile.spotlight(ng-repeat="spotlight in vm.spotlightChallenges", spotlight, challenge="spotlight", domain="vm.domain")
+
 hr

app/services/helpers.service.js

@@ -16,8 +16,7 @@
       countCompleted: countCompleted,
       getParameterByName: getParameterByName,
       getPageTitle: getPageTitle,
-      isEmail: isEmail,
-      addTrack: addTrack
+      isEmail: isEmail
     };
     return service;
 
@@ -162,47 +161,5 @@
       var re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
       return re.test(value);
     }
-
-    function addTrack(challenges) {
-      var tracks = {
-        'Application Front-End Design': 'design',
-        'Banners/Icons': 'design',
-        'Design First2Finish': 'design',
-        'Front-End Flash': 'design',
-        'Idea Generation': 'design',
-        'Logo Design': 'design',
-        'Print/Presentation': 'design',
-        'Studio Other': 'design',
-        'Web Design': 'design',
-        'Widget or Mobile Screen Design': 'design',
-        'Wireframes': 'design',
-        'Architecture': 'develop',
-        'Assembly': 'develop',
-        'Bug Hunt': 'develop',
-        'Code': 'develop',
-        'Conceptualization': 'develop',
-        'Content Creation': 'develop',
-        'Copilot Posting': 'develop',
-        'Component Design': 'develop',
-        'Component Development': 'develop',
-        'First2Finish': 'develop',
-        'Marathon Match': 'develop',
-        'RIA Build': 'develop',
-        'Specification': 'develop',
-        'Test Scenarios': 'develop',
-        'Test Suites': 'develop',
-        'UI Prototype': 'develop'
-      }
-
-      challenges.forEach(function(challenge) {
-        var subtrack = challenge.challengeType;
-        if (tracks[subtrack]) {
-          challenge.track = tracks[subtrack];
-          challenge.userDetails.roles = ['R', 'CP'];
-        } else {
-          challenge.track = 'Data Science';
-        }
-      });
-    }
   }
 })();

assets/css/member-dashboard/my-challenges.scss

@@ -17,7 +17,13 @@ $url_10: url(../images/sort-arrows.png);
       text-align: center;
     }
 
-    p {
+    p.noChallenges {
+      text-align: center;
+      margin-top: 10px;
+      font-size: 18px;
+    }
+
+    p.viewChallenges {
       position: absolute;
       top: 3px;
       right: 10px;
@@ -35,4 +41,12 @@ $url_10: url(../images/sort-arrows.png);
        margin, since we can't use .tile:first-child here */
     margin-left: -20px;
   }
+
+  .spotlightChallenges {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
 }