feature(showChatReplyNames): displays users who have replied to a thr…

…ead (#167)

* fix(loadingUnlockScreen): remove scroll bars from showing

* feature(showChatReplyNames): displays users who have replied to a thread

* feature(showChatReplyNames): added method documentation

* Delete index.vue

* fix(showChatReplyNames): re-add an accidentally deleted file

components/tailored/messaging/message/reply/Reply.html

@@ -2,7 +2,7 @@
   <div v-if="!showReplies" class="reply-preview" @click="toggleReplies">
     <font-awesome-icon :icon="['far', 'plus-square']" />
     &nbsp;
-    {{message.replies.length}} {{$tc('conversation.reply', message.replies.length)}}
+    {{ makeReplyText }}
   </div>
   <div class="reply-container" v-if="showReplies" v-for="reply in message.replies">
     <div class="is-reply" @mouseenter="mouseOver(reply.id)" @mouseleave="mouseOver('')">

components/tailored/messaging/message/reply/Reply.vue

@@ -28,6 +28,28 @@ export default Vue.extend({
   data() {
     return { showReplies: false, replyHover: '' }
   },
+  computed: {
+  /**
+   * makeReplyText: generates the "Replies from _____" text in a chat
+   * depending on the number of users in the reply thread, it will generate a different replyText
+   */
+    makeReplyText() {
+      const replyLength = Object.keys(this.$props.message.replies).length
+      let baseReply = replyLength > 1 ? "Replies from " : "Reply from "
+
+      const firstName = this.$mock.users.filter((u: any) => u.address === this.$props.message.replies[0].from)[0].name
+      const secondName = replyLength > 1 ? this.$mock.users.filter((u: any) => u.address === this.$props.message.replies[1].from)[0].name : ""
+
+      if (replyLength === 1) {
+        baseReply += firstName
+      } else if (replyLength === 2) {
+        baseReply += firstName + " and " + secondName
+      } else {
+       baseReply += firstName + ", " + secondName + ", and " + (replyLength - 2) + " more ..." 
+       }
+      return baseReply
+    }
+  },
   methods: {
     mouseOver(replyId: string) {
       this.$data.replyHover = replyId

mock/messages.ts

@@ -259,6 +259,23 @@ export const Messages = [
             payload: 'This is a message reply',
             reactions: [],
           },
+          {
+            id: '02-432-338',
+            from: '0xdc76cd25977e0a5ae17155770273ad58648913d3',
+            to: '00-00-03',
+            type: 'text',
+            at: 1620515563000,
+            payload: 'This is a message reply 3',
+            reactions: [],
+          },          {
+            id: '02-432-338',
+            from: '0x9bf4001d307dfd62b26a2f1307ee0c0307632d59',
+            to: '00-00-03',
+            type: 'text',
+            at: 1620515563000,
+            payload: 'This is a message reply 4',
+            reactions: [],
+          },
         ],
       },
       {

pages/index.vue

@@ -64,7 +64,7 @@ export default Vue.extend({
   right: 0;
   bottom: 0;
   overflow: hidden;
-  
+
   .loader-container {
     min-width: 250px;
     align-self: center;