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,36 +30,41 @@ export default function Chat() {
 
     const ticket = tickets.find(ticket => ticket.id === ticketId);
 
-    useEffect(function fetchTicketMessages() {
+    useEffect(function scrollOnNewMessage() {
-        if (!ticketId) return;
+        scrollToBottom();
+    }, [messages]);
 
-        const getTicketsBody: GetMessagesRequest = {
+    useEffect(
-            amt: messagesPerPage,
+        function fetchTicketMessages() {
-            page: messageApiPage,
+            if (!ticketId) return;
-            ticket: ticketId,
-        };
-        const controller = new AbortController();
 
-        setMessageFetchState("fetching");
+            const getTicketsBody: GetMessagesRequest = {
-        getTicketMessages({
+                amt: messagesPerPage,
-            body: getTicketsBody,
+                page: messageApiPage,
-            signal: controller.signal,
+                ticket: ticketId,
-        }).then(result => {
+            };
-            console.log("GetMessagesResponse", result);
+            const controller = new AbortController();
-            if (result?.length > 0) {
-                if (chatBoxRef.current && chatBoxRef.current.scrollTop < 1) chatBoxRef.current.scrollTop = 1;
-                addOrUpdateMessages(result);
-                setMessageFetchState("idle");
-            } else setMessageFetchState("all fetched");
-        }).catch(error => {
-            console.log("Error fetching messages", error);
-            enqueueSnackbar(error.message);
-        });
 
-        return () => {
+            setMessageFetchState("fetching");
-            controller.abort();
+            getTicketMessages({
-        };
+                body: getTicketsBody,
-    }, [messageApiPage, messagesPerPage, ticketId]);
+                signal: controller.signal,
+            }).then(result => {
+                console.log("GetMessagesResponse", result);
+                if (result?.length > 0) {
+                    addOrUpdateMessages(result);
+                    setMessageFetchState("idle");
+                } else setMessageFetchState("all fetched");
+            }).catch(error => {
+                console.log("Error fetching messages", error);
+                enqueueSnackbar(error.message);
+            });
+
+            return () => {
+                controller.abort();
+                clearMessageState();
+            };
+        }, [messageApiPage, messagesPerPage, ticketId]);
 
     useEffect(function subscribeToMessages() {
 ==== BASE ====
@@ -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;
+}