From 208c7f69ff56a7baa3e31aab6ab70674cdb04011 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 12 May 2023 18:33:18 +0300
Subject: [PATCH] fix fetch on scroll

---
 .../dashboard/Content/Support/Chat/Chat.tsx   | 66 ++++++++-----------
 1 file changed, 27 insertions(+), 39 deletions(-)

diff --git a/src/pages/dashboard/Content/Support/Chat/Chat.tsx b/src/pages/dashboard/Content/Support/Chat/Chat.tsx
index 6ee891b..8689102 100644
--- a/src/pages/dashboard/Content/Support/Chat/Chat.tsx
+++ b/src/pages/dashboard/Content/Support/Chat/Chat.tsx
@@ -30,41 +30,36 @@ export default function Chat() {
 
     const ticket = tickets.find(ticket => ticket.id === ticketId);
 
-    useEffect(function scrollOnNewMessage() {
-        scrollToBottom();
-    }, [messages]);
+    useEffect(function fetchTicketMessages() {
+        if (!ticketId) return;
 
-    useEffect(
-        function fetchTicketMessages() {
-            if (!ticketId) return;
+        const getTicketsBody: GetMessagesRequest = {
+            amt: messagesPerPage,
+            page: messageApiPage,
+            ticket: ticketId,
+        };
+        const controller = new AbortController();
 
-            const getTicketsBody: GetMessagesRequest = {
-                amt: messagesPerPage,
-                page: messageApiPage,
-                ticket: ticketId,
-            };
-            const controller = new AbortController();
+        setMessageFetchState("fetching");
+        getTicketMessages({
+            body: getTicketsBody,
+            signal: controller.signal,
+        }).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");
+        }).catch(error => {
+            console.log("Error fetching messages", error);
+            enqueueSnackbar(error.message);
+        });
 
-            setMessageFetchState("fetching");
-            getTicketMessages({
-                body: getTicketsBody,
-                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]);
+        return () => {
+            controller.abort();
+        };
+    }, [messageApiPage, messagesPerPage, ticketId]);
 
     useEffect(function subscribeToMessages() {
 ==== BASE ====
@@ -110,7 +105,6 @@ export default function Chat() {
             if (messagesFetchStateRef.current !== "idle") return;
 
             if (chatBox.scrollTop < chatBox.clientHeight) {
-                if (chatBox.scrollTop < 1) chatBox.scrollTop = 50;
                 incrementMessageApiPage();
             }
         };
@@ -253,9 +247,3 @@ 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;
-}