fix fetch on scroll
This commit is contained in:
parent
bec307569c
commit
208c7f69ff
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user