From fb9825879366b2f828aaa194a192130f119f62f7 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Mon, 6 May 2024 11:32:58 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8E=86=E5=8F=B2=E4=BC=9A=E8=AF=9D?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2:=20=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/actions/ConversationActions.js            |  3 ++-
 src/views/ChatHistory.jsx                     | 24 +++++++++++------
 .../History/ConversationsList.jsx             | 27 ++++++++++++-------
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js
index 832645e..914af6e 100644
--- a/src/actions/ConversationActions.js
+++ b/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;
diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx
index 73488a8..10c072d 100644
--- a/src/views/ChatHistory.jsx
+++ b/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 />
diff --git a/src/views/Conversations/History/ConversationsList.jsx b/src/views/Conversations/History/ConversationsList.jsx
index c012ac9..21bb111 100644
--- a/src/views/Conversations/History/ConversationsList.jsx
+++ b/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>
+        )}
+      />
     </>
   );
 };