Change where members info is retrieved in Group component: Fixes #11737 (#11886)

* Change where members info is retrieved in Group component.

In Group component, changes the place where members data is retrieved from the load function originally to within the watch group function, so that when group data has changed, the code will update the corresponding members data as well.

* Moving the code for loading members data from watcher to inside fetchGuilds function

* Complying with lint

Co-authored-by: kazekunGb <eynsan@yahoo.co.uk>
Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

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

@@ -21,7 +21,8 @@
               <span v-if="challenge.leader === null">
                 {{ $t('noChallengeOwner') }}
               </span>
-              <user-link v-else
+              <user-link
+                v-else
                 class="mx-1"
                 :user="challenge.leader"
               />

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

@@ -509,11 +509,7 @@ export default {
         // Load invites
       }
       await this.fetchGuild();
-      // Fetch group members on load
+
-      this.members = await this.loadMembers({
-        groupId: this.group._id,
-        includeAllPublicFields: true,
-      });
       this.$root.$on('updatedGroup', group => {
         const updatedGroup = extend(this.group, group);
         this.$set(this.group, updatedGroup);
@@ -576,6 +572,11 @@ export default {
           this.$delete(this.user.newMessages, groupId);
         }, 1000);
       }
+
+      this.members = await this.loadMembers({
+        groupId: this.group._id,
+        includeAllPublicFields: true,
+      });
     },
     hasUnreadMessages (groupId) {
       if (this.user.newMessages[groupId]) return true;

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

@@ -3,14 +3,14 @@
     class="notification d-flex flex-column justify-content-center text-center"
   >
     <strong
-      class="mx-auto mb-2"
       v-once
+      class="mx-auto mb-2"
     >
       {{ $t('g1g1Announcement') }}
     </strong>
     <p
-      class="mx-4"
       v-once
+      class="mx-4"
     >
       {{ $t('g1g1Details') }}
     </p>
@@ -19,8 +19,8 @@
       @click="showSelectUser()"
     >
       <div
-        class="m-auto"
         v-once
+        class="m-auto"
       >
         {{ $t('sendGift') }}
       </div>
@@ -30,9 +30,9 @@
       @click.stop="remove()"
     >
       <div
+        v-once
         class="svg-icon"
         v-html="icons.close"
-        v-once
       ></div>
     </div>
   </div>

website/client/src/components/payments/selectUserModal.vue

@@ -5,16 +5,21 @@
     :hide-footer="true"
     @hide="onHide()"
   >
-    <h2 class="ml-2"> {{ $t('sendGift')}} </h2>
+    <h2 class="ml-2">
+      {{ $t('sendGift') }}
+    </h2>
     <div class="d-flex flex-column align-items-center">
       <div
         class="modal-close"
         @click="close()"
       >
-        <div class="svg-icon" v-html="icons.close"></div>
+        <div
+          class="svg-icon"
+          v-html="icons.close"
+        ></div>
       </div>
       <div class="ml-2 mr-auto">
-        <strong> {{ $t('sendGiftToWhom')}} </strong>
+        <strong> {{ $t('sendGiftToWhom') }} </strong>
       </div>
       <div
         class="form"

website/client/src/components/settings/subscription.vue

@@ -78,7 +78,7 @@
         <div class="flex-spacer"></div>
         <div>
           <div class="subscribe-card d-flex flex-column">
-            <subscription-options class="mb-4"/>
+            <subscription-options class="mb-4" />
           </div>
         </div>
       </div>
@@ -87,7 +87,9 @@
       v-if="hasSubscription"
       class="d-flex flex-column align-items-center"
     >
-      <h1 class="mt-4 mx-auto">{{ $t('subscription') }}</h1>
+      <h1 class="mt-4 mx-auto">
+        {{ $t('subscription') }}
+      </h1>
       <div class="subscribe-card mx-auto">
         <div
           v-if="hasSubscription && !hasCanceledSubscription"
@@ -100,7 +102,9 @@
               v-html="icons.checkmarkIcon"
             ></div>
           </div>
-          <h2 class="green-10 mx-auto">{{ $t('youAreSubscribed') }}</h2>
+          <h2 class="green-10 mx-auto">
+            {{ $t('youAreSubscribed') }}
+          </h2>
           <div
             v-if="hasGroupPlan"
             class="mx-5 text-center"
@@ -121,7 +125,9 @@
             v-if="canEditCardDetails"
             class="mt-4 text-center"
           >
-            <div class="font-weight-bold gray-10 mb-2">{{ $t('needToUpdateCard') }}</div>
+            <div class="font-weight-bold gray-10 mb-2">
+              {{ $t('needToUpdateCard') }}
+            </div>
             <button
               class="btn btn-primary btn-update-card
               d-flex justify-content-center align-items-center"
@@ -146,7 +152,7 @@
             v-if="purchasedPlanExtraMonthsDetails.months > 0"
             class="extra-months green-10 py-2 px-3 mt-4"
             v-html="$t('purchasedPlanExtraMonths',
-            {months: purchasedPlanExtraMonthsDetails.months})"
+                       {months: purchasedPlanExtraMonthsDetails.months})"
           >
           </div>
         </div>
