diff --git a/src/common/hook/useMessageFeed.ts b/src/common/hook/useMessageFeed.ts index cfd8f4bb..a3c6c4f4 100644 --- a/src/common/hook/useMessageFeed.ts +++ b/src/common/hook/useMessageFeed.ts @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef } from "react"; +import { useEffect, useState, useRef, useCallback } from "react"; import { useLazyGetHistoryMessagesQuery } from "../../app/services/channel"; import { useLazyGetHistoryMessagesQuery as useLazyGetDMHistoryMsg } from "../../app/services/user"; import { useAppSelector } from "../../app/store"; @@ -83,16 +83,40 @@ export default function useMessageFeed({ context = "channel", id }: Props) { setAppends([]); setPulling(false); }, [context, id]); + useEffect(() => { - // 处理自动滚动 - if (items.length > 0) { - let wrapper = containerRef.current = document.querySelector(`#VOCECHAT_FEED_${context}_${id}`); - if (wrapper) { - const newScroll = wrapper.scrollHeight - wrapper.clientHeight; - wrapper.scrollTop = curScrollPos + (newScroll - oldScroll); + const currentItems = listRef.current; + // const [lastMid=Infinity]=currentItems.slice(-1) + //过滤掉本地(以及后来追加的消息?) + const serverMids = mids.filter((id: number) => { + // 如果是本地消息,id是时间戳 + const ts = +new Date(); + return Math.abs(ts - id) > 10 * 1000; + }); + if (serverMids.length > 0) { + if (currentItems.length == 0) { + //初次 + const pageInfo = getFeedWithPagination({ + mids: serverMids, + isLast: true + }); + pageRef.current = pageInfo; + listRef.current = pageInfo.ids; + setItems(pageInfo.ids); + // console.log("message pageInfo", serverMids, pageInfo); + } else { + const container = containerRef.current; + if (container) { + const loadMoreEle = container.querySelector("[data-load-more]"); + console.log("effected by pull server data", loadMoreEle, isElementVisible(loadMoreEle)); + if (isElementVisible(loadMoreEle)) { + // 有更新:来自于拉取历史消息,拉取下一页数据 + loadMore(); + } + } } } - }, [items, context, id]); + }, [mids]); useEffect(() => { //处理追加:来自于其它人的实时消息以及自己发的 @@ -121,40 +145,17 @@ export default function useMessageFeed({ context = "channel", id }: Props) { } } }, [mids, messageData, loginUid]); - useEffect(() => { - const currentItems = listRef.current; - // const [lastMid=Infinity]=currentItems.slice(-1) - //过滤掉本地(以及后来追加的消息?) - const serverMids = mids.filter((id: number) => { - // 如果是本地消息,id是时间戳 - const ts = +new Date(); - return Math.abs(ts - id) > 10 * 1000; - }); - if (serverMids.length > 0) { - if (currentItems.length == 0) { - //初次 - const pageInfo = getFeedWithPagination({ - mids: serverMids, - isLast: true - }); - pageRef.current = pageInfo; - listRef.current = pageInfo.ids; - setItems(pageInfo.ids); - // console.log("message pageInfo", serverMids, pageInfo); - } else { - const container = containerRef.current; - if (container) { - const loadMoreEle = container.querySelector("[data-load-more]"); - if (isElementVisible(loadMoreEle)) { - // 有更新:来自于拉取历史消息,拉取下一页数据 - console.log("effected by pull server data"); - loadMore(); - } - } + // 处理自动滚动 + if (items.length > 0) { + let wrapper = containerRef.current = document.querySelector(`#VOCECHAT_FEED_${context}_${id}`); + if (wrapper) { + const newScroll = wrapper.scrollHeight - wrapper.clientHeight; + wrapper.scrollTop = curScrollPos + (newScroll - oldScroll); } } - }, [mids]); + }, [items, context, id]); + const loadMore = () => { console.log("load more start", mids, listRef.current, pageRef.current); const currPageInfo = pageRef.current; @@ -192,26 +193,29 @@ export default function useMessageFeed({ context = "channel", id }: Props) { ); setPulling(false); }; - const pullUp = async () => { + const pullUp = useCallback( + async () => { - setPulling(true); - const currPageInfo = pageRef.current; - console.log("pull up start", currPageInfo); - // 本地数据的第一页 - if (currPageInfo && currPageInfo.isFirst || (!currPageInfo && mids.length == 0)) { - const [firstMid] = currPageInfo ? currPageInfo.ids : [0]; - const { data: newList } = await loadMoreMsgsFromServer({ - mid: firstMid, - id - }); - if (newList?.length == 0) { - // 只有在这里,才可以把load more去掉 - setHasMore(false); + setPulling(true); + const currPageInfo = pageRef.current; + console.log("pull up start", currPageInfo); + // 本地数据的第一页 + if (currPageInfo && currPageInfo.isFirst || (!currPageInfo && mids.length == 0)) { + const [firstMid] = currPageInfo ? currPageInfo.ids : [0]; + const { data: newList } = await loadMoreMsgsFromServer({ + mid: firstMid, + id + }); + if (newList?.length == 0) { + // 只有在这里,才可以把has more去掉 + setHasMore(false); + } + return; } - return; - } - loadMore(); - }; + loadMore(); + }, + [context, id], + ); return { pulling, diff --git a/src/routes/chat/GuestChannelChatInfo/index.tsx b/src/routes/chat/GuestChannelChatInfo/index.tsx index 4e812411..ef2b6804 100644 --- a/src/routes/chat/GuestChannelChatInfo/index.tsx +++ b/src/routes/chat/GuestChannelChatInfo/index.tsx @@ -17,7 +17,8 @@ export default function GuestChannelChat({ cid = 0 }: Props) { list: msgIds, appends, hasMore, - pullUp + pullUp, + pulling } = useMessageFeed({ context: "channel", id: cid @@ -50,7 +51,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) { > {hasMore ? ( - + ) : (

{t("welcome_channel", { name })}

diff --git a/src/routes/chat/LoadMore.tsx b/src/routes/chat/LoadMore.tsx index 06ef616c..9dcdefc1 100644 --- a/src/routes/chat/LoadMore.tsx +++ b/src/routes/chat/LoadMore.tsx @@ -1,4 +1,4 @@ -import { memo, useEffect, FC } from "react"; +import { useEffect, FC } from "react"; import { Waveform } from "@uiball/loaders"; import { useInViewRef } from "rooks"; @@ -19,6 +19,7 @@ const LoadMore: FC = ({ pullUp = null, pulling }) => {
); }; -export default memo(LoadMore, (prev, next) => { - return prev.pulling === next.pulling; -}); +export default LoadMore; +// export default memo(LoadMore, (prev, next) => { +// return prev.pulling === next.pulling; +// });