feat: display recipient's name

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

Hide file tree

Showing 5 changed files with 71 additions and 45 deletions.
diff --git a/src/components/ChatWindow/ChatWindow.hbs b/src/components/ChatWindow/ChatWindow.hbs
@@ -12,6 +12,10 @@
 </template>
 
 <div class='chat-window' id='{{id}}'>
+    <div class='chat-window__upper-part'>
+        <p class='chat-window__recipient-name'>{{recipientName}}</p>
+    </div>
+
     <div class='chat-window__messages' id='js-messages'>
         <!-- Messages will be here -->
     </div>

diff --git a/src/components/ChatWindow/ChatWindow.scss b/src/components/ChatWindow/ChatWindow.scss
@@ -60,6 +60,19 @@
         border-radius: 50%;
         cursor: pointer;
     }
+    &__upper-part {
+        width: 100%;
+        height: 50px;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__recipient-name {
+        font-size: 16px;
+        font-weight: 500;
+    }
 }
 
 .message {

diff --git a/src/components/ChatWindow/ChatWindow.ts b/src/components/ChatWindow/ChatWindow.ts
@@ -13,28 +13,24 @@ export default class ChatWindow extends BaseComponent {
     private messagesContainer: HTMLDivElement;
     private recipientId: string;
 
-    constructor(parent: HTMLElement, recipientId: string, messages: Message[]) {
+    constructor(
+        parent: HTMLElement,
+        recipientId: string,
+        recipientName: string,
+        messages: Message[]
+    ) {
         super({
             parent: parent,
             id: '0',
-            templateData: {},
+            templateData: {
+                recipientName,
+            },
             templateName: 'ChatWindow',
         });
 
         this.recipientId = recipientId;
         this.messages = messages;
 
-        requestAnimationFrame(() => {
-            this.messagesContainer = document.getElementById(
-                'js-messages'
-            ) as HTMLElement;
-
-            this.displayMessageHistory();
-
-            this.messagesContainer.scrollTop =
-                this.messagesContainer.scrollHeight;
-        });
-
         if (globalStore.chat.socket) {
             globalStore.chat.socket.close();
         }
@@ -44,6 +40,16 @@ export default class ChatWindow extends BaseComponent {
         );
     }
 
+    protected afterRender() {
+        this.messagesContainer = document.getElementById(
+            'js-messages'
+        ) as HTMLDivElement;
+
+        this.displayMessageHistory();
+
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
+
     private async displayMessageHistory() {
         for (const message of this.messages) {
             this.addNewMessageElement(message);

diff --git a/src/pages/ChatPage/ChatPage.hbs b/src/pages/ChatPage/ChatPage.hbs
@@ -4,6 +4,7 @@
             <div
                 class='recipient-card'
                 data-id='{{this.authorUuid}}'
+                data-name='{{this.authorName}}'
                 id='recipient-{{this.authorUuid}}'
             >
                 <img

diff --git a/src/pages/ChatPage/ChatPage.ts b/src/pages/ChatPage/ChatPage.ts
@@ -18,14 +18,12 @@ export default class ChatPage extends BaseComponent {
         if (!startChatWithRecipientId) return;
 
         requestAnimationFrame(async () => {
-            const data = await ChatRepository.get(startChatWithRecipientId);
-
-            const chatWindow = new ChatWindow(
-                this.thisElement,
-                startChatWithRecipientId,
-                data
-            );
-
+            // const data = await ChatRepository.get(startChatWithRecipientId);
+            // const chatWindow = new ChatWindow(
+            //     this.thisElement,
+            //     startChatWithRecipientId,
+            //     data
+            // );
             // chatWindow.on('new-message', (message) => {
             //     if (typeof message === 'string')
             //         (
@@ -34,8 +32,7 @@ export default class ChatPage extends BaseComponent {
             //             ) as HTMLElement
             //         ).textContent = message;
             // });
-
-            chatWindow.render();
+            // chatWindow.render();
         });
     }
 
@@ -45,31 +42,36 @@ export default class ChatPage extends BaseComponent {
         ) as HTMLCollectionOf<HTMLElement>;
 
         for (const el of cards) {
-            (el as HTMLElement).onclick = async () => {
-                if (!el.dataset.id) {
-                    throw new Error('recipient id is not defined');
-                }
+            (el as HTMLElement).onclick = async (e) => {
+                this.handleCardClick(e, el);
+            };
+        }
+    }
 
-                document.getElementById('ChatWindow-0')?.remove();
-                const data = await ChatRepository.get(el.dataset.id);
+    private async handleCardClick(e: Event, el: HTMLElement) {
+        if (!el.dataset.id) {
+            throw new Error('recipient id is not defined');
+        }
 
-                const chatWindow = new ChatWindow(
-                    this.thisElement,
-                    el.dataset.id!,
-                    data
-                );
+        document.getElementById('ChatWindow-0')?.remove();
+        const data = await ChatRepository.get(el.dataset.id);
 
-                chatWindow.on('new-message', (message) => {
-                    if (typeof message === 'string')
-                        (
-                            document.getElementById(
-                                `recipient-${el.dataset.id}-last-message`
-                            ) as HTMLElement
-                        ).textContent = message;
-                });
+        const chatWindow = new ChatWindow(
+            this.thisElement,
+            el.dataset.id!,
+            el.dataset.name!,
+            data
+        );
 
-                chatWindow.render();
-            };
-        }
+        chatWindow.on('new-message', (message) => {
+            if (typeof message !== 'string') return;
+            (
+                document.getElementById(
+                    `recipient-${el.dataset.id}-last-message`
+                ) as HTMLElement
+            ).textContent = message;
+        });
+
+        chatWindow.render();
     }
 }