Joined and Owned Challenges should still appear in Discover, but annotated with status (#9956)

website/client/assets/scss/categories.scss

@@ -15,7 +15,7 @@
   background-color: $gray-600;
   padding: .5em;
   display: inline-block;
-  margin-right: .5em;
+  margin: .25em;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.33;
@@ -33,6 +33,11 @@
   background: $blue-50;
 }
 
+.category-label-green {
+  color: white;
+  background: $green-50;
+}
+
 .category-select {
   border-radius: 2px;
   background-color: $white;

website/client/components/categories/categoryTags.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
   .categories
-    span.category-label.category-label-blue(v-if='isOwner')
+    span.category-label.category-label-blue(v-if='owner')
       | {{ $t('owned') }}
+    span.category-label.category-label-green(v-if='member')
+      | {{ $t('joined') }}
     span.category-label(
       v-for='category in categories',
       :class="{'category-label-purple':isOfficial(category)}"
@@ -11,21 +13,16 @@
 </template>
 
 <script>
-  import {mapState} from 'client/libs/store';
-
   export default {
     props: {
       categories: {
         required: true,
       },
-      ownerId: {
+      owner: {
-        default: null,
+        default: false,
       },
-    },
+      member: {
-    computed: {
+        default: false,
-      ...mapState({user: 'user.data'}),
-      isOwner () {
-        return this.ownerId && this.ownerId === this.user._id;
       },
     },
     methods: {

website/client/components/challenges/challengeItem.vue

@@ -26,7 +26,7 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  category-tags.challenge-categories(:categories="challenge.categories", :owner-id="challenge.leader._id", v-once)
+  category-tags.challenge-categories(:categories="challenge.categories", :owner="isOwner", :member="isMember" v-once)
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well
@@ -195,6 +195,7 @@
   import groupLink from '../groupLink';
   import categoryTags from '../categories/categoryTags';
   import markdownDirective from 'client/directives/markdown';
+  import {mapState} from 'client/libs/store';
 
   import gemIcon from 'assets/svg/gem.svg';
   import memberIcon from 'assets/svg/member-icon.svg';
@@ -231,6 +232,13 @@
       };
     },
     computed: {
+      ...mapState({user: 'user.data'}),
+      isOwner () {
+        return this.challenge.leader && this.challenge.leader._id === this.user._id;
+      },
+      isMember () {
+        return this.user.challenges.indexOf(this.challenge._id) !== -1;
+      },
       tasksData () {
         return [
           {

website/client/components/challenges/findChallenges.vue

@@ -15,7 +15,7 @@
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
           span(v-once) {{$t('createChallenge')}}
     .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
     .row
       .col-12.text-center
@@ -105,9 +105,6 @@ export default {
     },
   },
   methods: {
-    memberOf (challenge) {
-      return this.user.challenges.indexOf(challenge._id) !== -1;
-    },
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
       this.page = 0;

website/client/components/groups/publicGuildItem.vue

@@ -24,7 +24,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                 span.count {{ guild.balance * 4 }}
               div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
           .row
-            category-tags.col-md-12(:categories="guild.categories", :owner-id="guild.leader", v-once)
+            category-tags.col-md-12(:categories="guild.categories", :owner="isOwner", v-once)
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
 
@@ -146,6 +146,9 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    isOwner () {
+      return this.guild.leader && this.guild.leader === this.user._id;
+    },
     isMember () {
       return this.isMemberOfGroup(this.user, this.guild);
     },