Fix message scrolling and message order

Rikthepixel · Jan 18, 2024 · c9566f5 · c9566f5
1 parent 6a176dd
commit c9566f5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/apps/frontend/src/pages/messages/[uid]/components/MessageBubble.tsx b/apps/frontend/src/pages/messages/[uid]/components/MessageBubble.tsx
@@ -1,15 +1,25 @@
 import { Text, Group, Stack, Paper } from '@mantine/core';
+import { useEffect, useRef } from 'react';
 
 interface MessageBubbleProps {
   username: string;
   content: string;
   sentAt: Date;
   fromSelf: boolean;
+  latest: boolean;
 }
 
 export default function MessageBubble(props: MessageBubbleProps) {
+  const bubbleRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    if (!props.latest) return;
+    bubbleRef.current?.scrollIntoView({ behavior: "auto"})
+
+  }, [props.latest])
+
   return (
     <Paper
+      ref={bubbleRef}
       bg={props.fromSelf ? 'red' : 'blue'}
       maw="80%"
       p="md"

diff --git a/apps/frontend/src/pages/messages/[uid]/index.page.tsx b/apps/frontend/src/pages/messages/[uid]/index.page.tsx
@@ -11,7 +11,7 @@ import {
   Center,
   Paper,
 } from '@mantine/core';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { MdChevronLeft } from 'react-icons/md';
 import { Link } from 'wouter';
 import { z } from 'zod';
@@ -27,7 +27,6 @@ export default function MessagePage() {
   const params = useTypedParams(PARAMS_SCHEMA);
   const { chat, connectToChat, disconnect } = useChats();
   const { user: currentUser } = useAuth();
-  const previousMessagesLength = useRef(0);
 
   useEffect(() => {
     if (!params?.uid) return;
@@ -39,16 +38,6 @@ export default function MessagePage() {
     .unwrapValue()?.[0]
     ?.users.find((_user) => _user.provider_id !== currentUser?.providerId);
 
-  useEffect(() => {
-    chat.map(([chat]) => {
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: previousMessagesLength.current === 0 ? 'instant' : 'smooth',
-      });
-      previousMessagesLength.current = chat.messages.length;
-    });
-  }, [chat]);
-
   return (
     <PageContainer display="flex">
       <Stack
@@ -87,7 +76,7 @@ export default function MessagePage() {
                     </Paper>
                   </Center>
                 )}
-                {chat.messages.map((message) => (
+                {chat.messages.map((message, idx, arr) => (
                   <MessageBubble
                     key={message.uid}
                     username={message.user.username}
@@ -96,6 +85,7 @@ export default function MessagePage() {
                     fromSelf={
                       message.user.provider_id === currentUser?.providerId
                     }
+                    latest={idx === arr.length - 1}
                   />
                 ))}
               </Stack>

diff --git a/apps/messages/src/repositories/chat/KnexChatRepository.ts b/apps/messages/src/repositories/chat/KnexChatRepository.ts
@@ -49,6 +49,7 @@ export default class KnexChatRepository implements ChatRepository {
           'users.username as user_username',
           'users.provider_id as user_provider_id',
         )
+        .orderBy('messages.sent_at', 'asc')
         .then<ChatWithUsersAndMessages['messages']>((msgs) =>
           msgs.map((msg) => ({
             ...msg,
@@ -124,9 +125,9 @@ export default class KnexChatRepository implements ChatRepository {
         if (!chat) return null;
         return {
           ...chat,
-          uid: this.db.fn.binToUuid(chat.uid)
+          uid: this.db.fn.binToUuid(chat.uid),
         };
-      })
+      });
   }
 
   create(chat: CreatableChat): Promise<void> {