diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js index 5a56494..b5d0469 100644 --- a/src/actions/ConversationActions.js +++ b/src/actions/ConversationActions.js @@ -36,15 +36,9 @@ export const fetchMessages = async (params) => { pagesize: MESSAGE_PAGE_SIZE, }; const { errcode, result } = await fetchJSON(`${API_HOST}/getcusmessages`, {...defaultParams, ...params}); - return errcode !== 0 ? [] : parseRenderMessageList(result || []); + return errcode !== 0 ? [] : parseRenderMessageList(result.reverse() || []); } -export const fetchCustomerProfile = async (colisn) => { - const { result } = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn }); - const data = result?.[0] || {}; - return data; -}; - /** * * @param {object} params { opisn, whatsappid, colisn } @@ -72,3 +66,8 @@ export const fetchCleanUnreadMsgCount = async (params) => { const { errcode, result } = await fetchJSON(`${API_HOST}/clean_unread_msg_count`, params); return errcode !== 0 ? {} : result; }; + +/** + * ------------------------------------------------------------------------------------------------ + * 历史记录 + */ diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js index 13faa4c..7a8de32 100644 --- a/src/stores/ConversationStore.js +++ b/src/stores/ConversationStore.js @@ -149,7 +149,7 @@ const conversationSlice = (set, get) => ({ const newConversationsMapped = newConversations.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {}); const newListIds = newList.map((chatItem) => `${chatItem.sn}`); - const withoutNew = conversationsList.filter(item => !newListIds.includes(`${item.sn}`)); + const withoutNew = conversationsList.filter((item) => !newListIds.includes(`${item.sn}`)); return set((state) => ({ conversationsList: [...newList, ...withoutNew], @@ -188,6 +188,7 @@ const conversationSlice = (set, get) => ({ conversationsList: [...conversationsList], })); }, + updateCurrentConversation: (conversation) => set((state) => ({ currentConversation: { ...state.currentConversation, ...conversation } })), updateConversationItem: (conversation) => { const { conversationsList } = get(); const targetId = conversation.sn; diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx index 024bbd2..edf0f63 100644 --- a/src/views/ChatHistory.jsx +++ b/src/views/ChatHistory.jsx @@ -194,7 +194,7 @@ function ChatHistory() { const onLoadMore = () => { getMessages(selectedConversation); - window.dispatchEvent(new Event('resize')); + // window.dispatchEvent(new Event('resize')); }; const loadMore = !loading && selectedConversation.loadNextPage ? (
diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx index c7f4665..56a91cd 100644 --- a/src/views/Conversations/Components/ConversationsList.jsx +++ b/src/views/Conversations/Components/ConversationsList.jsx @@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from 'react'; import { useParams, useNavigate, useLocation } from 'react-router-dom'; import { Button, Dropdown, Input } from 'antd'; import { MoreOutlined } from '@ant-design/icons'; -import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages, fetchCleanUnreadMsgCount } from '@/actions/ConversationActions'; +import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages, MESSAGE_PAGE_SIZE, fetchCleanUnreadMsgCount } from '@/actions/ConversationActions'; import { ChatList, ChatItem } from 'react-chat-elements'; import { isEmpty } from '@/utils/utils'; import useConversationStore from '@/stores/ConversationStore'; @@ -19,7 +19,7 @@ const Conversations = () => { const userId = useAuthStore((state) => state.loginUser.userId); const initialState = useConversationStore((state) => state.initialState); const activeConversations = useConversationStore((state) => state.activeConversations); - const [currentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation]); + const [currentConversation, setCurrentConversation, updateCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation, state.updateCurrentConversation]); const conversationsList = useConversationStore((state) => state.conversationsList); const addToConversationList = useConversationStore((state) => state.addToConversationList); const delConversationitem = useConversationStore((state) => state.delConversationitem); @@ -76,6 +76,9 @@ const Conversations = () => { const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number, lasttime: '2024-01-01T00:25:30' }); setMsgLoading(false); receivedMessageList(item.sn, data); + const thisLastTime = data.length > 0 ? data[data.length - 1].orgmsgtime : ''; + const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE); + updateCurrentConversation({ lasttime: thisLastTime, loadNextPage }); }; const switchConversation = async (item) => { setCurrentConversation(item); diff --git a/src/views/Conversations/Components/MessagesList.jsx b/src/views/Conversations/Components/MessagesList.jsx index 8435a0b..6e46393 100644 --- a/src/views/Conversations/Components/MessagesList.jsx +++ b/src/views/Conversations/Components/MessagesList.jsx @@ -1,37 +1,20 @@ import { useEffect, useRef, useState, forwardRef, memo } from 'react'; import { MessageBox } from 'react-chat-elements'; import { Button } from 'antd'; -import { DownOutlined } from '@ant-design/icons'; +import { DownOutlined, LoadingOutlined } from '@ant-design/icons'; import { useShallow } from 'zustand/react/shallow'; import useConversationStore from '@/stores/ConversationStore'; -import { isEmpty, olog } from '@/utils/utils'; +import { isEmpty, } from '@/utils/utils'; -const MessagesList = ({ messages, handlePreview, reference }) => { +const MessagesList = ({ messages, handlePreview, reference, longListLoading, getMoreMessages, shouldScrollBottom, loadNextPage, ...props }) => { const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg)); // const messagesEndRef = useRef(null); const messageRefs = useRef([]); - const [page, setPage] = useState(1); - let timeout = null; + const prevProps = useRef(props) - const fetchNextPage = async () => { - olog('fetchNextPage') - setPage(page + 1); - // Fetch next page of messages here - }; - - const handleScroll = (e) => { - const { scrollTop } = e.target; - const delay = 1000; // 1 second - - if (scrollTop === 0) { - if (timeout) clearTimeout(timeout); - timeout = setTimeout(fetchNextPage, delay); - } - }; - - const scrollToBottom = () => { - if (reference.current) { + const scrollToBottom = (force = false) => { + if (reference.current && (shouldScrollBottom || force)) { reference.current.scrollTop = reference.current.scrollHeight; } }; @@ -45,18 +28,6 @@ const MessagesList = ({ messages, handlePreview, reference }) => { useEffect(scrollToBottom, [messages]); - useEffect(() => { - const messageList = reference.current; - if (messageList) { - messageList.addEventListener('scroll', handleScroll); - } - return () => { - if (messageList) { - messageList.removeEventListener('scroll', handleScroll); - } - }; - }, []); - const RenderText = memo(function renderText({ str }) { const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== ''); const links = str.match(/https?:\/\/[\S]+/gi) || []; @@ -90,6 +61,9 @@ const MessagesList = ({ messages, handlePreview, reference }) => { ); }); + const onLoadMore = async () => { + const newLen = await getMoreMessages(); + }; // eslint-disable-next-line react/display-name const MessageBoxWithRef = forwardRef((props, ref) => (
@@ -100,6 +74,11 @@ const MessagesList = ({ messages, handlePreview, reference }) => { return (
+ {loadNextPage && ( +
+ {!longListLoading ? : } +
+ )} {messages.map((message, index) => ( (messageRefs.current[index] = el)} @@ -137,7 +116,7 @@ const MessagesList = ({ messages, handlePreview, reference }) => { /> ))}
-
); }; diff --git a/src/views/Conversations/Components/MessagesWrapper.jsx b/src/views/Conversations/Components/MessagesWrapper.jsx index e99265b..7f3d627 100644 --- a/src/views/Conversations/Components/MessagesWrapper.jsx +++ b/src/views/Conversations/Components/MessagesWrapper.jsx @@ -3,20 +3,36 @@ import useConversationStore from '@/stores/ConversationStore'; import { useShallow } from 'zustand/react/shallow'; import { Image, } from 'antd'; import MessagesList from './MessagesList'; -import { fetchCleanUnreadMsgCount } from '@/actions/ConversationActions'; +import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions'; const MessagesWrapper = () => { - const currentConversation = useConversationStore(useShallow((state) => state.currentConversation)); + const [currentConversation, updateCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.updateCurrentConversation])); const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: []))); + const [longList, setLongList] = useState([]); + const [longListLoading, setLongListLoading] = useState(false); + const [shouldScrollBottom, setShouldScrollBottom] = useState(true); useEffect(() => { + setLongList(activeMessages); + setShouldScrollBottom(true); if (currentConversation.opi_sn && currentConversation.whatsapp_phone_number && activeMessages.length > 0) { fetchCleanUnreadMsgCount({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number }); } return () => {}; - }, [activeMessages]); + }, [activeMessages, currentConversation.sn]); + const getMoreMessages = async () => { + setShouldScrollBottom(false); + setLongListLoading(true); + const data = await fetchMessages({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number, lasttime: currentConversation?.lasttime || '2024-01-01T00:00:00' }); + setLongListLoading(false); + setLongList(prevValue => data.concat(prevValue)); + const thisLastTime = data.length > 0 ? data[data.length - 1].orgmsgtime : ''; + const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE); + updateCurrentConversation({ lasttime: thisLastTime, loadNextPage }); + return data.length; + }; const reference = useRef(null); @@ -43,7 +59,7 @@ const MessagesWrapper = () => { }; return ( <> - + );