Globalize messages offset

RocketChat · Jan 10, 2025 · efa6ff1 · efa6ff1
1 parent c12b266
commit efa6ff1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js
@@ -13,6 +13,7 @@ const useFetchChatData = (showRoles) => {
   const setMemberRoles = useMemberStore((state) => state.setMemberRoles);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const setMessages = useMessageStore((state) => state.setMessages);
+  const setMessagesOffset = useMessageStore((state) => state.setMessagesOffset);
   const setAdmins = useMemberStore((state) => state.setAdmins);
   const setStarredMessages = useStarredMessageStore(
     (state) => state.setStarredMessages
@@ -31,7 +32,7 @@ const useFetchChatData = (showRoles) => {
           return;
         }
 
-        const { messages } = await RCInstance.getMessages(
+        const { messages, count } = await RCInstance.getMessages(
           anonymousMode,
           ECOptions?.enableThreads
             ? {
@@ -47,6 +48,7 @@ const useFetchChatData = (showRoles) => {
 
         if (messages) {
           setMessages(messages.filter((message) => message._hidden !== true));
+          setMessagesOffset(count);
         }
 
         if (!isUserAuthenticated) {

diff --git a/packages/react/src/store/messageStore.js b/packages/react/src/store/messageStore.js
@@ -8,6 +8,7 @@ const useMessageStore = create((set, get) => ({
   threadMessages: [],
   filtered: false,
   editMessage: {},
+  messagesOffset: 0,
   quoteMessage: [],
   messageToReport: NaN,
   showReportMessage: false,
@@ -79,6 +80,7 @@ const useMessageStore = create((set, get) => ({
     }
   },
   setEditMessage: (editMessage) => set(() => ({ editMessage })),
+  setMessagesOffset: (newOffset) => set(() => ({ messagesOffset: newOffset })),
   editMessagePermissions: {},
   setEditMessagePermissions: (editMessagePermissions) =>
     set((state) => ({ ...state, editMessagePermissions })),

diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
@@ -51,12 +51,13 @@ const ChatBody = ({
   const { RCInstance, ECOptions } = useContext(RCContext);
   const showAnnouncement = ECOptions?.showAnnouncement;
   const messages = useMessageStore((state) => state.messages);
+  const offset = useMessageStore((state) => state.messagesOffset);
+  const setMessagesOffset = useMessageStore((state) => state.setMessagesOffset);
   const threadMessages = useMessageStore((state) => state.threadMessages);
   const [isModalOpen, setModalOpen] = useState(false);
   const setThreadMessages = useMessageStore((state) => state.setThreadMessages);
   const upsertMessage = useMessageStore((state) => state.upsertMessage);
   const [loadingOlderMessages, setLoadingOlderMessages] = useState(false);
-  const [offset, setOffset] = useState(50);
   const [hasMoreMessages, setHasMoreMessages] = useState(true);
   const removeMessage = useMessageStore((state) => state.removeMessage);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
@@ -156,7 +157,6 @@ const ChatBody = ({
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {
       if (user) {
-        setOffset(50);
         getMessagesAndRoles();
         setHasMoreMessages(true);
       } else {
@@ -207,7 +207,7 @@ const ChatBody = ({
             const previousScrollHeight = messageList.scrollHeight;
 
             setMessages(olderMessages.messages, true);
-            setOffset((prevOffset) => prevOffset + 50);
+            setMessagesOffset(offset + olderMessages.messages.length);
 
             requestAnimationFrame(() => {
               const newScrollHeight = messageList.scrollHeight;
@@ -234,6 +234,7 @@ const ChatBody = ({
   }, [
     messageListRef,
     offset,
+    setMessagesOffset,
     setMessages,
     anonymousMode,
     hasMoreMessages,