chore: msg feed pagination

src/routes/chat/ChannelChat/index.tsx

@@ -15,11 +15,9 @@ import User from "../../../common/component/User";
 import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
 import EditIcon from "../../../assets/icons/edit.svg";
-// import alertIcon from "../../../assets/icons/alert.svg?url";
 import IconFav from "../../../assets/icons/bookmark.svg";
 import IconPeople from "../../../assets/icons/people.svg";
 import IconPin from "../../../assets/icons/pin.svg";
-// import searchIcon from "../../../assets/icons/search.svg?url";
 import IconHeadphone from "../../../assets/icons/headphone.svg";
 
 import addIcon from "../../../assets/icons/add.svg?url";
@@ -53,7 +51,6 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
   const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
   const {
     selects,
-    // msgIds,
     userIds,
     data,
     messageData,
@@ -64,7 +61,6 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
       selects: store.ui.selectMessages[`channel_${cid}`],
       footprint: store.footprint,
       loginUser: store.authData.user,
-      // msgIds: store.channelMessage[cid] || [],
       userIds: store.users.ids,
       data: store.channels.byId[cid],
       messageData: store.message || {}
@@ -192,7 +188,6 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
               )}
             </div>
           )}
-          {/* <div className="feed"> */}
           {feeds.map((mid, idx) => {
             const curr = messageData[mid];
             if (!curr) return null;

src/routes/chat/DMChat/index.tsx

@@ -4,9 +4,6 @@ import Tippy from "@tippyjs/react";
 import FavList from "../FavList";
 import Tooltip from "../../../common/component/Tooltip";
 import FavIcon from "../../../assets/icons/bookmark.svg";
-// import searchIcon from "../../../assets/icons/search.svg?url";
-// import IconHeadphone from "../../../assets/icons/headphone.svg";
-// import useChatScroll from "../../../common/hook/useChatScroll";
 import { useReadMessageMutation } from "../../../app/services/message";
 import User from "../../../common/component/User";
 import Layout from "../Layout";
@@ -40,8 +37,6 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
       messageData: store.message
     };
   });
-  // const ref = useChatScroll(msgIds);
-
   if (!currUser) return null;
   const readIndex = footprint.readUsers[uid];
   const feeds = [...msgIds, ...appends];
@@ -51,35 +46,22 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
       context="user"
       dropFiles={dropFiles}
       aside={
-        <>
-          <ul className="tools">
-            {/*<li className="tool">
-              <IconHeadphone />
-            </li>
-             <li className="tool">
-              <img src={alertIcon} alt="opt icon" />
-            </li> */}
-            <Tooltip tip="Saved Items" placement="left">
-              <Tippy
-                placement="left-start"
-                popperOptions={{ strategy: "fixed" }}
-                offset={[0, 180]}
-                interactive
-                trigger="click"
-                content={<FavList uid={uid} />}
-              >
-                <li className={`tool fav`}>
-                  <FavIcon />
-                </li>
-              </Tippy>
-            </Tooltip>
-            {/* <li className="tool fav">
-              <FavIcon />
-            </li> */}
-          </ul>
-          {/* <hr className="divider" /> */}
-          {/* Third Apps */}
-        </>
+        <ul className="tools">
+          <Tooltip tip="Saved Items" placement="left">
+            <Tippy
+              placement="left-start"
+              popperOptions={{ strategy: "fixed" }}
+              offset={[0, 180]}
+              interactive
+              trigger="click"
+              content={<FavList uid={uid} />}
+            >
+              <li className={`tool fav`}>
+                <FavIcon />
+              </li>
+            </Tippy>
+          </Tooltip>
+        </ul>
       }
       header={
         <StyledHeader className="head">

src/routes/chat/DMList/index.tsx

@@ -26,9 +26,9 @@ const DMList: FC<Props> = ({ uids, setDropFiles }) => {
   const sessions = uids.map((uid) => {
     const mids = userMessage[uid] || [];
     if (mids.length == 0) {
-      return { lastMid: null, unreads: 0, uid };
+      return { lastMid: 0, unreads: 0, uid };
     }
-    const lastMid = [...mids].pop();
+    const lastMid = [...mids].pop() || 0;
     const readIndex = readUsers[uid];
     const { unreads = 0 } = getUnreadCount({
       mids,

src/routes/chat/LoadMore.tsx

@@ -34,8 +34,8 @@ const LoadMore: FC<Props> = ({ pullUp = null }) => {
     };
   }, [ref, pullUp]);
   return (
-    <div className="mt-20 flex justify-center items-center w-full py-7" ref={ref}>
-      <Waveform size={24} lineWeight={5} speed={1} color="#ccc" />
+    <div className="mt-2 flex justify-center items-center w-full py-2" ref={ref}>
+      <Waveform size={18} lineWeight={4} speed={1} color="#ccc" />
     </div>
   );
 };