perf: 历史会话搜索: 分页

src/actions/ConversationActions.js

@@ -86,6 +86,7 @@ export const fetchCleanUnreadMsgCount = async (params) => {
  * ------------------------------------------------------------------------------------------------
  * 历史记录
  */
+export const CONVERSATION_PAGE_SIZE = 20;
 /**
  * @param {object} params { search, from_date, end_date, whatsapp_id, opisn, coli_id, msg_type }
  * @todo msg_type
@@ -102,7 +103,7 @@ export const fetchConversationsSearch = async (params) => {
           whatsapp_name: `${ele.whatsapp_name || ''}`.trim(),
           opi_sn: ele.OPI_SN || ele.opi_sn || 0,
           OPI_Name: `${ele.OPI_Name || ele.opi_name || ''}`.trim(),
-          dateText: dayjs((ele.last_received_time || ele.last_send_time)).format('MM-DD HH:mm'),
+          dateText: dayjs((ele.lasttime || ele.lasttime)).format('MM-DD HH:mm'),
           matchMsgList: parseRenderMessageList((ele.msglist_AsJOSN || [])), // .reverse()),
         }));
   return list;

src/views/ChatHistory.jsx

@@ -7,7 +7,7 @@ import MessagesMatchList from './Conversations/History/MessagesMatchList';
 import MessagesList from './Conversations/History/MessagesList';
 import ImageAlbumPreview from './Conversations/History/ImageAlumPreview';
 import { flush, pick } from '@/utils/commons';
-import { fetchConversationsSearch } from '@/actions/ConversationActions';
+import { fetchConversationsSearch, CONVERSATION_PAGE_SIZE } from '@/actions/ConversationActions';
 
 const { Sider, Content } = Layout;
 
@@ -18,8 +18,12 @@ const Index = (props) => {
   const [conversationsListLoading, setConversationsListLoading] = useState(false);
   const [conversationsList, setConversationsList] = useState([]);
 
+  const [pageParam, setPageParam] = useState({ lasttime: '', loadNextPage: true });
+
   const handleSubmit = useCallback((values) => {
     setFormValues({ ...values });
+    setPageParam({ lasttime: '', loadNextPage: true });
+    setConversationsList([]);
   }, []);
 
   useEffect(() => {
@@ -29,10 +33,14 @@ const Index = (props) => {
 
   const getConversationsList = async () => {
     setConversationsListLoading(true);
-    const params = flush(pick(formValues, ['opisn', 'whatsapp_id', 'search', 'from_date', 'end_date', 'coli_id']));
-    const data = await fetchConversationsSearch(params);
+    const params = flush(pick(formValues, ['opisn', 'whatsapp_id', 'search', 'from_date', 'end_date', 'coli_id', 'lasttime']));
+    const data = await fetchConversationsSearch({ ...params, ...pageParam, pagesize: CONVERSATION_PAGE_SIZE });
     setConversationsListLoading(false);
-    setConversationsList(data);
+    setConversationsList(conversationsList.concat(data));
+    setPageParam({
+      lasttime: data.length > 0 ? data[data.length - 1].lasttime : '',
+      loadNextPage: !(data.length === 0 || data.length < CONVERSATION_PAGE_SIZE),
+    });
     if (data.length === 1) {
       setSelectedConversation(data[0]);
     }
@@ -41,11 +49,11 @@ const Index = (props) => {
     <>
       <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
       <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={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>
-          <ConversationsList {...{ conversationsListLoading, conversationsList, selectedConversation, handleChatItemClick: setSelectedConversation }} />
+      <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 300px)', height: 'calc(100% - 300px)' }}>
+        <Sider width={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)' }}>
+          <ConversationsList {...{ conversationsListLoading, conversationsList, selectedConversation, handleChatItemClick: setSelectedConversation, onLoadMore: getConversationsList, loadMoreVisible: pageParam.loadNextPage }} />
         </Sider>
-        <Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
+        <Content style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)', minWidth: '360px' }}>
           <Flex className='h-full relative'>
             <MessagesMatchList />
             <MessagesList />

src/views/Conversations/History/ConversationsList.jsx

@@ -1,12 +1,22 @@
-import { Spin } from 'antd';
+import { List, Button } from 'antd';
 import { ChatItem } from 'react-chat-elements';
 
-const ConversationsList = ({ conversationsListLoading, handleChatItemClick, selectedConversation, conversationsList, ...props }) => {
-
+const ConversationsList = ({ conversationsListLoading, handleChatItemClick, selectedConversation, conversationsList, onLoadMore, loadMoreVisible, ...props }) => {
   return (
     <>
-      <Spin spinning={conversationsListLoading}>
-        {conversationsList.map((item) => (
+      <List
+        loading={conversationsListLoading}
+        loadMore={
+          !conversationsListLoading && loadMoreVisible ? (
+            <div className='text-center pt-3 mb-3 h-8 leading-8 '>
+              <Button onClick={onLoadMore}>load more</Button>
+            </div>
+          ) : null
+        }
+        className='relative'
+        itemLayout='vertical'
+        dataSource={conversationsList}
+        renderItem={(item, index) => (
           <ChatItem
             {...item}
             key={item.conversationid}
@@ -15,14 +25,13 @@ const ConversationsList = ({ conversationsListLoading, handleChatItemClick, sele
             alt={`${item.whatsapp_name}`}
             title={item.whatsapp_name || item.whatsapp_phone_number}
             subtitle={`${item.OPI_Name || ''} ${item.coli_id || ''}`}
-            date={item.last_received_time || item.last_send_time}
-            // dateString={item.last_received_time}
+            date={item.lasttime || item.lasttime}
             dateString={item.dateText}
             className={String(item.conversationid) === String(selectedConversation.conversationid) ? '__active text-primary bg-neutral-100' : ''}
             onClick={() => handleChatItemClick(item)}
           />
-        ))}
-      </Spin>
+        )}
+      />
     </>
   );
 };