refactored chat into separate chat_view and chat_message_list

src/components/chat_message/chat_message.js

@@ -22,10 +22,9 @@ library.add(faTimes, faEllipsisH)
 const ChatMessage = {
   name: 'ChatMessage',
   props: [
-    'author',
     'edited',
     'noHeading',
-    'chatViewItem',
+    'chatItem',
     'hoveredMessageChain',
   ],
   emits: ['hover'],
@@ -42,21 +41,26 @@ const ChatMessage = {
   computed: {
     // Returns HH:MM (hours and minutes) in local time.
     createdAt() {
-      const time = this.chatViewItem.data.created_at
+      const time = this.chatItem.data.created_at
       return time.toLocaleTimeString('en', {
         hour: '2-digit',
         minute: '2-digit',
         hour12: false,
       })
     },
+    author() {
+      return this.$store.getters.findUser(
+        this.chatItem.data.account_id
+      )
+    },
     isCurrentUser() {
       return this.message.account_id === this.currentUser.id
     },
     message() {
-      return this.chatViewItem.data
+      return this.chatItem.data
     },
     isMessage() {
-      return this.chatViewItem.type === 'message'
+      return this.chatItem.type === 'message'
     },
     messageForStatusContent() {
       return {
@@ -96,15 +100,15 @@ const ChatMessage = {
     onHover(bool) {
       this.$emit('hover', {
         isHovered: bool,
-        messageChainId: this.chatViewItem.messageChainId,
+        messageChainId: this.chatItem.messageChainId,
       })
     },
     async deleteMessage() {
       const confirmed = window.confirm(this.$t('chats.delete_confirm'))
       if (confirmed) {
         await this.$store.dispatch('deleteChatMessage', {
-          messageId: this.chatViewItem.data.id,
-          chatId: this.chatViewItem.data.chat_id,
+          messageId: this.chatItem.data.id,
+          chatId: this.chatItem.data.chat_id,
         })
       }
       this.hovered = false

src/components/chat_message/chat_message.vue

@@ -15,7 +15,7 @@
         class="avatar-wrapper"
       >
         <UserPopover
-          v-if="chatViewItem.isHead"
+          v-if="chatItem.isHead"
           :user-id="author.id"
         >
           <UserAvatar
@@ -31,7 +31,7 @@
         >
           <div
             class="media status"
-            :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
+            :class="{ 'without-attachment': !hasAttachment, 'pending': chatItem.data.pending, 'error': chatItem.data.error }"
             style="position: relative;"
             @mouseenter="hovered = true"
             @mouseleave="hovered = false"
@@ -93,7 +93,7 @@
     v-else
     class="chat-message-date-separator"
   >
-    <ChatMessageDate :date="chatViewItem.date" />
+    <ChatMessageDate :date="chatItem.date" />
   </div>
 </template>