|
|
|
|
@ -4,75 +4,22 @@ import { Button, Dropdown } from 'antd';
|
|
|
|
|
import { MoreOutlined } from '@ant-design/icons';
|
|
|
|
|
import { useAuthContext } from '@/stores/AuthContext';
|
|
|
|
|
import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages } from '@/actions/ConversationActions';
|
|
|
|
|
import { ChatList, } from 'react-chat-elements';
|
|
|
|
|
import { ChatList, ChatItem } from 'react-chat-elements';
|
|
|
|
|
import { isEmpty } from '@/utils/utils';
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
|
|
|
|
|
const CDropdown = (props) => {
|
|
|
|
|
const { delConversationitem } = useConversationStore();
|
|
|
|
|
|
|
|
|
|
const handleConversationItemClose = async () => {
|
|
|
|
|
await fetchConversationItemClose({ conversationid: props.sn, opisn: props.opi_sn });
|
|
|
|
|
delConversationitem(props);
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<Dropdown
|
|
|
|
|
key={'more-action'}
|
|
|
|
|
trigger={'click'}
|
|
|
|
|
menu={{
|
|
|
|
|
items: [{ key: 'close', danger: true, label: '关闭会话' }],
|
|
|
|
|
onClick: (e) => {
|
|
|
|
|
e.domEvent.stopPropagation();
|
|
|
|
|
switch (e.key) {
|
|
|
|
|
case 'close':
|
|
|
|
|
return handleConversationItemClose();
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}}>
|
|
|
|
|
<Button key={'More'} type='text' title='More' className=' rounded-none text-gray-400' icon={<MoreOutlined />} size={'middle'} onClick={(e) => e.stopPropagation()} />
|
|
|
|
|
</Dropdown>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* []
|
|
|
|
|
*/
|
|
|
|
|
const Conversations = () => {
|
|
|
|
|
const { state: orderRow } = useLocation()
|
|
|
|
|
const { state: orderRow } = useLocation();
|
|
|
|
|
const { coli_guest_WhatsApp } = orderRow || {};
|
|
|
|
|
const { order_sn } = useParams();
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
const { loginUser } = useAuthContext();
|
|
|
|
|
const { userId } = loginUser;
|
|
|
|
|
const { initialState, activeConversations, currentConversation, conversationsList, addToConversationList, setCurrentConversation, receivedMessageList, setMsgLoading } = useConversationStore();
|
|
|
|
|
const [chatlist, setChatlist] = useState([]);
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setChatlist(
|
|
|
|
|
conversationsList.map((item) => ({
|
|
|
|
|
...item,
|
|
|
|
|
avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`,
|
|
|
|
|
id: item.sn,
|
|
|
|
|
alt: item.whatsapp_name,
|
|
|
|
|
title: item.whatsapp_name.trim() || item.whatsapp_phone_number,
|
|
|
|
|
// subtitle: item.whatsapp_phone_number,
|
|
|
|
|
// subtitle: item.lastMessage,
|
|
|
|
|
date: item.last_received_time, // last_send_time
|
|
|
|
|
unread: item.unread_msg_count,
|
|
|
|
|
// showMute: true,
|
|
|
|
|
// muted: false,
|
|
|
|
|
// showVideoCall: true,
|
|
|
|
|
// statusColor: '#ccd5ae',
|
|
|
|
|
// statusColorType: 'badge',
|
|
|
|
|
// statusText: 'online',
|
|
|
|
|
className: String(item.sn) === String(currentConversation.sn) ? '__active text-primary underline bg-whatsapp-me ' : '',
|
|
|
|
|
customStatusComponents: [() => CDropdown(item)],
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return () => {};
|
|
|
|
|
}, [conversationsList, currentConversation]);
|
|
|
|
|
const { initialState, activeConversations, currentConversation, conversationsList, addToConversationList, delConversationitem, setCurrentConversation, receivedMessageList, setMsgLoading } =
|
|
|
|
|
useConversationStore();
|
|
|
|
|
|
|
|
|
|
const [switchToC, setSwitchToC] = useState({});
|
|
|
|
|
const [shouldFetchCList, setShouldFetchCList] = useState(true);
|
|
|
|
|
@ -118,7 +65,7 @@ const Conversations = () => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onSwitchConversation = (item) => {
|
|
|
|
|
if ( ! isEmpty(item.coli_sn)) {
|
|
|
|
|
if (!isEmpty(item.coli_sn)) {
|
|
|
|
|
setSwitchToC(item);
|
|
|
|
|
setShouldFetchCList(false);
|
|
|
|
|
navigate(`/order/chat/${item.coli_sn}`, { replace: true });
|
|
|
|
|
@ -128,13 +75,45 @@ const Conversations = () => {
|
|
|
|
|
switchConversation(item);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleConversationItemClose = async (item) => {
|
|
|
|
|
await fetchConversationItemClose({ conversationid: item.sn, opisn: item.opi_sn });
|
|
|
|
|
delConversationitem(item);
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<ChatList
|
|
|
|
|
className=' overflow-x-hidden'
|
|
|
|
|
dataSource={chatlist}
|
|
|
|
|
onClick={(item) => onSwitchConversation(item)}
|
|
|
|
|
/>
|
|
|
|
|
<div className=' overflow-x-hidden'>
|
|
|
|
|
{conversationsList.map((item) => (
|
|
|
|
|
<Dropdown
|
|
|
|
|
key={item.sn}
|
|
|
|
|
menu={{
|
|
|
|
|
items: [{ label: '关闭会话', key: 'close', danger: true, }],
|
|
|
|
|
onClick: ({ key, domEvent }) => {
|
|
|
|
|
domEvent.stopPropagation();
|
|
|
|
|
switch (key) {
|
|
|
|
|
case 'close':
|
|
|
|
|
return handleConversationItemClose(item);
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
trigger={['contextMenu']}>
|
|
|
|
|
<ChatItem
|
|
|
|
|
{...item}
|
|
|
|
|
key={item.sn}
|
|
|
|
|
id={item.sn}
|
|
|
|
|
avatar={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`}
|
|
|
|
|
alt={`${item.whatsapp_name.trim()}`}
|
|
|
|
|
title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
|
|
|
|
|
date={item.last_received_time}
|
|
|
|
|
unread={item.unread_msg_count}
|
|
|
|
|
className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary underline bg-whatsapp-me border-y-0 border-e-0 border-s-2 border-solid border-whatsapp-me ' : ''}
|
|
|
|
|
onClick={() => onSwitchConversation(item)}
|
|
|
|
|
/>
|
|
|
|
|
</Dropdown>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Lei OT
1 year ago