@@ -161,20 +167,24 @@
               v-html="icons.closeIcon"
             ></div>
           </div>
-          <h2 class="gray-50">{{ $t('subscriptionCanceled') }}</h2>
+          <h2 class="gray-50">
+            {{ $t('subscriptionCanceled') }}
+          </h2>
           <div
             class="w-75 text-center mb-4"
             v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
           >
           </div>
           <h2>{{ $t('readyToResubscribe') }}</h2>
-          <subscription-options class="w-100 mb-2"/>
+          <subscription-options class="w-100 mb-2" />
         </div>
         <div
           v-if="hasSubscription"
           class="bg-gray-700 p-2 text-center"
         >
-          <div class="header-mini mb-3">{{ $t('subscriptionStats') }}</div>
+          <div class="header-mini mb-3">
+            {{ $t('subscriptionStats') }}
+          </div>
           <div class="d-flex justify-content-around">
             <div class="ml-4 mr-3">
               <div class="d-flex justify-content-center align-items-center">
@@ -189,7 +199,9 @@
                     user.purchased.plan.consecutive.offset }}
                 </div>
               </div>
-              <div class="stats-label">{{ $t('subMonths') }}</div>
+              <div class="stats-label">
+                {{ $t('subMonths') }}
+              </div>
             </div>
             <div class="stats-spacer"></div>
             <div>
@@ -204,7 +216,9 @@
                   {{ user.purchased.plan.consecutive.gemCapExtra }}
                 </div>
               </div>
-              <div class="stats-label">{{ $t('gemCapExtra') }}</div>
+              <div class="stats-label">
+                {{ $t('gemCapExtra') }}
+              </div>
             </div>
             <div class="stats-spacer"></div>
             <div>
@@ -219,18 +233,22 @@
                   {{ user.purchased.plan.consecutive.trinkets }}
                 </div>
               </div>
-              <div class="stats-label">{{ $t('mysticHourglassesTooltip') }}</div>
+              <div class="stats-label">
+                {{ $t('mysticHourglassesTooltip') }}
+              </div>
             </div>
           </div>
         </div>
         <div class="d-flex flex-column justify-content-center align-items-center mt-4 mb-3">
           <div
-          v-once
+            v-once
-          class="svg-icon svg-heart mb-1"
+            class="svg-icon svg-heart mb-1"
-          v-html="icons.heartIcon"
+            v-html="icons.heartIcon"
           >
           </div>
-          <div class="stats-label">{{ $t('giftSubscriptionText4') }}</div>
+          <div class="stats-label">
+            {{ $t('giftSubscriptionText4') }}
+          </div>
         </div>
       </div>
     </div>
@@ -239,8 +257,12 @@
       class="d-flex flex-column align-items-center mt-3"
     >
       <div class="cancel-card p-4 text-center">
-        <h2 class="maroon-50">{{ $t('cancelYourSubscription') }}</h2>
+        <h2 class="maroon-50">
-        <div v-if="hasGroupPlan">{{ $t('cancelSubInfoGroupPlan') }}</div>
+          {{ $t('cancelYourSubscription') }}
+        </h2>
+        <div v-if="hasGroupPlan">
+          {{ $t('cancelSubInfoGroupPlan') }}
+        </div>
         <div
           v-if="!hasGroupPlan && !canCancelSubscription"
           v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"

website/client/src/components/settings/subscriptionOptions.vue

@@ -5,22 +5,22 @@
       <b-form-radio
         v-for="block in subscriptionBlocksOrdered"
         v-if="block.target !== 'group' && block.canSubscribe === true"
-        :value="block.key"
         :key="block.key"
         v-model="subscription.key"
+        :value="block.key"
         class="subscribe-option pt-2 pl-5 pb-3 mb-0"
         :class="{selected: subscription.key === block.key}"
         @click.native="subscription.key = block.key"
       >
-      <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+        <!-- eslint-enable vue/no-use-v-if-with-v-for -->
         <div
-          v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
           class="subscription-text ml-2 mb-1"
+          v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
         >
         </div>
         <div
-          v-html="subscriptionBubbles(block.key)"
           class="ml-2"
+          v-html="subscriptionBubbles(block.key)"
         >
         </div>
       </b-form-radio>

website/client/src/components/shops/buyModal.vue

@@ -97,7 +97,10 @@
               >{{ item.value }}</span>
             </span>
           </div>
-          <div v-else class="d-flex align-items-middle">
+          <div
+            v-else
+            class="d-flex align-items-middle"
+          >
             <span
               class="svg-icon inline icon-32 ml-auto my-auto"
               aria-hidden="true"
@@ -119,7 +122,10 @@
         <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
         </div>
-        <div v-if="nonSubscriberHourglasses" class="hourglass-nonsub mt-3">
+        <div
+          v-if="nonSubscriberHourglasses"
+          class="hourglass-nonsub mt-3"
+        >
           {{ $t('mysticHourglassNeededNoSub') }}
         </div>
         <button