feat: display last message in chat list upon new msg receive

frontend-park-mail-ru · Dec 17, 2024 · 137b6e2 · 137b6e2
1 parent cd07d00
commit 137b6e2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/components/ChatWindow/ChatWindow.ts b/src/components/ChatWindow/ChatWindow.ts
@@ -140,6 +140,8 @@ export default class ChatWindow extends BaseComponent {
             id: 0,
             createdAt: new Date().toISOString(),
         });
+
+        this.emit('new-message', text);
     }
 
     private handleMessageReceive(event: MessageEvent) {
@@ -154,6 +156,7 @@ export default class ChatWindow extends BaseComponent {
 
         console.log(`[message] Данные получены с сервера: ${message}`);
         if ('content' in message) {
+            this.emit('new-message', message.content);
             this.addNewMessageElement(message);
 
             this.messagesContainer.scrollTop =

diff --git a/src/pages/ChatPage/ChatPage.hbs b/src/pages/ChatPage/ChatPage.hbs
@@ -1,14 +1,21 @@
 <div class='chat-page' id='{{id}}'>
     <div class='recipients-list'>
         {{#each chats}}
-            <div class='recipient-card' data-id='{{this.authorUuid}}'>
+            <div
+                class='recipient-card'
+                data-id='{{this.authorUuid}}'
+                id='recipient-{{this.authorUuid}}'
+            >
                 <img
                     class='recipient-card__avatar'
                     src='{{this.authorAvatar}}'
                 />
                 <div class='recipient-card__info'>
                     <p class='recipient-card__name'>{{this.authorName}}</p>
-                    <p class='recipient-card__text'>{{this.lastMessage}}</p>
+                    <p
+                        class='recipient-card__text'
+                        id='recipient-{{this.authorUuid}}-last-message'
+                    >{{this.lastMessage}}</p>
                 </div>
             </div>
         {{/each}}

diff --git a/src/pages/ChatPage/ChatPage.ts b/src/pages/ChatPage/ChatPage.ts
@@ -26,6 +26,15 @@ export default class ChatPage extends BaseComponent {
                 data
             );
 
+            // chatWindow.on('new-message', (message) => {
+            //     if (typeof message === 'string')
+            //         (
+            //             document.getElementById(
+            //                 `recipient-${el.dataset.id}-last-message`
+            //             ) as HTMLElement
+            //         ).textContent = message;
+            // });
+
             chatWindow.render();
         });
     }
@@ -50,6 +59,15 @@ export default class ChatPage extends BaseComponent {
                     data
                 );
 
+                chatWindow.on('new-message', (message) => {
+                    if (typeof message === 'string')
+                        (
+                            document.getElementById(
+                                `recipient-${el.dataset.id}-last-message`
+                            ) as HTMLElement
+                        ).textContent = message;
+                });
+
                 chatWindow.render();
             };
         }