feat: add pagination to DM session

src/routes/chat/ChannelChat/index.js

@@ -30,7 +30,7 @@ import {
   StyledHeader,
 } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
-import LoadMore from "./LoadMore";
+import LoadMore from "../LoadMore";
 // import useChatScroll from "../../../common/hook/useChatScroll";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {

src/routes/chat/DMChat/index.js

@@ -11,39 +11,40 @@ import IconHeadphone from "../../../assets/icons/headphone.svg";
 
 import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
 import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
-import useChatScroll from "../../../common/hook/useChatScroll";
+// import useChatScroll from "../../../common/hook/useChatScroll";
 import { useReadMessageMutation } from "../../../app/services/message";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
 import { StyledHeader, StyledDMChat } from "./styled";
+import LoadMore from "../LoadMore";
 import { renderMessageFragment } from "../utils";
+import useMessageFeed from "../../../common/hook/useMessageFeed";
 export default function DMChat({ uid = "", dropFiles = [] }) {
+  const { list: msgIds, appends, hasMore, pullUp } = useMessageFeed({
+    context: "user",
+    id: uid,
+  });
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   console.log("dm files", dropFiles);
   // const [mids, setMids] = useState([]);
-  const {
-    msgIds,
-    currUser,
-    messageData,
-    footprint,
-    loginUid,
-    selects,
-  } = useSelector((store) => {
-    return {
-      selects: store.ui.selectMessages[`user_${uid}`],
-      loginUid: store.authData.uid,
-      footprint: store.footprint,
-      currUser: store.contacts.byId[uid],
-      msgIds: store.userMessage.byId[uid] || [],
-      messageData: store.message,
-    };
-  });
-  const ref = useChatScroll(msgIds);
+  const { currUser, messageData, footprint, loginUid, selects } = useSelector(
+    (store) => {
+      return {
+        selects: store.ui.selectMessages[`user_${uid}`],
+        loginUid: store.authData.uid,
+        footprint: store.footprint,
+        currUser: store.contacts.byId[uid],
+        messageData: store.message,
+      };
+    }
+  );
+  // const ref = useChatScroll(msgIds);
 
   if (!currUser) return null;
   // console.log("user msgs", msgs);
   const readIndex = footprint.readUsers[uid];
+  const feeds = [...msgIds, ...appends];
   return (
     <Layout
       to={uid}
@@ -58,7 +59,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
             {/* <li className="tool">
               <img src={alertIcon} alt="opt icon" />
             </li> */}
-            <Tooltip tip="Favorite" placement="left">
+            <Tooltip tip="Saved Items" placement="left">
               <Tippy
                 placement="left-start"
                 popperOptions={{ strategy: "fixed" }}
@@ -97,25 +98,22 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
         </StyledHeader>
       }
     >
-      <StyledDMChat ref={ref}>
-        {[...msgIds]
-          .sort((a, b) => {
-            return Number(a) - Number(b);
-          })
-          .map((mid, idx) => {
-            const curr = messageData[mid];
-            const prev = idx == 0 ? null : messageData[msgIds[idx - 1]];
-            const read = curr?.from_uid == loginUid || mid <= readIndex;
-            return renderMessageFragment({
-              selectMode: !!selects,
-              updateReadIndex: updateReadDebounced,
-              read,
-              prev,
-              curr,
-              contextId: uid,
-              context: "user",
-            });
-          })}
+      <StyledDMChat id={`RUSTCHAT_FEED_user_${uid}`}>
+        {hasMore ? <LoadMore pullUp={pullUp} /> : null}
+        {[...feeds].map((mid, idx) => {
+          const curr = messageData[mid];
+          const prev = idx == 0 ? null : messageData[feeds[idx - 1]];
+          const read = curr?.from_uid == loginUid || mid <= readIndex;
+          return renderMessageFragment({
+            selectMode: !!selects,
+            updateReadIndex: updateReadDebounced,
+            read,
+            prev,
+            curr,
+            contextId: uid,
+            context: "user",
+          });
+        })}
       </StyledDMChat>
     </Layout>
   );