Challenge modal optimization - remove unnecessary API call - partial fix for #9371 (#9546)

* Attempt to use party data from the store rather than always fetching it from the API

* Move init code to shown() to prevent unnecessary network requests

* Use store party data in getGroup action if possible to save an API call

* Use store data rather than API call for party in challengeModal; remove unnecessary code in guilds:getGroup action

* Create party:getParty action and employ it in Group and ChallengeModal

* Use store instead of action return for party data

* Change how party data is stored

website/client/components/challenges/challengeModal.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  b-modal#challenge-modal(:title="title", size='lg')
+  b-modal#challenge-modal(:title="title", size='lg', @shown="shown")
     .form
       .form-group
         label
@@ -232,24 +232,7 @@ export default {
       groups: [],
     };
   },
-  async mounted () {
-    this.groups = await this.$store.dispatch('guilds:getMyGuilds');
-    if (this.user.party._id) {
-      let party = await this.$store.dispatch('guilds:getGroup', {groupId: 'party'});
-      this.groups.push({
-        name: party.name,
-        _id: party._id,
-        privacy: 'private',
-      });
-    }
-
-    this.groups.push({
-      name: this.$t('publicChallengesTitle'),
-      _id: TAVERN_ID,
-    });
-
-    this.setUpWorkingChallenge();
-  },
+  async mounted () {},
   watch: {
     user () {
       if (!this.challenge) this.workingChallenge.leader = this.user._id;
@@ -315,6 +298,25 @@ export default {
     },
   },
   methods: {
+    async shown () {
+      this.groups = await this.$store.dispatch('guilds:getMyGuilds');
+      await this.$store.dispatch('party:getParty');
+      const party = this.$store.state.party.data;
+      if (party._id) {
+        this.groups.push({
+          name: party.name,
+          _id: party._id,
+          privacy: 'private',
+        });
+      }
+
+      this.groups.push({
+        name: this.$t('publicChallengesTitle'),
+        _id: TAVERN_ID,
+      });
+
+      this.setUpWorkingChallenge();
+    },
     setUpWorkingChallenge () {
       this.resetWorkingChallenge();
 

website/client/components/groups/group.vue

@@ -538,16 +538,14 @@ export default {
         return;
       }
 
-      let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.searchId});
-
       if (this.isParty) {
-        this.$store.state.party.data = group;
+        await this.$store.dispatch('party:getParty');
         this.group = this.$store.state.party.data;
         this.checkForAchievements();
-        return;
+      } else {
+        const group = await this.$store.dispatch('guilds:getGroup', {groupId: this.searchId});
+        this.$set(this, 'group', group);
       }
-
-      this.$set(this, 'group', group);
     },
     deleteAllMessages () {
       if (confirm(this.$t('confirmDeleteAllMessages'))) {

website/client/components/groups/questDetailsModal.vue

@@ -173,7 +173,7 @@ export default {
   computed: {
     ...mapState({
       user: 'user.data',
-      partyMembers: 'party.members.data',
+      partyMembers: 'partyMembers.data',
     }),
     questData () {
       return quests.quests[this.group.quest.key];

website/client/components/header/index.vue

@@ -132,7 +132,7 @@ export default {
   computed: {
     ...mapGetters({
       user: 'user:data',
-      partyMembers: 'party:members',
+      partyMembers: 'partyMembers',
     }),
 
     showHeader () {

website/client/mixins/spells.js

@@ -30,7 +30,7 @@ export default {
           return;
         }
 
-        let party = this.$store.state.party.members;
+        let party = this.$store.state.partyMembers;
         party = isArray(party) ? party : [];
         party = party.concat(this.user);
         this.castEnd(party, spell.target);

website/client/store/actions/guilds.js

@@ -38,12 +38,11 @@ export async function getMyGuilds (store) {
 
 export async function getGroup (store, payload) {
   let response = await axios.get(`/api/v3/groups/${payload.groupId}`);
-
   // @TODO: should we store the active group for modifying?
   // let guilds = response.data.data;
   // store.state.myGuilds = guilds;
 
-  // @TODO: Populate wiht members, challenges, and invites
+  // @TODO: Populate with members, challenges, and invites
 
   return response.data.data;
 }

website/client/store/actions/party.js

@@ -3,7 +3,7 @@ import { loadAsyncResource } from 'client/libs/asyncResource';
 export function getMembers (store, forceLoad = false) {
   return loadAsyncResource({
     store,
-    path: 'party.members',
+    path: 'partyMembers',
     url: '/api/v3/groups/party/members?includeAllPublicFields=true',
     deserialize (response) {
       return response.data.data;
@@ -11,3 +11,15 @@ export function getMembers (store, forceLoad = false) {
     forceLoad,
   });
 }
+
+export function getParty (store, forceLoad = false) {
+  return loadAsyncResource({
+    store,
+    path: 'party',
+    url: '/api/v3/groups/party',
+    deserialize (response) {
+      return response.data.data;
+    },
+    forceLoad,
+  });
+}

website/client/store/actions/quests.js

@@ -8,7 +8,7 @@ export async function sendAction (store, payload) {
   // @TODO: Maybe move this to server
   let partyData = {
     partyID: store.state.user.data.party._id,
-    partySize: store.state.party.members.data.length,
+    partySize: store.state.partyMembers.data.length,
   };
 
   if (store.state.party && store.state.party.data) {

website/client/store/getters/party.js

@@ -1,3 +1,3 @@
 export function members (store) {
-  return store.state.party.members.data;
+  return store.state.partyMembers.data;
 }

website/client/store/index.js

@@ -71,10 +71,8 @@ export default function () {
       browserTimezoneOffset,
       tasks: asyncResourceFactory(), // user tasks
       completedTodosStatus: 'NOT_LOADED',
-      party: {
-        quest: {},
-        members: asyncResourceFactory(),
-      },
+      party: asyncResourceFactory(),
+      partyMembers: asyncResourceFactory(),
       shops: {
         market: asyncResourceFactory(),
         quests: asyncResourceFactory(),