diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js index 70a222a..10158b9 100644 --- a/backend/src/controllers/MessageController.js +++ b/backend/src/controllers/MessageController.js @@ -73,6 +73,8 @@ exports.index = async (req, res, next) => { order: [["createdAt", "DESC"]], }); + const count = await ticket.countMessages(); + const serializedMessages = ticketMessages.map(message => { return { ...message.dataValues, @@ -86,7 +88,8 @@ exports.index = async (req, res, next) => { return res.json({ messages: serializedMessages.reverse(), - ticket: ticket, + ticket, + count, }); }; diff --git a/frontend/package.json b/frontend/package.json index 459c388..1040025 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,7 +18,6 @@ "qrcode.react": "^1.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-infinite-scroll-reverse": "^1.0.3", "react-linkify": "^1.0.0-alpha", "react-modal-image": "^2.5.0", "react-router-dom": "^5.2.0", diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 84144a7..9be8d00 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -4,7 +4,6 @@ import { useParams, useHistory } from "react-router-dom"; import { toast } from "react-toastify"; import { isSameDay, parseISO, format } from "date-fns"; import openSocket from "socket.io-client"; -import InfiniteScrollReverse from "react-infinite-scroll-reverse"; import ModalImage from "react-modal-image"; import { makeStyles } from "@material-ui/core/styles"; @@ -99,6 +98,7 @@ const useStyles = makeStyles(theme => ({ flexDirection: "column", flexGrow: 1, padding: "20px 20px 20px 20px", + // scrollBehavior: "smooth", overflowY: "scroll", "&::-webkit-scrollbar": { width: "8px", @@ -233,8 +233,8 @@ const MessagesList = () => { const [contact, setContact] = useState({}); const [ticket, setTicket] = useState({}); const [messagesList, setMessagesList] = useState([]); - const [hasMore, setHasMore] = useState(false); - const [pageNumber, setPageNumber] = useState(0); + const [count, setCount] = useState(0); + const [pageNumber, setPageNumber] = useState(1); const [drawerOpen, setDrawerOpen] = useState(false); const lastMessageRef = useRef(); @@ -246,17 +246,18 @@ const MessagesList = () => { const delayDebounceFn = setTimeout(() => { const fetchMessages = async () => { try { - const res = await api.get("/messages/" + ticketId, { + const { data } = await api.get("/messages/" + ticketId, { params: { pageNumber }, }); - setContact(res.data.ticket.contact); - setTicket(res.data.ticket); + setContact(data.ticket.contact); + setTicket(data.ticket); setMessagesList(prevMessages => { - return [...res.data.messages, ...prevMessages]; + return [...data.messages, ...prevMessages]; }); - setHasMore(res.data.messages.length > 0); + setCount(data.count); + // setHasMore(res.data.messages.length > 0); setLoading(false); - if (pageNumber === 1 && res.data.messages.length > 1) { + if (pageNumber === 1 && data.messages.length > 1) { scrollToBottom(); } } catch (err) { @@ -414,6 +415,23 @@ const MessagesList = () => { } }; + const handleScroll = e => { + if (count === messagesList.length) return; + const { scrollTop } = e.currentTarget; + + if (scrollTop === 0) { + document.getElementById("messagesList").scrollTop = 50; + } + + if (loading) { + return; + } + + if (scrollTop < 50) { + loadMore(); + } + }; + const renderDailyTimestamps = (message, index) => { if (index === 0) { return ( @@ -593,15 +611,13 @@ const MessagesList = () => { )}