Added auto-scroll to bottom when new message is posted

dpigera · Jan 7, 2025 · fd06096 · fd06096
1 parent 1489bbf
commit fd06096
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 64 deletions.
diff --git a/app/controllers/dashboard.js b/app/controllers/dashboard.js
@@ -107,47 +107,71 @@ export default class DashboardController extends Controller {
     this.isMessageEmojiPickerVisible = false;
   }
 
+  @action
+  scrollToBottom() {
+    const messageContainer = document.querySelector('.messages-container');
+    if (messageContainer) {
+      messageContainer.scrollTop = messageContainer.scrollHeight;
+    }
+  }
+
+  @action
+  async handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    try {
+      const { url, fileName, fileEmoji } = await this.s3Upload.uploadFile(file);
+
+      const newMessage = {
+        id: String(Date.now()),
+        content: `${fileEmoji} File uploaded: ${fileName}`,
+        fileInfo: {
+          name: fileName,
+          url: url
+        },
+        user: {
+          id: '3',
+          name: 'Devin Pigera',
+          avatar: 'DP'
+        },
+        timestamp: new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),
+        replyCount: 0,
+        reactionCount: 0
+      };
+
+      this.messages = [...this.messages, newMessage];
+      event.target.value = '';
+
+      // Scroll to bottom after adding new message
+      setTimeout(() => this.scrollToBottom(), 0);
+    } catch (error) {
+      console.error('Error uploading file:', error);
+    }
+  }
+
   @action
   async postMessage() {
     if (!this.messageText.trim()) return;
 
     const newMessage = {
+      id: String(Date.now()),
       content: this.messageText,
       user: {
         id: '3',
         name: 'Devin Pigera',
         avatar: 'DP'
       },
       timestamp: new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),
-      reactionCount: 0,
-      replyCount: 0
+      replyCount: 0,
+      reactionCount: 0
     };
 
-    if (this.selectedChannelId) {
-      // Post to channel
-      await fetch(`/api/channels/${this.selectedChannelId}/messages`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(newMessage)
-      });
-    } else if (this.selectedUserId) {
-      // Post to DM
-      await fetch(`/api/directmsgs/${this.selectedUserId}/messages`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(newMessage)
-      });
-    }
-
-    // Add to current messages list
     this.messages = [...this.messages, newMessage];
-
-    // Clear input
     this.messageText = '';
+
+    // Scroll to bottom after adding new message
+    setTimeout(() => this.scrollToBottom(), 0);
   }
 
   @action
@@ -190,41 +214,4 @@ export default class DashboardController extends Controller {
       console.error('Error posting reply:', error);
     }
   }
-
-  @action
-  async handleFileUpload(event) {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    try {
-      // Upload file to S3
-      const { url, fileName, fileEmoji } = await this.s3Upload.uploadFile(file);
-
-      // Create new message object
-      const newMessage = {
-        id: String(Date.now()),
-        content: `${fileEmoji} File uploaded: ${fileName}`,
-        fileInfo: {
-          name: fileName,
-          url: url
-        },
-        user: {
-          id: '3',
-          name: 'Devin Pigera',
-          avatar: 'DP'
-        },
-        timestamp: new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),
-        replyCount: 0,
-        reactionCount: 0
-      };
-
-      // Add message to messages list
-      this.messages = [...this.messages, newMessage];
-
-      // Clear the file input
-      event.target.value = '';
-    } catch (error) {
-      console.error('Error uploading file:', error);
-    }
-  }
 } 
diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs
@@ -84,8 +84,7 @@
 
     {{!-- Messages Column --}}
     <div class="flex-1 bg-white flex flex-col">
-      {{!-- Messages List with Scroll --}}
-      <div class="flex-1 overflow-y-auto p-6">
+      <div class="flex-1 overflow-y-auto p-6 messages-container">
         <div class="space-y-6">
           {{#if this.messages}}
             {{#each this.messages as |message|}}