Removed duplicate code and added member modal event (#10542)

* Removed duplicate code and added member modal event

* Removed console

* Removed console log

website/client/components/challenges/challengeDetail.vue

@@ -344,14 +344,14 @@ export default {
       this.tasksByType[task.type].splice(index, 1);
     },
     showMemberModal () {
-      // @TODO: Change these to options and add a custom event to members modal
+      this.$root.$emit('habitica:show-member-modal', {
-      this.$store.state.memberModalOptions.challengeId = this.challenge._id;
+        challengeId: this.challenge._id,
-      this.$store.state.memberModalOptions.groupId = 'challenge'; // @TODO: change these terrible settings
+        groupId: 'challenge', // @TODO: change these terrible settings
-      this.$store.state.memberModalOptions.group = this.group;
+        group: this.group,
-      this.$store.state.memberModalOptions.memberCount = this.challenge.memberCount;
+        memberCount: this.challenge.memberCount,
-      this.$store.state.memberModalOptions.viewingMembers = this.members;
+        viewingMembers: this.members,
-      this.$store.state.memberModalOptions.fetchMoreMembers = this.loadMembers;
+        fetchMoreMembers: this.loadMembers,
-      this.$root.$emit('bv::show::modal', 'members-modal');
+      });
     },
     async joinChallenge () {
       this.user.challenges.push(this.searchId);

website/client/components/groups/group.vue

@@ -126,7 +126,7 @@
   .sidebar {
     background-color: $gray-600;
     padding-bottom: 2em;
-    
+
   }
 
   .buttons-wrapper {
@@ -426,12 +426,13 @@ export default {
       return this.$store.dispatch('members:getGroupMembers', payload);
     },
     showMemberModal () {
-      this.$store.state.memberModalOptions.groupId = this.group._id;
+      this.$root.$emit('habitica:show-member-modal', {
-      this.$store.state.memberModalOptions.group = this.group;
+        groupId: this.group._id,
-      this.$store.state.memberModalOptions.memberCount = this.group.memberCount;
+        group: this.group,
-      this.$store.state.memberModalOptions.viewingMembers = this.members;
+        memberCount: this.group.memberCount,
-      this.$store.state.memberModalOptions.fetchMoreMembers = this.loadMembers;
+        viewingMembers: this.members,
-      this.$root.$emit('bv::show::modal', 'members-modal');
+        fetchMoreMembers: this.loadMembers,
+      });
     },
     fetchRecentMessages () {
       this.fetchGuild();

website/client/components/groups/membersModal.vue

@@ -278,7 +278,20 @@ export default {
     };
   },
   mounted () {
-    this.getMembers();
+    this.$root.$on('habitica:show-member-modal', (data) => {
+      // @TODO: Remove store
+      this.$store.state.memberModalOptions.challengeId = data.challengeId;
+      this.$store.state.memberModalOptions.groupId = data.groupId;
+      this.$store.state.memberModalOptions.group = data.group;
+      this.$store.state.memberModalOptions.memberCount = data.memberCount;
+      this.$store.state.memberModalOptions.viewingMembers = data.viewingMembers;
+      this.$store.state.memberModalOptions.fetchMoreMembers = data.fetchMoreMembers;
+      this.$root.$emit('bv::show::modal', 'members-modal');
+      this.getMembers();
+    });
+  },
+  destroyed () {
+    this.$root.$off('habitica:show-member-modal');
   },
   computed: {
     ...mapState({user: 'user.data'}),
@@ -363,6 +376,7 @@ export default {
         });
         this.invites = invites;
       }
+
       if (this.$store.state.memberModalOptions.viewingMembers.length > 0) {
         this.members = this.$store.state.memberModalOptions.viewingMembers;
       }

website/client/components/header/index.vue

@@ -176,11 +176,11 @@ export default {
       }
     },
     showPartyMembers () {
-      // Set the party details for the members-modal component
+      this.$root.$emit('habitica:show-member-modal', {
-      this.$store.state.memberModalOptions.groupId = this.user.party._id;
+        groupId: this.user.party._id,
-      this.$store.state.memberModalOptions.viewingMembers = this.partyMembers;
+        viewingMembers: this.partyMembers,
-      this.$store.state.memberModalOptions.group = this.user.party;
+        group: this.user.party,
-      this.$root.$emit('bv::show::modal', 'members-modal');
+      });
     },
     setPartyMembersWidth ($event) {
       if (this.currentWidth !== $event.width) {