update members list and count when joining or leaving challenge (#11542)

* update members list and count when joining or leaving challenge

* remove custom ui logic and use response/fetch data to update challenge

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

@@ -1,7 +1,7 @@
 <template>
   <div class="row">
     <challenge-modal @updatedChallenge="updatedChallenge" />
-    <leave-challenge-modal :challenge-id="challenge._id" />
+    <leave-challenge-modal :challenge-id="challenge._id" @update-challenge="updateChallenge" />
     <close-challenge-modal
       :members="members"
       :challenge-id="challenge._id"
@@ -493,12 +493,20 @@ export default {
     },
     async joinChallenge () {
       this.user.challenges.push(this.searchId);
-      await this.$store.dispatch('challenges:joinChallenge', { challengeId: this.searchId });
+      this.challenge = await this.$store.dispatch('challenges:joinChallenge', { challengeId: this.searchId });
+      this.members = await this
+        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
+
       await this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true });
     },
     async leaveChallenge () {
       this.$root.$emit('bv::show::modal', 'leave-challenge-modal');
     },
+    async updateChallenge () {
+      this.challenge = await this.$store.dispatch('challenges:getChallenge', { challengeId: this.searchId });
+      this.members = await this
+        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
+    },
     closeChallenge () {
       this.$root.$emit('bv::show::modal', 'close-challenge-modal');
     },

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

@@ -54,6 +54,7 @@ export default {
       this.close();
     },
     close () {
+      this.$emit('update-challenge');
       this.$root.$emit('bv::hide::modal', 'leave-challenge-modal');
     },
   },