|
|
|
|
@ -1,13 +1,17 @@
|
|
|
|
|
import { useRef, useState, useEffect } from 'react';
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
|
import { Image, } from 'antd';
|
|
|
|
|
import { Image, Modal, Button } from 'antd';
|
|
|
|
|
import MessagesList from './MessagesList';
|
|
|
|
|
import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
|
|
|
|
|
import { fetchOrderConversationsList, } from '@/actions/ConversationActions';
|
|
|
|
|
import { isEmpty } from '@/utils/utils';
|
|
|
|
|
|
|
|
|
|
const MessagesWrapper = () => {
|
|
|
|
|
const [currentConversation, updateCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.updateCurrentConversation]));
|
|
|
|
|
const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]));
|
|
|
|
|
const conversationsList = useConversationStore(useShallow((state) => state.conversationsList));
|
|
|
|
|
const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
|
|
|
|
|
const addToConversationList = useConversationStore((state) => state.addToConversationList);
|
|
|
|
|
|
|
|
|
|
const [longList, setLongList] = useState([]);
|
|
|
|
|
const [longListLoading, setLongListLoading] = useState(false);
|
|
|
|
|
@ -18,6 +22,9 @@ const MessagesWrapper = () => {
|
|
|
|
|
if (currentConversation.opi_sn && currentConversation.whatsapp_phone_number && activeMessages.length > 0) {
|
|
|
|
|
fetchCleanUnreadMsgCount({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number });
|
|
|
|
|
}
|
|
|
|
|
const thisLastTime = activeMessages.length > 0 ? activeMessages[0].orgmsgtime : '';
|
|
|
|
|
const loadNextPage = !(activeMessages.length === 0 || activeMessages.length < MESSAGE_PAGE_SIZE);
|
|
|
|
|
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
|
|
|
|
|
|
|
|
|
|
return () => {};
|
|
|
|
|
}, [activeMessages, currentConversation.sn]);
|
|
|
|
|
@ -57,10 +64,55 @@ const MessagesWrapper = () => {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const openContactConversation = async (whatsappID) => {
|
|
|
|
|
const {coli_sn, opi_sn} = currentConversation;
|
|
|
|
|
let findCurrentOrderChats = conversationsList.filter((item) => `${item.coli_sn}` === `${coli_sn}` && `${item.opi_sn}` === `${opi_sn}` && `${item.whatsapp_phone_number}` === `${whatsappID}`);
|
|
|
|
|
let findCurrentIndex = isEmpty(findCurrentOrderChats) ? -1 : 0; // findCurrentOrderChats.length-1;
|
|
|
|
|
let findCurrent = findCurrentOrderChats[findCurrentIndex];
|
|
|
|
|
if (findCurrentIndex !== -1) {
|
|
|
|
|
addToConversationList(findCurrentOrderChats);
|
|
|
|
|
} else if (!isEmpty(whatsappID)) {
|
|
|
|
|
const data = await fetchOrderConversationsList({ opisn: opi_sn, colisn: coli_sn, whatsappid: whatsappID });
|
|
|
|
|
if (!isEmpty(data)) {
|
|
|
|
|
addToConversationList(data);
|
|
|
|
|
findCurrentIndex = data.findIndex((item) => `${item.coli_sn}` === `${coli_sn}` && `${item.opi_sn}` === `${opi_sn}` && `${item.whatsapp_phone_number}` === `${whatsappID}`);
|
|
|
|
|
findCurrentIndex = findCurrentIndex >= 0 ? findCurrentIndex : 0;
|
|
|
|
|
findCurrent = data[findCurrentIndex];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (findCurrentIndex >= 0) {
|
|
|
|
|
setCurrentConversation(findCurrent);
|
|
|
|
|
}
|
|
|
|
|
setContactsModalVisible(false);
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
const [contactsModalVisible, setContactsModalVisible] = useState(false);
|
|
|
|
|
const [contactListData, setContactListData] = useState([]);
|
|
|
|
|
const handleContactItemClick = (contact) => {
|
|
|
|
|
openContactConversation(contact.wa_id);
|
|
|
|
|
}
|
|
|
|
|
const handleContactListClick = (data) => {
|
|
|
|
|
setContactListData(data);
|
|
|
|
|
setContactsModalVisible(true);
|
|
|
|
|
}
|
|
|
|
|
const handleContactClick = (data) => {
|
|
|
|
|
return data.length > 1 ? handleContactListClick(data) : handleContactItemClick(data[0]);
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<MessagesList messages={longList} dataSourceLen={longList.length} {...{ reference, handlePreview, longListLoading, setLongListLoading, getMoreMessages, shouldScrollBottom, loadNextPage: currentConversation?.loadNextPage ?? true }} />
|
|
|
|
|
<MessagesList messages={longList} dataSourceLen={longList.length} {...{
|
|
|
|
|
reference, shouldScrollBottom,
|
|
|
|
|
handlePreview, handleContactClick,
|
|
|
|
|
longListLoading, setLongListLoading, getMoreMessages, loadNextPage: currentConversation?.loadNextPage ?? true
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<Image width={0} height={0} src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
|
|
|
|
|
<Modal title="联系人" closable open={contactsModalVisible} onOk={handleContactItemClick} onCancel={() => setContactsModalVisible(false)} footer={null} >
|
|
|
|
|
{contactListData.map((contact) => (
|
|
|
|
|
<Button onClick={() => handleContactItemClick(contact)} type='link' key={contact.id}>{contact.name}: <span>{contact.wa_id}</span></Button>
|
|
|
|
|
))}
|
|
|
|
|
</Modal>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Lei OT
2 years ago