Fixes Issue #12421 - Change page title based on the site section being viewed

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

@@ -433,6 +433,10 @@ export default {
         this.$router.push('/challenges/findChallenges');
         return;
       }
+      this.$store.dispatch('common:setTitle', {
+        subSection: this.challenge.name,
+        section: this.$t('challenges'),
+      });
       const tasks = await this.$store.dispatch('tasks:getChallengeTasks', { challengeId: this.searchId });
       this.tasksByType = {
         habit: [],

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

@@ -175,6 +175,10 @@ export default {
     },
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('findChallenges'),
+      section: this.$t('challenges'),
+    });
     this.loadChallenges();
   },
   methods: {

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

@@ -218,6 +218,10 @@ export default {
     },
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('myChallenges'),
+      section: this.$t('challenges'),
+    });
     this.loadChallenges();
   },
   methods: {

website/client/src/components/group-plans/taskInformation.vue

@@ -224,7 +224,10 @@ export default {
       this.group = await this.$store.dispatch('guilds:getGroup', {
         groupId: this.searchId,
       });
-
+      this.$store.dispatch('common:setTitle', {
+        subSection: this.group.name,
+        section: this.$t('group'),
+      });
       const members = await this.$store.dispatch('members:getGroupMembers', { groupId: this.searchId });
       this.group.members = members;
 

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

@@ -155,6 +155,12 @@ export default {
       return this.guilds.filter(guild => filterGuild(guild, filters, search, user));
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('guildsDiscovery'),
+      section: this.$t('guilds'),
+    });
+  },
   methods: {
     async updateSearch (eventData) {
       // this.search = eventData.searchTerm; @TODO: Probably don't need this anymore

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

@@ -497,15 +497,16 @@ export default {
     if (this.isParty) this.searchId = 'party';
     if (!this.searchId) this.searchId = this.groupId;
     await this.fetchGuild();
-
+    this.$store.dispatch('common:setTitle', {
+      section: this.group.name,
+    });
     this.$root.$on('updatedGroup', this.onGroupUpdate);
   },
   beforeDestroy () {
     this.$root.$off('updatedGroup', this.onGroupUpdate);
   },
   beforeRouteUpdate (to, from, next) {
     this.$set(this, 'searchId', to.params.groupId);
-
     next();
   },
   methods: {

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

@@ -486,6 +486,9 @@ export default {
   },
   mounted () {
     this.activePage = this.PAGES.BENEFITS;
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('groupPlans'),
+    });
   },
   methods: {
     launchModal () {

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

@@ -165,6 +165,12 @@ export default {
       });
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('myGuilds'),
+      section: this.$t('guilds'),
+    });
+  },
   created () {
     this.fetchGuilds();
   },

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

@@ -843,6 +843,10 @@ export default {
     },
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('tavern'),
+      section: this.$t('guilds'),
+    });
     this.group = await this.$store.dispatch('guilds:getGroup', { groupId: TAVERN_ID });
   },
   methods: {

website/client/src/components/inventory/equipment/index.vue

@@ -440,6 +440,11 @@ export default {
     this.costumeMode = getLocalSetting(
       CONSTANTS.keyConstants.CURRENT_EQUIPMENT_DRAWER_TAB,
     ) === CONSTANTS.equipmentDrawerTabValues.COSTUME_TAB;
+
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('equipment'),
+      section: this.$t('inventory'),
+    });
   },
   methods: {
     selectDrawerTab (tabName) {

website/client/src/components/inventory/items/index.vue

@@ -506,6 +506,12 @@ export default {
       return this.groups.some(g => g.selected);
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('items'),
+      section: this.$t('inventory'),
+    });
+  },
   watch: {
     searchText: throttle(function throttleSearch () {
       this.searchTextThrottled = this.searchText.toLowerCase();

website/client/src/components/inventory/stable/index.vue

@@ -675,6 +675,12 @@ export default {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('stable'),
+      section: this.$t('inventory'),
+    });
+  },
   watch: {
     searchText: _throttle(function throttleSearch () {
       const search = this.searchText.toLowerCase();

website/client/src/components/shops/market/index.vue

@@ -304,6 +304,10 @@ export default {
     }, 250),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('market'),
+      section: this.$t('shops'),
+    });
     await this.$store.dispatch('worldState:getWorldState');
   },
   methods: {

website/client/src/components/shops/quests/index.vue

@@ -544,6 +544,10 @@ export default {
     }, 250),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('quests'),
+      section: this.$t('shops'),
+    });
     await this.$store.dispatch('worldState:getWorldState');
   },
   methods: {

website/client/src/components/shops/seasonal/index.vue

@@ -517,6 +517,11 @@ export default {
     }, 250),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('seasonalShop'),
+      section: this.$t('shops'),
+    });
+
     this.$root.$on('buyModal::boughtItem', () => {
       this.backgroundUpdate = new Date();
     });

website/client/src/components/shops/timeTravelers/index.vue

@@ -399,6 +399,10 @@ export default {
     }, 250),
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('timeTravelers'),
+      section: this.$t('shops'),
+    });
     this.$root.$on('buyModal::boughtItem', () => {
       this.backgroundUpdate = new Date();
     });

website/client/src/components/tasks/user.vue

@@ -495,6 +495,11 @@ export default {
       return tagsByType;
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('tasks'),
+    });
+  },
   watch: {
     searchText: throttle(function throttleSearch () {
       this.searchTextThrottled = this.searchText.toLowerCase();

website/client/src/store/actions/common.js

@@ -23,6 +23,14 @@ export function hatch (store, params) {
   // .catch((err) => console.error('equip', err));
 }
 
+export function setTitle (store, params) {
+  if (params.subSection) {
+    store.state.title = `${params.subSection} | ${params.section} | Habitica`;
+  } else {
+    store.state.title = `${params.section} | Habitica`;
+  }
+}
+
 export async function feed (store, params) {
   const user = store.state.user.data;
   feedOp(user, { params });

website/common/locales/en/groups.json

@@ -77,6 +77,7 @@
   "guildBankPop2": "Gems which your guild leader can use for challenge prizes.",
   "guildGems": "Guild Gems",
   "group": "Group",
+  "groupPlans": "Group Plans",
   "editGroup": "Edit Group",
   "newGroupName": "<%= groupType %> Name",
   "groupName": "Group Name",