chore: msg feed pagination
This commit is contained in:
@@ -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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user