Fixes issue #14175 - Consolidate Challenge category options list to common file (#14201)

* Issue #14175 - Created a categoryOptions.js file in website/common/script/content to store list of category Options. Imported and added the list to website/client/src/components : challenges/challengeModal, challenges/sidebar, groups/groupFormModal, and groups/groupSidebar. This replaced the statically typed lists that previously existed. Tested the challengeModal and sidebar but unable to test the groups files due to credit card requirements. -@Tundrian

* Issue #14175 - Created a categoryOptions.js file in website/common/script/content to store list of category Options. Imported and added the list to website/client/src/components : challenges/challengeModal, challenges/sidebar, groups/groupFormModal, and groups/groupSidebar. This replaced the statically typed lists that previously existed. Tested the challengeModal and sidebar but unable to test the groups files due to credit card requirements. -@Tundrian

Co-authored-by: SabreCat <sabe@habitica.com>

website/client/src/components/challenges/challengeModal.vue

@@ -280,6 +280,7 @@ import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
 
 import { TAVERN_ID, MIN_SHORTNAME_SIZE_FOR_CHALLENGES, MAX_SUMMARY_SIZE_FOR_CHALLENGES } from '@/../../common/script/constants';
+import CategoryOptions from '@/../../common/script/content/categoryOptions';
 
 export default {
   directives: {
@@ -288,64 +289,7 @@ export default {
   mixins: [userStateMixin],
   props: ['groupId'],
   data () {
-    const categoryOptions = [
+    const categoryOptions = CategoryOptions;
-      {
-        label: 'habitica_official',
-        key: 'habitica_official',
-      },
-      {
-        label: 'academics',
-        key: 'academics',
-      },
-      {
-        label: 'advocacy_causes',
-        key: 'advocacy_causes',
-      },
-      {
-        label: 'creativity',
-        key: 'creativity',
-      },
-      {
-        label: 'entertainment',
-        key: 'entertainment',
-      },
-      {
-        label: 'finance',
-        key: 'finance',
-      },
-      {
-        label: 'health_fitness',
-        key: 'health_fitness',
-      },
-      {
-        label: 'hobbies_occupations',
-        key: 'hobbies_occupations',
-      },
-      {
-        label: 'location_based',
-        key: 'location_based',
-      },
-      {
-        label: 'mental_health',
-        key: 'mental_health',
-      },
-      {
-        label: 'getting_organized',
-        key: 'getting_organized',
-      },
-      {
-        label: 'self_improvement',
-        key: 'self_improvement',
-      },
-      {
-        label: 'spirituality',
-        key: 'spirituality',
-      },
-      {
-        label: 'time_management',
-        key: 'time_management',
-      },
-    ];
     const hashedCategories = {};
     categoryOptions.forEach(category => {
       hashedCategories[category.key] = category.label;

website/client/src/components/challenges/sidebar.vue

@@ -89,70 +89,14 @@
 import throttle from 'lodash/throttle';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import FilterGroup from '@/components/ui/filterGroup';
+import CategoryOptions from '@/../../common/script/content/categoryOptions';
 
 export default {
   components: { FilterGroup, FilterSidebar },
   data () {
     return {
       categoryFilters: [],
-      categoryOptions: [
+      categoryOptions: CategoryOptions,
-        {
-          label: 'habitica_official',
-          key: 'habitica_official',
-        },
-        {
-          label: 'academics',
-          key: 'academics',
-        },
-        {
-          label: 'advocacy_causes',
-          key: 'advocacy_causes',
-        },
-        {
-          label: 'creativity',
-          key: 'creativity',
-        },
-        {
-          label: 'entertainment',
-          key: 'entertainment',
-        },
-        {
-          label: 'finance',
-          key: 'finance',
-        },
-        {
-          label: 'health_fitness',
-          key: 'health_fitness',
-        },
-        {
-          label: 'hobbies_occupations',
-          key: 'hobbies_occupations',
-        },
-        {
-          label: 'location_based',
-          key: 'location_based',
-        },
-        {
-          label: 'mental_health',
-          key: 'mental_health',
-        },
-        {
-          label: 'getting_organized',
-          key: 'getting_organized',
-        },
-        {
-          label: 'self_improvement',
-          key: 'self_improvement',
-        },
-        {
-          label: 'spirituality',
-          key: 'spirituality',
-        },
-        {
-          label: 'time_management',
-          key: 'time_management',
-        },
-      ],
       membershipFilters: [],
       membershipOptions: [
         {

website/client/src/components/groups/groupFormModal.vue

@@ -379,6 +379,7 @@ import informationIcon from '@/assets/svg/information.svg';
 
 import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
 import { userStateMixin } from '../../mixins/userState';
+import CategoryOptions from '@/../../common/script/content/categoryOptions';
 
 // @TODO: Not sure the best way to pass party creating status
 // Since we need the modal in the header, passing props doesn't work
@@ -410,64 +411,7 @@ export default {
         allowGuildInvitationsFromNonMembers: true,
         bannedWordsAllowed: null,
       },
-      categoryOptions: [
+      categoryOptions: CategoryOptions,
-        {
-          label: 'habitica_official',
-          key: 'habitica_official',
-        },
-        {
-          label: 'academics',
-          key: 'academics',
-        },
-        {
-          label: 'advocacy_causes',
-          key: 'advocacy_causes',
-        },
-        {
-          label: 'creativity',
-          key: 'creativity',
-        },
-        {
-          label: 'entertainment',
-          key: 'entertainment',
-        },
-        {
-          label: 'finance',
-          key: 'finance',
-        },
-        {
-          label: 'health_fitness',
-          key: 'health_fitness',
-        },
-        {
-          label: 'hobbies_occupations',
-          key: 'hobbies_occupations',
-        },
-        {
-          label: 'location_based',
-          key: 'location_based',
-        },
-        {
-          label: 'mental_health',
-          key: 'mental_health',
-        },
-        {
-          label: 'getting_organized',
-          key: 'getting_organized',
-        },
-        {
-          label: 'recovery_support_groups',
-          key: 'recovery_support_groups',
-        },
-        {
-          label: 'spirituality',
-          key: 'spirituality',
-        },
-        {
-          label: 'time_management',
-          key: 'time_management',
-        },
-      ],
       showCategorySelect: false,
       members: [],
       inviteMembers: false,

website/client/src/components/groups/groupSidebar.vue

@@ -86,6 +86,7 @@
 import throttle from 'lodash/throttle';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import FilterGroup from '@/components/ui/filterGroup';
+import CategoryOptions from '@/../../common/script/content/categoryOptions';
 
 // TODO use checkbox-component to add/remove entries to *Filters, but without the v-model binding
 
@@ -94,64 +95,7 @@ export default {
   data () {
     return {
       categoryFilters: [],
-      categoryOptions: [
+      categoryOptions: CategoryOptions,
-        {
-          label: 'habitica_official',
-          key: 'habitica_official',
-        },
-        {
-          label: 'academics',
-          key: 'academics',
-        },
-        {
-          label: 'advocacy_causes',
-          key: 'advocacy_causes',
-        },
-        {
-          label: 'creativity',
-          key: 'creativity',
-        },
-        {
-          label: 'entertainment',
-          key: 'entertainment',
-        },
-        {
-          label: 'finance',
-          key: 'finance',
-        },
-        {
-          label: 'health_fitness',
-          key: 'health_fitness',
-        },
-        {
-          label: 'hobbies_occupations',
-          key: 'hobbies_occupations',
-        },
-        {
-          label: 'location_based',
-          key: 'location_based',
-        },
-        {
-          label: 'mental_health',
-          key: 'mental_health',
-        },
-        {
-          label: 'getting_organized',
-          key: 'getting_organized',
-        },
-        {
-          label: 'recovery_support_groups',
-          key: 'recovery_support_groups',
-        },
-        {
-          label: 'spirituality',
-          key: 'spirituality',
-        },
-        {
-          label: 'time_management',
-          key: 'time_management',
-        },
-      ],
       roleFilters: [],
       roleOptions: [
         {

website/common/script/content/categoryOptions.js

@@ -0,0 +1,60 @@
+const categoryOptions = [
+  {
+    label: 'habitica_official',
+    key: 'habitica_official',
+  },
+  {
+    label: 'academics',
+    key: 'academics',
+  },
+  {
+    label: 'advocacy_causes',
+    key: 'advocacy_causes',
+  },
+  {
+    label: 'creativity',
+    key: 'creativity',
+  },
+  {
+    label: 'entertainment',
+    key: 'entertainment',
+  },
+  {
+    label: 'finance',
+    key: 'finance',
+  },
+  {
+    label: 'health_fitness',
+    key: 'health_fitness',
+  },
+  {
+    label: 'hobbies_occupations',
+    key: 'hobbies_occupations',
+  },
+  {
+    label: 'location_based',
+    key: 'location_based',
+  },
+  {
+    label: 'mental_health',
+    key: 'mental_health',
+  },
+  {
+    label: 'getting_organized',
+    key: 'getting_organized',
+  },
+  {
+    label: 'self_improvement',
+    key: 'self_improvement',
+  },
+  {
+    label: 'spirituality',
+    key: 'spirituality',
+  },
+  {
+    label: 'time_management',
+    key: 'time_management',
+  },
+];
+
+export default categoryOptions;