refactor requests

src/api/tickets.ts

@@ -80,6 +80,9 @@ export async function getTicketMessages({
         useToken: true,
         body,
         signal,
+    }).then((response) => {
+        const result = (response as any).data as GetMessagesResponse;
+        return result;
     });
 }
 

src/pages/dashboard/Content/Support/Chat/Chat.tsx

@@ -30,7 +30,12 @@ export default function Chat() {
 
     const ticket = tickets.find(ticket => ticket.id === ticketId);
 
-    useEffect(function fetchTicketMessages() {
+    useEffect(function scrollOnNewMessage() {
+        scrollToBottom();
+    }, [messages]);
+
+    useEffect(
+        function fetchTicketMessages() {
             if (!ticketId) return;
 
             const getTicketsBody: GetMessagesRequest = {
@@ -47,7 +52,6 @@ export default function Chat() {
             }).then(result => {
                 console.log("GetMessagesResponse", result);
                 if (result?.length > 0) {
-                if (chatBoxRef.current && chatBoxRef.current.scrollTop < 1) chatBoxRef.current.scrollTop = 1;
                     addOrUpdateMessages(result);
                     setMessageFetchState("idle");
                 } else setMessageFetchState("all fetched");
@@ -58,6 +62,7 @@ export default function Chat() {
 
             return () => {
                 controller.abort();
+                clearMessageState();
             };
         }, [messageApiPage, messagesPerPage, ticketId]);
 
@@ -105,6 +110,7 @@ export default function Chat() {
             if (messagesFetchStateRef.current !== "idle") return;
 
             if (chatBox.scrollTop < chatBox.clientHeight) {
+                if (chatBox.scrollTop < 1) chatBox.scrollTop = 50;
                 incrementMessageApiPage();
             }
         };
@@ -247,3 +253,9 @@ export default function Chat() {
         </Box>
     );
 }
+
+function sortMessagesByTime(message1: TicketMessage, message2: TicketMessage) {
+    const date1 = new Date(message1.created_at).getTime();
+    const date2 = new Date(message2.created_at).getTime();
+    return date1 - date2;
+}