From 94ebb69e7deaf208f0732ace15c42d506489457c Mon Sep 17 00:00:00 2001
From: Kathy Chan <53127481+KemoPaw@users.noreply.github.com>
Date: Fri, 1 Oct 2021 22:07:08 -0700
Subject: [PATCH] feature(showChatReplyNames): displays users who have replied
 to a thread (#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
---
 .../messaging/message/reply/Reply.html        |  2 +-
 .../messaging/message/reply/Reply.vue         | 22 +++++++++++++++++++
 mock/messages.ts                              | 17 ++++++++++++++
 pages/index.vue                               |  2 +-
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/components/tailored/messaging/message/reply/Reply.html b/components/tailored/messaging/message/reply/Reply.html
index b264b67db2..fff2e5c865 100644
--- a/components/tailored/messaging/message/reply/Reply.html
+++ b/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('')">
diff --git a/components/tailored/messaging/message/reply/Reply.vue b/components/tailored/messaging/message/reply/Reply.vue
index be136ed143..58e27c7f5b 100644
--- a/components/tailored/messaging/message/reply/Reply.vue
+++ b/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
diff --git a/mock/messages.ts b/mock/messages.ts
index f6bb4397b3..063a5169aa 100644
--- a/mock/messages.ts
+++ b/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: [],
+          },
         ],
       },
       {
diff --git a/pages/index.vue b/pages/index.vue
index 39a3a4a66e..50cf0e635b 100644
--- a/pages/index.vue
+++ b/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;