Added habitica event for profile display (#9576)

website/client/components/chat/chatMessages.vue

@@ -478,10 +478,10 @@ export default {
 
       // Open the modal only if the data is available
       if (profile && !profile.rejected) {
-        // @TODO move to action or anyway move from here because it's super duplicate
-        this.$store.state.profileUser = profile;
-        this.$store.state.profileOptions.startingPage = 'profile';
-        this.$root.$emit('bv::show::modal', 'profile');
+        this.$root.$emit('habitica:show-profile', {
+          user: profile,
+          startingPage: 'profile',
+        });
       }
     },
   },

website/client/components/groups/group.vue

@@ -869,9 +869,10 @@ export default {
     },
     async showMemberProfile (leader) {
       let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: leader._id });
-      this.$store.state.profileUser = heroDetails.data.data;
-      this.$store.state.profileOptions.startingPage = 'profile';
-      this.$root.$emit('bv::show::modal', 'profile');
+      this.$root.$emit('habitica:show-profile', {
+        user: heroDetails.data.data,
+        startingPage: 'profile',
+      });
     },
     async questAbort () {
       if (!confirm(this.$t('sureAbort'))) return;

website/client/components/hall/heroes.vue

@@ -199,9 +199,10 @@ export default {
     },
     async clickMember (hero) {
       let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: hero._id });
-      this.$store.state.profileUser = heroDetails.data.data;
-      this.$store.state.profileOptions.startingPage = 'profile';
-      this.$root.$emit('bv::show::modal', 'profile');
+      this.$root.$emit('habitica:show-profile', {
+        user: heroDetails.data.data,
+        startingPage: 'profile',
+      });
     },
     userLevelStyle () {
       // @TODO: implement

website/client/components/header/notificationsDropdown.vue

@@ -34,7 +34,7 @@ menu-dropdown.item-notifications(:right="true")
         button.btn.btn-primary(@click.stop='accept(guild, index, "guild")') Accept
         button.btn.btn-primary(@click.stop='reject(guild, index, "guild")') Reject
     a.dropdown-item(v-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points',
-      @click='go("/user/profile")')
+      @click='showProfile()')
       span.glyphicon.glyphicon-plus-sign
       span {{ $t('haveUnallocated', {points: user.stats.points}) }}
     a.dropdown-item(v-for='message in userNewMessages')
@@ -279,6 +279,12 @@ export default {
       let quest = await this.$store.dispatch('quests:sendAction', {groupId: partyId, action: 'quests/reject'});
       this.user.party.quest = quest;
     },
+    showProfile () {
+      this.$root.$emit('habitica:show-profile', {
+        user: this.user,
+        startingPage: 'stats',
+      });
+    },
   },
 };
 </script>

website/client/components/header/userDropdown.vue

@@ -98,9 +98,10 @@ export default {
       this.$root.$emit('bv::show::modal', 'inbox-modal');
     },
     showProfile (startingPage) {
-      this.$store.state.profileUser = this.user;
-      this.$store.state.profileOptions.startingPage = startingPage;
-      this.$root.$emit('bv::show::modal', 'profile');
+      this.$root.$emit('habitica:show-profile', {
+        user: this.user,
+        startingPage,
+      });
     },
     showBuyGemsModal (startingPage) {
       this.$store.state.gemModalOptions.startingPage = startingPage;

website/client/components/memberDetails.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .member-details(
-  :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }", 
+  :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }",
   @click='showMemberModal(member)'
 )
   div(:class="{ 'col-4': !isHeader }")
@@ -174,7 +174,7 @@
       border-radius: 0px;
       height: 10px;
     }
-  } 
+  }
 </style>
 
 <script>
@@ -245,9 +245,10 @@ export default {
   methods: {
     percent,
     showMemberModal (member) {
-      this.$store.state.profileUser = member;
-      this.$store.state.profileOptions.startingPage = 'profile';
-      this.$root.$emit('bv::show::modal', 'profile');
+      this.$root.$emit('habitica:show-profile', {
+        user: member,
+        startingPage: 'profile',
+      });
     },
   },
   computed: {

website/client/components/userMenu/profile.vue

@@ -631,6 +631,18 @@ export default {
       },
     };
   },
+  mounted () {
+    this.$root.$on('habitica:show-profile', (data) => {
+      if (!data.user || !data.startingPage) return;
+      // @TODO: We may be able to remove the need for store
+      this.$store.state.profileUser = data.user;
+      this.$store.state.profileOptions.startingPage = data.startingPage;
+      this.$root.$emit('bv::show::modal', 'profile');
+    });
+  },
+  destroyed () {
+    this.$root.$off('habitica:show-profile');
+  },
   computed: {
     ...mapState({
       userLoggedIn: 'user.data',

website/client/components/userMenu/profilePage.vue

@@ -11,8 +11,11 @@ export default {
     profile,
   },
   mounted () {
-    this.$store.state.profileUser = {};
-    this.$root.$emit('bv::show::modal', 'profile');
+    // @TODO: Do we need this page?
+    this.$root.$emit('habitica:show-profile', {
+      user: {},
+      startingPage: 'profile',
+    });
   },
 };
 </script>