历史记录: 使用在线的API, 往上一页加载

src/views/ChatHistory.jsx

@@ -86,14 +86,25 @@ function ChatHistory() {
       await getMessages(data[0]);
     }
   };
+  const getMessagesPre = async (chatItem) => {
+    setLoading(true);
+    const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '' });
+    setLoading(false);
+    setChatItemMessages(prevValue => data.concat(prevValue));
+    const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
+    const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
+    setSelectedConversation({ ...chatItem, pretime: thisPreTime, loadPrePage });
+  };
   const getMessages = async (chatItem) => {
     setLoading(true);
     const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '' });
     setLoading(false);
     setChatItemMessages(prevValue => prevValue.concat(data));
+    const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
+    const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
     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 });
+    const loadNextPage = false; // debug: !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
+    setSelectedConversation({ ...chatItem, lasttime: thisLastTime, loadNextPage, pretime: thisPreTime, loadPrePage});
   };
 
   useEffect(() => {
@@ -166,6 +177,15 @@ function ChatHistory() {
         <Button onClick={onLoadMore}>loading more</Button>
       </div>
     ) : null;
+  const onLoadMorePre = () => {
+    getMessagesPre(selectedConversation);
+    // window.dispatchEvent(new Event('resize'));
+  };
+  const loadMorePre = !loading && selectedConversation.loadPrePage ? (
+      <div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'>
+        <Button onClick={onLoadMorePre}>loading more</Button>
+      </div>
+    ) : null;
 
   const messagesEndRef = useRef(null);
   const messageRefs = useRef([]);
@@ -208,6 +228,7 @@ function ChatHistory() {
           <div className='h-full relative' ref={messagesEndRef}>
             <List
               loading={loading}
+              header={loadMorePre}
               loadMore={loadMore}
               className='h-full overflow-y-auto px-2 relative'
               itemLayout='vertical'