Performance: My Challenges (#11065)

* use the same paging for "myChallenges" only loads 10 per call

* challenges: show loading above the load-more button (instead at the top)

* purple loading message and flat load-more button

* remove comment

* show loadMore button only when the request has 10 entries

* challenge card ui

website/client/assets/scss/categories.scss

@@ -13,14 +13,19 @@
   min-width: 100px;
   border-radius: 100px;
   background-color: $gray-600;
-  padding: .5em;
+  padding: 4px 12px;
   display: inline-block;
-  margin: .25em;
+  margin-right: 4px;
-  font-size: 12px;
+  margin-top: 8px;
-  font-weight: 500;
-  line-height: 1.33;
   text-align: center;
-  color: $gray-300;
+
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  color: $gray-100;
 }
 
 .category-label-purple {

website/client/assets/svg/official.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#6133B4" d="M10 18.5l-3.09 1.01-1.906-2.633-3.094-1 .006-3.25L0 10l1.916-2.627-.006-3.25 3.094-1L6.91.49 10 1.5 13.09.49l1.906 2.633 3.094 1-.006 3.25L20 10l-1.916 2.627.006 3.25-3.094 1-1.906 2.634z"/>
+        <path fill="#FFF" d="M8.994 13.333a.795.795 0 0 1-.563-.233l-2.598-2.598L6.96 9.376l1.99 1.989 4.026-4.698 1.21 1.036L9.6 13.055a.801.801 0 0 1-.575.278h-.03"/>
+    </g>
+</svg>

website/client/components/challenges/challengeItem.vue

@@ -4,28 +4,26 @@
     .number
       span.svg-icon(v-html="icons.gemIcon")
       span.value {{challenge.prize}}
-    .label {{ $t('challengePrize') }}
+    .label {{ $t('prize') }}
   .challenge-header
     router-link(
       :to="{ name: 'challenge', params: { challengeId: challenge._id } }"
     )
       h3.challenge-title(v-markdown='challenge.name')
-    .owner(v-if="fullLayout")
+    .meta-info
-      .owner-item
+      .member-count
-        strong {{ $t('createdBy') }}:
-        user-link.mx-1(:user="challenge.leader")
-      .owner-item(v-if="challenge.group && !isTavern(challenge.group)")
-        strong {{ $t(challenge.group.type) }}:
-        group-link.mx-1(:group="challenge.group")
-    .meta
-      .meta-item
         .svg-icon.user-icon(v-html="icons.memberIcon")
-        span.mx-1 {{challenge.memberCount}}
+        span.count-label {{challenge.memberCount}}
-      // @TODO: add end date
+      .divider
-        .meta-item
+      .official(v-if="isOfficial")
-          .svg-icon(v-html="icons.calendarIcon")
+        .svg-icon.user-icon(v-html="icons.officialIcon")
-          strong.mx-1 {{ $t('endDate')}}:
+      .owner(v-if="fullLayout")
-          span {{challenge.endDate}}
+        .owner-item
+          strong {{ $t('createdBy') }}:
+          user-link.mx-1(:user="challenge.leader")
+        .owner-item(v-if="challenge.group && !isTavern(challenge.group)")
+          strong {{ $t(challenge.group.type) }}:
+          group-link.mx-1(:group="challenge.group")
   category-tags.challenge-categories(
     :categories="challenge.categories",
     :owner="isOwner",
@@ -42,16 +40,23 @@
 </template>
 
 <style lang="scss">
+  @import '~client/assets/scss/colors.scss';
   // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
   .challenge-title > p {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     max-height: 3em;
-    line-height: 1.5em;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
+    font-size: 20px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: condensed;
+    line-height: 1.4;
+    letter-spacing: normal;
+    color: $gray-10;
   }
 </style>
 
@@ -84,36 +89,90 @@
       font-size: .9em;
     }
 
+    .official {
+      margin-right: 8px;
+    }
+
     .challenge-prize {
       text-align: center;
       color: $gems-color;
       display: inline-block;
       float: right;
-      padding: 1em 1.5em;
+      padding: 18px 24px;
       margin-left: 1em;
-      background: #eefaf6;
+      background: #24cc8f19;
       border-bottom-left-radius: 4px;
+      width: 107px;
+      height: 80px;
 
       .svg-icon {
-        width: 32px;
+        width: 24px;
+        height: 24px;
+        object-fit: contain;
+      }
+
+      .value {
+        margin-left: 8px;
+        font-size: 20px;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.4;
+        letter-spacing: normal;
+        color: #1ca372;
+      }
+
+      .label {
+        margin-top: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.33;
+        letter-spacing: normal;
+        text-align: center;
+        color: #1ca372;
       }
     }
 
-    .challenge-header,
+    .divider {
-    .well-wrapper {
+      width: 1px;
-      padding: 1em 1.5em;
+      height: 16px;
+      background-color: $gray-600;
+      margin-right: 12px;
+      margin-left: 12px;
     }
 
     .challenge-header {
-      padding-bottom: .5em;
+      padding: 16px 20px;
     }
 
-    .owner {
+    .well-wrapper {
-      margin: 1em 0 .5em;
+      padding: 16px 20px 20px;
     }
 
-    .meta, .owner {
+    .challenge-header {
-      display: flex;
+      padding-bottom: 0;
+    }
+
+    .meta-info {
+      height: 24px;
+      margin-bottom: 8px;
+    }
+
+    .count-label {
+      font-size: 14px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.71;
+      letter-spacing: normal;
+      color: $gray-50;
+      margin-left: 4px;
+    }
+
+    .meta-info, .owner, .member-count {
+      display: inline-flex;
       align-items: center;
       flex-wrap: wrap;
     }
@@ -134,7 +193,7 @@
     .challenge-categories {
       clear: right;
       display: flex;
-      padding: 0 1.5em 1em;
+      padding: 0 20px 16px;
       flex-wrap: wrap;
     }
 
@@ -159,9 +218,16 @@
     }
 
     .challenge-description {
-      color: $gray-200;
+      margin: 0 20px 0;
-      margin: 0 1.5em;
       word-break: break-word;
+
+      font-size: 14px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.71;
+      letter-spacing: normal;
+      color: $gray-50;
     }
 
     .well {
@@ -170,22 +236,65 @@
       justify-content: space-evenly;
       background-color: $gray-700;
       text-align: center;
-      padding: 1em;
+      padding: 16px;
       border-radius: .25em;
 
       > div {
-        color: $gray-200;
+        .value {
+          font-size: 20px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.4;
+          letter-spacing: normal;
+          color: $gray-50;
+        }
+
+        .label {
+          font-size: 12px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.33;
+          letter-spacing: normal;
+          text-align: center;
+          color: $gray-100;
+        }
 
         .svg-icon {
-          color: $gray-300;
+          object-fit: contain;
+          color: $gray-100;
         }
       }
 
       > div.muted {
-        color: $gray-400;
+        .value {
+          opacity: 0.5;
+          font-size: 20px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.4;
+          letter-spacing: normal;
+          color: $gray-50;
+        }
+
+        .label {
+          opacity: 0.5;
+          font-size: 12px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.33;
+          letter-spacing: normal;
+          text-align: center;
+          color: $gray-100;
+        }
 
         .svg-icon {
-          color: $gray-500;
+          object-fit: contain;
+          opacity: 0.5;
+          color: $gray-100;
         }
       }
     }
@@ -208,6 +317,7 @@
   import todoIcon from 'assets/svg/todo.svg';
   import dailyIcon from 'assets/svg/daily.svg';
   import rewardIcon from 'assets/svg/reward.svg';
+  import officialIcon from 'assets/svg/official.svg';
 
   export default {
     props: {
@@ -232,6 +342,7 @@
           gemIcon,
           memberIcon,
           calendarIcon,
+          officialIcon,
         }),
       };
     },
@@ -243,6 +354,9 @@
       isMember () {
         return this.user.challenges.indexOf(this.challenge._id) !== -1;
       },
+      isOfficial () {
+        return this.challenge.official || this.challenge.categories.map(category => category.slug).includes('habitica_official');
+      },
       tasksData () {
         return [
           {

website/client/components/challenges/findChallenges.vue

@@ -6,7 +6,6 @@
     .row.header-row
       .col-md-8.text-left
         h1(v-once) {{$t('findChallenges')}}
-        h2(v-if='loading') {{ $t('loading') }}
       .col-md-4
         // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
@@ -24,8 +23,11 @@
         challenge-item(:challenge='challenge')
 
     .row
-      .col-12.text-center(v-if='!loading && filteredChallenges.length > 0')
+      h2.col-12.loading(v-if='loading') {{ $t('loading') }}
-        button.btn.btn-secondary(@click='loadMore()') {{ $t('loadMore') }}
+
+    .row
+      .col-12.text-center(v-if='showLoadMore && !loading && filteredChallenges.length > 0')
+        button.btn.btn-flat.btn-show-more(@click='loadMore()') {{ $t('loadMore') }}
 </template>
 
 <style lang='scss' scoped>
@@ -56,6 +58,11 @@
       color: $gray-200;
     }
   }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
 </style>
 
 <script>
@@ -78,6 +85,7 @@ export default {
   data () {
     return {
       loading: true,
+      showLoadMore: true,
       icons: Object.freeze({
         positiveIcon,
       }),
@@ -111,7 +119,7 @@ export default {
     };
   },
   mounted () {
-    this.loadchallanges();
+    this.loadChallenges();
   },
   computed: {
     ...mapState({user: 'user.data'}),
@@ -123,17 +131,17 @@ export default {
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
       this.page = 0;
-      this.loadchallanges();
+      this.loadChallenges();
     },
     updateFilters (eventData) {
       this.filters = eventData;
       this.page = 0;
-      this.loadchallanges();
+      this.loadChallenges();
     },
     createChallenge () {
       this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
-    async loadchallanges () {
+    async loadChallenges () {
       this.loading = true;
 
       let categories = '';
@@ -160,6 +168,9 @@ export default {
         this.challenges = this.challenges.concat(challenges);
       }
 
+      // only show the load more Button if the max count was returned
+      this.showLoadMore = challenges.length === 10;
+
       this.loading = false;
     },
     challengeCreated (challenge) {
@@ -167,7 +178,7 @@ export default {
     },
     async loadMore () {
       this.page += 1;
-      this.loadchallanges();
+      this.loadChallenges();
     },
   },
 };

website/client/components/challenges/myChallenges.vue

@@ -7,7 +7,6 @@
     .row.header-row
       .col-md-8.text-left
         h1(v-once) {{$t('myChallenges')}}
-        h2(v-if='loading && challenges.length === 0') {{ $t('loading') }}
       .col-md-4
         // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
@@ -30,6 +29,13 @@
     .row
       .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
+
+    .row
+      h2.col-12.loading(v-if='loading') {{ $t('loading') }}
+
+    .row
+      .col-12.text-center(v-if='showLoadMore && !loading && filteredChallenges.length > 0')
+        button.btn.btn-flat.btn-show-more(@click='loadMore()') {{ $t('loadMore') }}
 </template>
 
 <style lang='scss' scoped>
@@ -66,9 +72,15 @@
       margin: 1em auto;
     }
   }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
@@ -91,6 +103,7 @@ export default {
         positiveIcon,
       }),
       loading: false,
+      showLoadMore: true,
       challenges: [],
       sort: 'none',
       sortOptions: [
@@ -117,29 +130,44 @@ export default {
       ],
       search: '',
       filters: {},
+      page: 0,
     };
   },
   mounted () {
     this.loadChallenges();
   },
   computed: {
+    ...mapState({user: 'user.data'}),
     filteredChallenges () {
-      let search = this.search;
+      const filters = this.filters;
-      let filters = this.filters;
+      const user = this.user;
-      let user = this.$store.state.user.data;
 
-      // @TODO: Move this to the server
+      return this.challenges.filter(challenge => {
-      return this.challenges.filter((challenge) => {
+        let isMember = true;
-        return this.filterChallenge(challenge, filters, search, user);
+
+        let filteringRole = filters.roles && filters.roles.length > 0;
+        if (filteringRole && filters.roles.indexOf('participating') !== -1) {
+          isMember = this.isMemberOfChallenge(user, challenge);
+        }
+
+        if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
+          isMember = !this.isMemberOfChallenge(user, challenge);
+        }
+
+        return isMember;
       });
     },
   },
   methods: {
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
+      this.page = 0;
+      this.loadChallenges();
     },
     updateFilters (eventData) {
       this.filters = eventData;
+      this.page = 0;
+      this.loadChallenges();
     },
     createChallenge () {
       this.$store.state.challengeOptions.workingChallenge = {};
@@ -147,14 +175,44 @@ export default {
     },
     async loadChallenges () {
       this.loading = true;
-      this.challenges = await this.$store.dispatch('challenges:getUserChallenges', {
+
+      let categories = '';
+      if (this.filters.categories) {
+        categories = this.filters.categories.join(',');
+      }
+
+      let owned = '';
+      // @TODO: we skip ownership === 2 because it is the same as === 0 right now
+      if (this.filters.ownership && this.filters.ownership.length === 1) {
+        owned = this.filters.ownership[0];
+      }
+
+      const challenges = await this.$store.dispatch('challenges:getUserChallenges', {
+        page: this.page,
+        search: this.search,
+        categories,
+        owned,
         member: true,
       });
+
+      if (this.page === 0) {
+        this.challenges = challenges;
+      } else {
+        this.challenges = this.challenges.concat(challenges);
+      }
+
+      // only show the load more Button if the max count was returned
+      this.showLoadMore = challenges.length === 10;
+
       this.loading = false;
     },
     challengeCreated (challenge) {
       this.challenges.push(challenge);
     },
+    async loadMore () {
+      this.page += 1;
+      this.loadChallenges();
+    },
   },
 };
 </script>

website/client/components/userLink.vue

@@ -11,10 +11,6 @@
 <style scoped lang="scss">
   @import '~client/assets/scss/colors.scss';
 
-  a {
-    color: $gray-50;
-  }
-
   a.leader { // this is the user name
     font-family: 'Roboto Condensed', sans-serif;
     font-weight: bold;

website/client/mixins/challengeUtilities.js

@@ -1,48 +1,7 @@
-import intersection from 'lodash/intersection';
-
 export default {
   methods: {
     isMemberOfChallenge (user, challenge) {
       return user.challenges.indexOf(challenge._id) !== -1;
     },
-    isLeaderOfChallenge (user, challenge) {
-      return challenge.leader && user._id === challenge.leader._id;
-    },
-    filterChallenge (challenge, filters, search, user) {
-      let passedSearch = true;
-      let hasCategories = true;
-      let isMember = true;
-      let isLeader = true;
-      let ownerShip = true;
-
-      if (search) {
-        passedSearch = challenge.name.toLowerCase().indexOf(search.toLowerCase()) >= 0;
-      }
-
-      if (filters.categories && filters.categories.length > 0) {
-        let challengeCategories = challenge.categories.map(chal => chal.slug);
-        let intersectingCats = intersection(filters.categories, challengeCategories);
-        hasCategories = intersectingCats.length > 0;
-      }
-
-      let filteringRole = filters.roles && filters.roles.length > 0;
-      if (filteringRole && filters.roles.indexOf('participating') !== -1) {
-        isMember = this.isMemberOfChallenge(user, challenge);
-      }
-
-      if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
-        isMember = !this.isMemberOfChallenge(user, challenge);
-      }
-
-      if (filters.ownership && filters.ownership.indexOf('not_owned') !== -1) {
-        ownerShip = !this.isLeaderOfChallenge(user, challenge);
-      }
-
-      if (filters.ownership && filters.ownership.indexOf('owned') !== -1) {
-        ownerShip = this.isLeaderOfChallenge(user, challenge);
-      }
-
-      return passedSearch && hasCategories && isMember && isLeader && ownerShip;
-    },
   },
 };

website/server/controllers/api-v3/challenges.js

@@ -410,7 +410,7 @@ api.getUserChallenges = {
     // Instead of populate we make a find call manually because of https://github.com/Automattic/mongoose/issues/3833
     await Promise.all(resChals.map((chal, index) => {
       return Promise.all([
-        User.findById(chal.leader).select(nameFields).exec(),
+        User.findById(chal.leader).select(`${nameFields} backer contributor`).exec(),
         Group.findById(chal.group).select(basicGroupFields).exec(),
       ]).then(populatedData => {
         resChals[index].leader = populatedData[0] ? populatedData[0].toJSON({minimize: true}) : null;