You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
import { useRef, useEffect, useState } from 'react';
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import { List, Avatar, Flex } from 'antd';
|
|
import { useConversationContext } from '@/stores/Conversations/ConversationContext';
|
|
import { fetchCustomerProfile, receivedCustomerProfile, setCurrentConversation, addConversationList, setActiveConversations } from '@/stores/Conversations/ConversationActions'
|
|
import { ChatList } from 'react-chat-elements';
|
|
import { isEmpty, pick } from '@/utils/utils';
|
|
import { v4 as uuid } from 'uuid';
|
|
/**
|
|
* []
|
|
*/
|
|
const Conversations = (() => {
|
|
const { order_sn } = useParams();
|
|
const navigate = useNavigate();
|
|
const { dispatch, conversationsList, } = useConversationContext();
|
|
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 // todo: GMT+8
|
|
unread: item.unread_msg_count,
|
|
showMute: true,
|
|
muted: false,
|
|
// showVideoCall: true,
|
|
// statusColor: '#ccd5ae',
|
|
// statusColorType: 'badge',
|
|
// statusText: 'online'
|
|
}))
|
|
);
|
|
|
|
return () => {};
|
|
}, [conversationsList]);
|
|
|
|
useEffect(() => {
|
|
if (order_sn) {
|
|
getCustomerProfile(order_sn);
|
|
}
|
|
|
|
return () => {};
|
|
}, [order_sn]);
|
|
|
|
const getCustomerProfile = async (colisn) => {
|
|
const data = await fetchCustomerProfile(colisn);
|
|
dispatch(receivedCustomerProfile(data));
|
|
if (!isEmpty(data.conversation)) {
|
|
dispatch(addConversationList(data.conversations));
|
|
dispatch(setCurrentConversation(data.conversation[0]));
|
|
const thisCMapped = data.conversation.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
|
|
dispatch(setActiveConversations(thisCMapped));
|
|
} else {
|
|
// reset chat window
|
|
if (isEmpty(data.contact?.[0]?.whatsapp_phone_number)) {
|
|
dispatch(setCurrentConversation({ sn: '', customer_name: '', coli_sn: '' }));
|
|
return false;
|
|
}
|
|
// 加入新会话
|
|
const newChat = {
|
|
'sn': uuid(),
|
|
// 'opi_sn': 354,
|
|
'coli_sn': colisn,
|
|
'whatsapp_phone_number': data.contact[0].whatsapp_phone_number,
|
|
"last_received_time": '',
|
|
"last_send_time": '',
|
|
'unread_msg_count': 0,
|
|
'whatsapp_name': data.contact[0].name,
|
|
'customer_name': data.contact[0].name,
|
|
};
|
|
dispatch(addConversationList([newChat]));
|
|
dispatch(setActiveConversations({ [`${newChat.sn}`]: []}));
|
|
const newCurrent = pick(newChat, ['sn', 'coli_sn', 'whatsapp_phone_number', 'whatsapp_name', 'customer_name']);
|
|
dispatch(setCurrentConversation(newCurrent));
|
|
}
|
|
}
|
|
const switchConversation = (item) => {
|
|
dispatch(setCurrentConversation(item));
|
|
if (isEmpty(item.coli_sn) || item.coli_sn === '0') {
|
|
dispatch(receivedCustomerProfile({}));
|
|
}
|
|
};
|
|
|
|
const onSwitchConversation = (item) => {
|
|
switchConversation(item);
|
|
if (item.coli_sn) {
|
|
navigate(`/order/chat/${item.coli_sn}`, { replace: true });
|
|
}
|
|
}
|
|
|
|
const onCloseConversationItem = (item) => { }
|
|
|
|
return (
|
|
<>
|
|
<ChatList className='' dataSource={chatlist} onClick={(item) => onSwitchConversation(item)}
|
|
// onContextMenu={(item, i, e) => {
|
|
// console.log(item, i, e);
|
|
// return ( <p>ppp</p> )
|
|
// }}
|
|
onClickMute={onCloseConversationItem}
|
|
/>
|
|
</>
|
|
);
|
|
});
|
|
export default Conversations;
|