Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: ChatHistory loading

Browse Source
dev/chat
Lei OT 2 years ago
parent 1040e66b24
commit 9269b362ac
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File

23
src/views/ChatHistory.jsx
Unescape Escape View File

@ -72,14 +72,15 @@ function ChatHistory() {
setFormValues({ ...values }); setFormValues({ ...values });
}, []); }, []);
const [loading, setLoading] = useState(false); const [conversationsListLoading, setConversationsListLoading] = useState(false);
const [messageListLoading, setMessageListLoading] = useState(false);
const [conversationsList, setConversationsList] = useState([]); const [conversationsList, setConversationsList] = useState([]);
const [chatItemMessages, setChatItemMessages] = useState([]); const [chatItemMessages, setChatItemMessages] = useState([]);
const getConversationsList = async () => { const getConversationsList = async () => {
setLoading(true); setConversationsListLoading(true);
setChatItemMessages([]); setChatItemMessages([]);
const data = await fetchConversationsList({ opisn: formValues.opisn, customer_name: formValues.customer_name, }); const data = await fetchConversationsList({ opisn: formValues.opisn, customer_name: formValues.customer_name, });
setLoading(false); setConversationsListLoading(false);
setConversationsList(data); setConversationsList(data);
if (data.length === 1) { if (data.length === 1) {
setSelectedConversation(data[0]); setSelectedConversation(data[0]);
@ -87,18 +88,18 @@ function ChatHistory() {
} }
}; };
const getMessagesPre = async (chatItem) => { const getMessagesPre = async (chatItem) => {
setLoading(true); setMessageListLoading(true);
const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '' }); const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '' });
setLoading(false); setMessageListLoading(false);
setChatItemMessages(prevValue => data.concat(prevValue)); setChatItemMessages(prevValue => data.concat(prevValue));
const thisPreTime = data.length > 0 ? data[0].orgmsgtime : ''; const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE); const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
setSelectedConversation({ ...chatItem, pretime: thisPreTime, loadPrePage }); setSelectedConversation({ ...chatItem, pretime: thisPreTime, loadPrePage });
}; };
const getMessages = async (chatItem) => { const getMessages = async (chatItem) => {
setLoading(true); setMessageListLoading(true);
const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '' }); const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '' });
setLoading(false); setMessageListLoading(false);
setChatItemMessages(prevValue => prevValue.concat(data)); setChatItemMessages(prevValue => prevValue.concat(data));
const thisPreTime = data.length > 0 ? data[0].orgmsgtime : ''; const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE); const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
@ -172,7 +173,7 @@ function ChatHistory() {
getMessages(selectedConversation); getMessages(selectedConversation);
// window.dispatchEvent(new Event('resize')); // window.dispatchEvent(new Event('resize'));
}; };
const loadMore = !loading && selectedConversation.loadNextPage ? ( const loadMore = !messageListLoading && selectedConversation.loadNextPage ? (
<div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'> <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> <Button onClick={onLoadMore}>loading more</Button>
</div> </div>
@ -181,7 +182,7 @@ function ChatHistory() {
getMessagesPre(selectedConversation); getMessagesPre(selectedConversation);
// window.dispatchEvent(new Event('resize')); // window.dispatchEvent(new Event('resize'));
}; };
const loadMorePre = !loading && selectedConversation.loadPrePage ? ( const loadMorePre = !messageListLoading && selectedConversation.loadPrePage ? (
<div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'> <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> <Button onClick={onLoadMorePre}>loading more</Button>
</div> </div>
@ -207,7 +208,7 @@ function ChatHistory() {
<Divider plain orientation='left' className='mb-0'></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)' }}> <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)' }}> <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}> <Spin spinning={conversationsListLoading}>
{conversationsList.map((item) => ( {conversationsList.map((item) => (
<ChatItem <ChatItem
{...item} {...item}
@ -227,7 +228,7 @@ function ChatHistory() {
<Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}> <Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
<div className='h-full relative' ref={messagesEndRef}> <div className='h-full relative' ref={messagesEndRef}>
<List <List
loading={loading} loading={messageListLoading}
header={loadMorePre} header={loadMorePre}
loadMore={loadMore} loadMore={loadMore}
className='h-full overflow-y-auto px-2 relative' className='h-full overflow-y-auto px-2 relative'

Write Preview
Loading…
Cancel
Save