fix: scroll to the bottom on message send

frontend-park-mail-ru · Dec 18, 2024 · 7e5d7e0 · 7e5d7e0
1 parent 521ff3f
commit 7e5d7e0
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/src/components/ChatWindow/ChatWindow.ts b/src/components/ChatWindow/ChatWindow.ts
@@ -64,7 +64,6 @@ export default class ChatWindow extends BaseComponent {
 
         socket.onopen = (e) => {
             console.log('[open] Соединение установлено');
-            console.log('Отправляем данные на сервер');
         };
 
         socket.onmessage = (e) => this.handleMessageReceive(e);
@@ -99,6 +98,7 @@ export default class ChatWindow extends BaseComponent {
             '.js-message-input'
         ) as HTMLInputElement;
 
+        /** Resizes <textarea> to fit the content */
         const resizeTextArea = () => {
             textArea.style.cssText = 'height: auto';
             textArea.style.cssText = 'height:' + textArea.scrollHeight + 'px';
@@ -132,22 +132,29 @@ export default class ChatWindow extends BaseComponent {
     }
 
     private sendMessage(text: string) {
-        globalStore.chat.socket?.send(
-            JSON.stringify({
-                receiverId: this.recipientId,
-                content: text,
-            })
-        );
+        if (!globalStore.chat.socket) return;
 
-        this.addNewMessageElement({
-            content: text,
-            receiverId: '',
-            senderId: globalStore.auth.userId!,
-            id: 0,
-            createdAt: new Date().toISOString(),
-        });
-
-        this.emit('new-message', text);
+        try {
+            globalStore.chat.socket.send(
+                JSON.stringify({
+                    receiverId: this.recipientId,
+                    content: text,
+                })
+            );
+
+            this.addNewMessageElement({
+                content: text,
+                receiverId: '',
+                senderId: globalStore.auth.userId!,
+                id: 0,
+                createdAt: new Date().toISOString(),
+            });
+            this.scrollToTheBottom();
+
+            this.emit('new-message', text);
+        } catch (e) {
+            console.error('Error:', e);
+        }
     }
 
     private handleMessageReceive(event: MessageEvent) {
@@ -165,8 +172,7 @@ export default class ChatWindow extends BaseComponent {
             this.emit('new-message', message.content);
             this.addNewMessageElement(message);
 
-            this.messagesContainer.scrollTop =
-                this.messagesContainer.scrollHeight;
+            this.scrollToTheBottom();
         } else {
             console.log('other type of message');
         }
@@ -192,4 +198,8 @@ export default class ChatWindow extends BaseComponent {
 
         this.messagesContainer.appendChild(newMessage);
     }
+
+    private scrollToTheBottom() {
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
 }