Client: remove unnecessary API calls + members fixes (#12179)

* wip

* refactor world state

* allow resource to be reloaded when the server is updated

* fix #9242

* fix event listeners

* remove un-needed code

* add tests for  asyncResourceFactory reloadOnAppVersionChange

* fix double cron notifications and party members showing up in the header after a party invitation is accepted

* remove console.log

* do not send vm info to loggly due to circular dependency + fix typo

* fix #12181

* do not load invites multiple times in members modal

* add hover to challenge member count

* groups: load members only on demand

* minor ui fixes

* choose class: fix vue duplicate key warning

* minor ui fixes

* challanges: load members on demand

* add loading spinner

* change loading mechanism

* fix loading gryphon issues

* reduce code duplication

website/client/src/components/header/index.vue

@@ -222,8 +222,8 @@ export default {
       this.$root.$emit('bv::show::modal', 'invite-modal');
     });
   },
-  destroyed () {
-    this.$root.off('inviteModal::inviteToGroup');
+  beforeDestroy () {
+    this.$root.$off('inviteModal::inviteToGroup');
   },
   methods: {
     ...mapActions({
@@ -250,6 +250,7 @@ export default {
         groupId: party.data._id,
         viewingMembers: this.partyMembers,
         group: party.data,
+        fetchMoreMembers: p => this.$store.dispatch('members:getGroupMembers', p),
       });
     },
     setPartyMembersWidth ($event) {

website/client/src/components/header/notifications/base.vue

@@ -182,10 +182,10 @@ export default {
     remove () {
       if (this.notification.type === 'NEW_CHAT_MESSAGE') {
         const groupId = this.notification.data.group.id;
-        this.$store.dispatch('chat:markChatSeen', { groupId });
-        if (this.user.newMessages[groupId]) {
-          this.$delete(this.user.newMessages, groupId);
-        }
+        this.$store.dispatch('chat:markChatSeen', {
+          groupId,
+          notificationId: this.notification.id,
+        });
       } else {
         this.readNotification({ notificationId: this.notification.id });
       }

website/client/src/components/header/notifications/worldBoss.vue

@@ -1,6 +1,6 @@
 <template>
   <base-notification
-    v-if="worldBoss.active"
+    v-if="worldBoss && worldBoss.active"
     :can-remove="false"
     :notification="{}"
     :read-after-click="false"
@@ -11,10 +11,16 @@
       class="background"
     >
       <div class="text">
-        <div class="title">
+        <div
+          v-once
+          class="title"
+        >
           {{ $t('worldBoss') }}
         </div>
-        <div class="sub-title">
+        <div
+          v-once
+          class="sub-title"
+        >
           {{ $t('questDysheartenerText') }}
         </div>
       </div>
@@ -40,6 +46,7 @@
         </div>
         <div class="pending-damage">
           <div
+            v-once
             class="svg-icon"
             v-html="icons.sword"
           ></div>
@@ -182,11 +189,13 @@ export default {
         sword,
       }),
       questData,
-      worldBoss: {},
     };
   },
   computed: {
-    ...mapState({ user: 'user.data' }),
+    ...mapState({
+      user: 'user.data',
+      worldBoss: 'worldState.data.worldBoss',
+    }),
     bossHp () {
       if (this.worldBoss && this.worldBoss.progress) {
         return this.worldBoss.progress.hp;
@@ -195,8 +204,7 @@ export default {
     },
   },
   async mounted () {
-    const result = await this.$store.dispatch('worldState:getWorldState');
-    this.worldBoss = result.worldBoss;
+    await this.$store.dispatch('worldState:getWorldState');
   },
   methods: {
     action () {