历史记录 加载更多

src/actions/ConversationActions.js

@@ -22,6 +22,7 @@ export const fetchConversationsList = async (params) => {
   return list;
 };
 
+export const MESSAGE_PAGE_SIZE = 100;
 /**
  *
  * @param {object} params { opisn, whatsappid, lasttime, pagesize }
@@ -32,7 +33,7 @@ export const fetchMessages = async (params) => {
     whatsappid: '',
     // lasttime: '',
     lasttime: '2024-01-01T00:25:30', // test:
-    pagesize: 400,
+    pagesize: MESSAGE_PAGE_SIZE,
   };
   const { errcode, result } = await fetchJSON(`${API_HOST}/getcusmessages`, {...defaultParams, ...params});
   return errcode !== 0 ? [] : parseRenderMessageList(result || []);

src/lib/msgUtils.js

@@ -467,6 +467,7 @@ export const parseRenderMessageList = (messages, conversationid = null) => {
     const msgType = Object.keys(whatsappMsgTypeMapped).includes(msgContent.type) ? msgContent.type : 'unsupported';
     // const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
     return {
+      ...msg,
       msgOrigin: msgContent,
       ...(whatsappMsgTypeMapped?.[msgType]?.data(msgContent) || {}),
       type: msgContent.type,

src/views/ChatHistory.jsx

@@ -3,7 +3,7 @@ import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'reac
 import { Row, Col, Divider, Table, Card, Button, Input, Flex, Layout, Space, Empty, Radio, Select, DatePicker, Form, List, Avatar, Spin, Image } from 'antd';
 import { StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined } from '@ant-design/icons';
 import { ChatList, ChatItem, MessageBox } from 'react-chat-elements';
-import { fetchConversationsList, fetchMessages } from '@/actions/ConversationActions';
+import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
 import { isEmpty } from '@/utils/utils';
 import useFormStore from '@/stores/FormStore';
 import { useShallow } from 'zustand/react/shallow';
@@ -126,19 +126,22 @@ function ChatHistory() {
   };
   const getMessages = async (chatItem) => {
     setLoading(true);
-    setChatItemMessages([]);
+    const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '2024-01-01T00:00:00' });
-    const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number });
     setLoading(false);
-    setChatItemMessages(data);
+    setChatItemMessages(prevValue => prevValue.concat(data));
+    const thisLastTime = data.length > 0 ? data[data.length - 1].orgmsgtime : '';
+    const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
+    setSelectedConversation({ ...chatItem, lasttime: thisLastTime, loadNextPage });
   };
 
   useEffect(() => {
     if (selectedConversation.whatsapp_phone_number) {
-      getMessages(selectedConversation);
+      setChatItemMessages([]);
+      getMessages({...selectedConversation, loadNextPage: true, lasttime: null });
     }
 
     return () => {};
-  }, [selectedConversation]);
+  }, [selectedConversation.sn]);
 
   useEffect(() => {
     if (formValues.travel) {
@@ -191,6 +194,17 @@ function ChatHistory() {
         return false;
     }
   };
+
+  const onLoadMore = () => {
+    getMessages(selectedConversation);
+    window.dispatchEvent(new Event('resize'));
+  };
+  const loadMore = !loading && selectedConversation.loadNextPage ? (
+      <div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'>
+        <Button onClick={onLoadMore}>loading more</Button>
+      </div>
+    ) : null;
+
   const messagesEndRef = useRef(null);
   const messageRefs = useRef([]);
   const scrollToMessage = (id, index) => {
@@ -208,7 +222,7 @@ function ChatHistory() {
   return (
     <>
       <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
-      <Divider plain orientation='left'></Divider>
+      <Divider plain orientation='left' className='mb-0'></Divider>
       <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
         <Sider width={240} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>
           <Spin spinning={loading}>
@@ -232,9 +246,7 @@ function ChatHistory() {
           <div className='h-full relative' ref={messagesEndRef}>
             <List
               loading={loading}
-              loadMore={() => {
+              loadMore={loadMore}
-                console.log('load more');
-              }}
               className='h-full overflow-y-auto px-2 relative'
               itemLayout='vertical'
               dataSource={chatItemMessages}