From 7c6ea3a05a2452ee5f3f5e55bf3e046b2c5148e6 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@thoughtwoot.com>
Date: Sun, 14 Jun 2020 18:30:36 +0530
Subject: [PATCH] Chore: Fix HTML rendering in ConversationCard (#963)

---
 .../widgets/conversation/ConversationCard.vue | 51 +++++++------------
 1 file changed, 17 insertions(+), 34 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index a2a914bb2..d63940127 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -23,15 +23,19 @@
           {{ inboxName(chat.inbox_id) }}
         </span>
       </h4>
-      <p
-        class="conversation--message"
-        v-html="extractMessageText(lastMessageInChat)"
-      />
+      <p v-if="lastMessageInChat" class="conversation--message">
+        <span v-if="lastMessageInChat.content">
+          {{ lastMessageInChat.content }}
+        </span>
+        <span v-else-if="!lastMessageInChat.attachments">{{ ` ` }}</span>
+        <span v-else>
+          <i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
+          {{ this.$t(`${attachmentIconKey}.CONTENT`) }}
+        </span>
+      </p>
       <div class="conversation--meta">
         <span class="timestamp">
-          {{
-            lastMessageInChat ? dynamicTime(lastMessageInChat.created_at) : ''
-          }}
+          {{ dynamicTime(chat.timestamp) }}
         </span>
         <span class="unread">{{ getUnreadCount }}</span>
       </div>
@@ -39,11 +43,8 @@
   </div>
 </template>
 <script>
-/* eslint no-console: 0 */
-/* eslint no-extra-boolean-cast: 0 */
 import { mapGetters } from 'vuex';
 import Thumbnail from '../Thumbnail';
-import getEmojiSVG from '../emoji/utils';
 import conversationMixin from '../../../mixins/conversations';
 import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
@@ -85,6 +86,12 @@ export default {
       );
     },
 
+    attachmentIconKey() {
+      const lastMessage = this.lastMessageInChat;
+      const [{ file_type: fileType } = {}] = lastMessage.attachments;
+      return `CHAT_LIST.ATTACHMENTS.${fileType}`;
+    },
+
     isActiveChat() {
       return this.currentChat.id === this.chat.id;
     },
@@ -112,30 +119,6 @@ export default {
       const path = conversationUrl(this.accountId, activeInbox, chat.id);
       router.push({ path: frontendURL(path) });
     },
-    extractMessageText(chatItem) {
-      if (!chatItem) {
-        return '';
-      }
-
-      const { content, attachments } = chatItem;
-
-      if (content) {
-        return content;
-      }
-      if (!attachments) {
-        return ' ';
-      }
-
-      const [attachment] = attachments;
-      const { file_type: fileType } = attachment;
-      const key = `CHAT_LIST.ATTACHMENTS.${fileType}`;
-      return `
-        <i class="small-icon ${this.$t(`${key}.ICON`)}"></i>
-        ${this.$t(`${key}.CONTENT`)}
-      `;
-    },
-    getEmojiSVG,
-
     inboxName(inboxId) {
       const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
       return stateInbox.name || '';