chore: msg feed pagination

This commit is contained in:
Tristan Yang
2023-01-11 07:48:51 +08:00
parent 6e8829aac0
commit e0744f8d21
5 changed files with 20 additions and 47 deletions
-4
View File
@@ -176,16 +176,12 @@ export default function useMessageFeed({ context = "channel", id }: Props) {
currPageInfo?.isLast ? 10 : 500 currPageInfo?.isLast ? 10 : 500
); );
}; };
const pullDown = () => {
// 向下加载
};
return { return {
mids, mids,
appends, appends,
hasMore, hasMore,
pullUp, pullUp,
pullDown,
list: items list: items
}; };
} }
-5
View File
@@ -15,11 +15,9 @@ import User from "../../../common/component/User";
import Layout from "../Layout"; import Layout from "../Layout";
import { renderMessageFragment } from "../utils"; import { renderMessageFragment } from "../utils";
import EditIcon from "../../../assets/icons/edit.svg"; import EditIcon from "../../../assets/icons/edit.svg";
// import alertIcon from "../../../assets/icons/alert.svg?url";
import IconFav from "../../../assets/icons/bookmark.svg"; import IconFav from "../../../assets/icons/bookmark.svg";
import IconPeople from "../../../assets/icons/people.svg"; import IconPeople from "../../../assets/icons/people.svg";
import IconPin from "../../../assets/icons/pin.svg"; import IconPin from "../../../assets/icons/pin.svg";
// import searchIcon from "../../../assets/icons/search.svg?url";
import IconHeadphone from "../../../assets/icons/headphone.svg"; import IconHeadphone from "../../../assets/icons/headphone.svg";
import addIcon from "../../../assets/icons/add.svg?url"; import addIcon from "../../../assets/icons/add.svg?url";
@@ -53,7 +51,6 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
const [addMemberModalVisible, setAddMemberModalVisible] = useState(false); const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
const { const {
selects, selects,
// msgIds,
userIds, userIds,
data, data,
messageData, messageData,
@@ -64,7 +61,6 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
selects: store.ui.selectMessages[`channel_${cid}`], selects: store.ui.selectMessages[`channel_${cid}`],
footprint: store.footprint, footprint: store.footprint,
loginUser: store.authData.user, loginUser: store.authData.user,
// msgIds: store.channelMessage[cid] || [],
userIds: store.users.ids, userIds: store.users.ids,
data: store.channels.byId[cid], data: store.channels.byId[cid],
messageData: store.message || {} messageData: store.message || {}
@@ -192,7 +188,6 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
)} )}
</div> </div>
)} )}
{/* <div className="feed"> */}
{feeds.map((mid, idx) => { {feeds.map((mid, idx) => {
const curr = messageData[mid]; const curr = messageData[mid];
if (!curr) return null; if (!curr) return null;
-18
View File
@@ -4,9 +4,6 @@ import Tippy from "@tippyjs/react";
import FavList from "../FavList"; import FavList from "../FavList";
import Tooltip from "../../../common/component/Tooltip"; import Tooltip from "../../../common/component/Tooltip";
import FavIcon from "../../../assets/icons/bookmark.svg"; 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 { useReadMessageMutation } from "../../../app/services/message";
import User from "../../../common/component/User"; import User from "../../../common/component/User";
import Layout from "../Layout"; import Layout from "../Layout";
@@ -40,8 +37,6 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
messageData: store.message messageData: store.message
}; };
}); });
// const ref = useChatScroll(msgIds);
if (!currUser) return null; if (!currUser) return null;
const readIndex = footprint.readUsers[uid]; const readIndex = footprint.readUsers[uid];
const feeds = [...msgIds, ...appends]; const feeds = [...msgIds, ...appends];
@@ -51,14 +46,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
context="user" context="user"
dropFiles={dropFiles} dropFiles={dropFiles}
aside={ aside={
<>
<ul className="tools"> <ul className="tools">
{/*<li className="tool">
<IconHeadphone />
</li>
<li className="tool">
<img src={alertIcon} alt="opt icon" />
</li> */}
<Tooltip tip="Saved Items" placement="left"> <Tooltip tip="Saved Items" placement="left">
<Tippy <Tippy
placement="left-start" placement="left-start"
@@ -73,13 +61,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
</li> </li>
</Tippy> </Tippy>
</Tooltip> </Tooltip>
{/* <li className="tool fav">
<FavIcon />
</li> */}
</ul> </ul>
{/* <hr className="divider" /> */}
{/* Third Apps */}
</>
} }
header={ header={
<StyledHeader className="head"> <StyledHeader className="head">
+2 -2
View File
@@ -26,9 +26,9 @@ const DMList: FC<Props> = ({ uids, setDropFiles }) => {
const sessions = uids.map((uid) => { const sessions = uids.map((uid) => {
const mids = userMessage[uid] || []; const mids = userMessage[uid] || [];
if (mids.length == 0) { 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 readIndex = readUsers[uid];
const { unreads = 0 } = getUnreadCount({ const { unreads = 0 } = getUnreadCount({
mids, mids,
+2 -2
View File
@@ -34,8 +34,8 @@ const LoadMore: FC<Props> = ({ pullUp = null }) => {
}; };
}, [ref, pullUp]); }, [ref, pullUp]);
return ( return (
<div className="mt-20 flex justify-center items-center w-full py-7" ref={ref}> <div className="mt-2 flex justify-center items-center w-full py-2" ref={ref}>
<Waveform size={24} lineWeight={5} speed={1} color="#ccc" /> <Waveform size={18} lineWeight={4} speed={1} color="#ccc" />
</div> </div>
); );
}; };