Changed private message" button to use <a href> to open Private Messa… (#12010)

* Changed private message" button to use <a href> to open Private Message page in same tab.

Changed private message" button to use <a href> to open Private Message page in same tab with normal mouse click, and open in a new tab with right mouse click mouse context menu.

* Use router-link and navigation guard as requested.

Change from <a href to router-link in profile.vue and use navigation guard to obtain selected user data from server instead of doing so in mount method as requested.

* Added habitica::dismiss-modal to hide members modal

* Suggestion from lint

* Use replace in router-link to as per suggestion

* Suggestion by lint

* Remove sendMessage function in profile.vue as suggested in PR review

website/client/src/components/userMenu/profile.vue

@@ -5,16 +5,20 @@
   >
     <div class="header">
       <div class="profile-actions">
+        <router-link
+          :to="{ path: '/private-messages', query: { uuid: user._id } }"
+          replace
+        >
           <button
             v-b-tooltip.hover.left="$t('sendMessage')"
             class="btn btn-secondary message-icon"
-          @click="sendMessage()"
           >
             <div
               class="svg-icon message-icon"
               v-html="icons.message"
             ></div>
           </button>
+        </router-link>
         <button
           v-b-tooltip.hover.bottom="$t('sendGems')"
           class="btn btn-secondary gift-icon"
@@ -858,14 +862,6 @@ export default {
       this.selectedPage = page || 'profile';
       window.history.replaceState(null, null, '');
     },
-    sendMessage () {
-      this.$store.dispatch('user:newPrivateMessageTo', {
-        member: this.user,
-      });
-
-      this.$router.push('/private-messages');
-      this.$root.$emit('bv::hide::modal', 'profile');
-    },
     getProgressDisplay () {
       // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
       // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');

website/client/src/pages/private-messages.vue

@@ -608,6 +608,23 @@ export default {
       MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
     };
   },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      const data = vm.$store.state.privateMessageOptions;
+
+      if ((!data || (data && !data.userIdToMessage)) && vm.$route.query && vm.$route.query.uuid) {
+        vm.$store.dispatch('user:userLookup', { uuid: vm.$route.query.uuid }).then(res => {
+          if (res && res.data && res.data.data) {
+            vm.$store.dispatch('user:newPrivateMessageTo', {
+              member: res.data.data,
+            });
+          }
+        });
+      } else {
+        vm.hasPrivateMessageOptionsOnPageLoad = true;
+      }
+    });
+  },
   async mounted () {
     // notification click to refresh
     this.$root.$on(EVENTS.PM_REFRESH, async () => {
@@ -625,8 +642,11 @@ export default {
 
     await this.reload();
 
-    const data = this.$store.state.privateMessageOptions;
+    // close members modal if the Private Messages page is opened in an existing tab
+    this.$root.$emit('habitica::dismiss-modal', 'profile');
+    this.$root.$emit('habitica::dismiss-modal', 'members-modal');
 
+    const data = this.$store.state.privateMessageOptions;
     if (data && data.userIdToMessage) {
       this.initiatedConversation = {
         uuid: data.userIdToMessage,