Created reusable category tags component.

website/client/components/categories/categoryTags.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  .categories
+    span.category-label.category-label-blue(v-if='isOwner')
+     | {{ $t('owned') }}
+    span.category-label(
+      v-for='category in categories',
+      :class="{'category-label-purple':isOfficial(category)}"
+    )
+     | {{ $t(category.name) }}
+    slot
+</template>
+
+<script>
+  import {mapState} from 'client/libs/store';
+
+  export default {
+    props: {
+      categories: {
+        required: true,
+      },
+      ownerId: {
+        default: null,
+      },
+    },
+    computed: {
+      ...mapState({user: 'user.data'}),
+      isOwner () {
+        return this.ownerId && this.ownerId === this.user._id;
+      },
+    },
+    methods: {
+      isOfficial (category) {
+        return category.name === 'habitica_official';
+      },
+    },
+  };
+</script>

website/client/components/challenges/challengeItem.vue

@@ -26,9 +26,7 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  .categories
+  category-tags(:categories="challenge.categories", :owner-id="challenge.leader._id", v-once)
-    span.category-label.category-label-blue(v-if='isLeader(challenge)') {{ $t('owned') }}
-    span.category-label(v-for='category in challenge.categories', :class="{'category-label-purple':isOfficial(category)}") {{ $t(category.name) }}
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well
@@ -213,9 +211,9 @@
 
 <script>
   import { TAVERN_ID } from '../../../common/script/constants';
-  import {mapState} from 'client/libs/store';
   import userLink from '../userLink';
   import groupLink from '../groupLink';
+  import categoryTags from '../categories/categoryTags';
   import markdownDirective from 'client/directives/markdown';
 
   import gemIcon from 'assets/svg/gem.svg';
@@ -238,6 +236,7 @@
     components: {
       userLink,
       groupLink,
+      categoryTags,
     },
     data () {
       return {
@@ -252,20 +251,10 @@
         }),
       };
     },
-    computed: {
-      ...mapState({user: 'user.data'}),
-    },
     directives: {
       markdown: markdownDirective,
     },
     methods: {
-      isLeader (challenge) {
-        if (!challenge.leader) return false;
-        return this.user._id === challenge.leader._id;
-      },
-      isOfficial (category) {
-        return category.name === 'habitica_official';
-      },
       isTavern (group) {
         return group._id === TAVERN_ID;
       },

website/client/components/groups/publicGuildItem.vue

@@ -24,13 +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
-            .col-md-12
+            category-tags.col-md-12(:categories="guild.categories", :owner-id="guild.leader", v-once)
-              .category-label.category-label-blue(v-if='isLeader(guild)') {{ $t('owned') }}
-              .category-label(
-                v-for="category in guild.categorySlugs"
-                :class="{'category-label-purple': isOfficial(category)}"
-              )
-                | {{$t(category)}}
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
 
@@ -132,6 +126,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
 <script>
 import moment from 'moment';
 import { mapState } from 'client/libs/store';
+import categoryTags from '../categories/categoryTags';
 import groupUtilities from 'client/mixins/groupsUtilities';
 import markdown from 'client/directives/markdown';
 import gemIcon from 'assets/svg/gem.svg';
@@ -146,6 +141,9 @@ export default {
     markdown,
   },
   props: ['guild', 'displayLeave', 'displayGemBank'],
+  components: {
+    categoryTags,
+  },
   computed: {
     ...mapState({user: 'user.data'}),
     isMember () {
@@ -180,13 +178,6 @@ export default {
       // @TODO: ask about challenges when we add challenges
       await this.$store.dispatch('guilds:leave', {groupId: this.guild._id, type: 'myGuilds'});
     },
-    isLeader (guild) {
-      if (!guild.leader) return false;
-      return this.user._id === guild.leader;
-    },
-    isOfficial (category) {
-      return category === 'habitica_official';
-    },
   },
 };
 </script>