获取消息记录

src/actions/ConversationActions.js

@@ -1,6 +1,7 @@
 
 import { groupBy } from '@/utils/utils';
 import { fetchJSON, postJSON } from '@/utils/request'
+import { parseRenderMessageList } from '@/lib/msgUtils';
 
 const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback';
 
@@ -78,6 +79,10 @@ export const updateMessageItem = (message) => ({
   type: NAME_SPACE + 'UPDATE_SENT_MESSAGE_ITEM',
   payload: message,
 });
+export const receivedMessageList = (targetId, data) => ({
+  type: NAME_SPACE + 'RECEIVED_MESSAGE_LIST',
+  payload: { targetId, data },
+})
 
 export const fetchTemplates = async () => {
   const data = await fetchJSON(`${API_HOST}/listtemplates`);
@@ -93,6 +98,11 @@ export const fetchConversationsList = async (opisn) => {
   return list;
 };
 
+export const fetchMessages = async (params) => {
+  const { result } = await fetchJSON(`${API_HOST}/getcusmessages`, params);
+  return parseRenderMessageList(result);
+}
+
 export const fetchCustomerProfile = async (colisn) => {
   const { result } = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn });
   const data = result?.[0] || {};

src/lib/msgUtils.js

@@ -116,8 +116,8 @@ export const whatsappMsgTypeMapped = {
     data: (msg) => ({ id: msg.wamid, text: msg.errorCode ? msg.errorMessage : msg.text.body }),
   },
   text: {
-    type: (msg) => ({ type: msg.errorCode ? 'system' : 'text' }),
-    data: (msg) => ({ id: msg.wamid, text: msg.errorCode ? msg.errorMessage : msg.text.body }),
+    type: 'text',
+    data: (msg) => ({ id: msg.wamid, text: msg.text.body }),
   },
   image: {
     type: 'photo',
@@ -189,15 +189,23 @@ export const parseRenderMessageItem = (msg) => {
     // replyButton: true,
   };
 };
-export const parseRenderMessageList = (messages) => {
+/**
+ * 从数据库读取的记录
+ */
+export const parseRenderMessageList = (messages, conversationid = null) => {
   return messages.map((msg) => {
+    const msgContent = msg.msgtext_AsJOSN;
+    const msgType = msgContent.type;
+    // const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
     return {
-      ...(whatsappMsgTypeMapped?.[msg.type]?.data(msg) || {}),
-      ...(whatsappMsgTypeMapped?.[msg.type]?.type(msg) || { type: 'text' }), // type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text',
-      id: msg.id,
-      sender: msg.from,
+      ...(whatsappMsgTypeMapped?.[msgType]?.data(msgContent) || {}),
+      type: msgContent.type,
+      sender: msg.msg_direction === 'outbound' ? 'me' : msgContent.from,
       // title: msg.customerProfile.name,
-      date: msg.sendTime,
+      date: msgContent?.sendTime || msg.msgtime || '',
+      // conversationid: conversationid,
+      status: msg.msg_direction === 'outbound' ? msgStatusRenderMapped[(msgContent?.status || 'failed')] : '',
+      dateString: msgStatusRenderMapped[(msgContent?.status || 'failed')] === 'failed' ? '发送失败 ❌' : '',
     };
   });
 };
@@ -206,7 +214,8 @@ export const parseRenderMessageList = (messages) => {
  * WhatsApp Templates params
  */
 export const whatsappTemplatesParamMapped = {
-  'asia_highlights_has_receive_your_inquiry': [['customer_name']],
+  // 'asia_highlights_has_receive_your_inquiry': [['customer_name']],
   'hello_from_asia_highlights': [['agent_name']], // todo:
+  'hello_from_china_highlights': [['agent_name']], // todo:
   'use_new_whatsapp': [['agent_name']], // todo:
 };

src/reducers/ConversationReducer.js

@@ -76,6 +76,13 @@ const ConversationReducer = (state = initialState, action) => {
         conversationsList: newConversationList,
       };
     }
+    case NAME_SPACE + 'RECEIVED_MESSAGE_LIST': {
+      const { targetId, data } = action.payload;
+      return {
+        ...state,
+        activeConversations: { ...state.activeConversations, [String(targetId)]: data },
+      };
+    }
     case NAME_SPACE + 'SENT_NEW_MESSAGE':
     case NAME_SPACE + 'RECEIVED_NEW_MESSAGE': {
       const { activeConversations, conversationsList, currentConversation } = state;

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,26 +1,33 @@
 import { useRef, useEffect, useState } from 'react';
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from 'react-router-dom';
 import { List, Avatar, Flex } from 'antd';
 import { useAuthContext } from '@/stores/AuthContext';
 import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
-import { fetchCustomerProfile, receivedCustomerProfile, setCurrentConversation, addConversationList, postConversationItemClose } from '@/actions/ConversationActions'
+import {
+  fetchCustomerProfile,
+  receivedCustomerProfile,
+  setCurrentConversation,
+  addConversationList,
+  postConversationItemClose,
+  fetchMessages, receivedMessageList,
+} from '@/actions/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 Conversations = () => {
+  const { order_sn } = useParams();
   const navigate = useNavigate();
   const { loginUser } = useAuthContext();
   const { userId } = loginUser;
-  const {conversationsList} = useConversationState();
+  const { conversationsList, activeConversations, currentConversation } = useConversationState();
   const dispatch = useConversationDispatch();
   const [chatlist, setChatlist] = useState([]);
   useEffect(() => {
     setChatlist(
-      (conversationsList).map((item) => ({
+      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,
@@ -71,8 +78,8 @@ const Conversations = (() => {
         // 'opi_sn': 354,
         'coli_sn': colisn,
         'whatsapp_phone_number': data.contact[0].whatsapp_phone_number,
-        "last_received_time": '',
-        "last_send_time": '',
+        'last_received_time': '',
+        'last_send_time': '',
         'unread_msg_count': 0,
         'whatsapp_name': data.contact[0].name,
         'customer_name': data.contact[0].name,
@@ -81,12 +88,20 @@ const Conversations = (() => {
       const newCurrent = pick(newChat, ['sn', 'coli_sn', 'whatsapp_phone_number', 'whatsapp_name', 'customer_name']);
       dispatch(setCurrentConversation(newCurrent));
     }
-  }
-  const switchConversation = (item) => {
+  };
+  const switchConversation = async (item) => {
+    if (currentConversation.sn === item.sn) {
+      return false;
+    }
     dispatch(setCurrentConversation(item));
     if (isEmpty(item.coli_sn) || item.coli_sn === '0') {
       dispatch(receivedCustomerProfile({}));
     }
+    const messagesList = activeConversations[`${item.sn}`] || [];
+    if (isEmpty(messagesList)) {
+      const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number });
+      dispatch(receivedMessageList(item.sn, data));
+    }
   };
 
   const onSwitchConversation = (item) => {
@@ -94,16 +109,19 @@ const Conversations = (() => {
       navigate(`/order/chat/${item.coli_sn}`, { replace: true });
     }
     switchConversation(item);
-  }
+  };
 
   const handleConversationItemClose = async (item) => {
     console.log('invoke close', item);
     const data = await postConversationItemClose({ conversationid: item.sn, opisn: userId });
-  }
+  };
 
   return (
     <>
-      <ChatList className='' dataSource={chatlist} onClick={(item) => onSwitchConversation(item)}
+      <ChatList
+        className=''
+        dataSource={chatlist}
+        onClick={(item) => onSwitchConversation(item)}
         // onContextMenu={(item, i, e) => {
         //   console.log(item, i, e);
         //   return ( <p>ppp</p> )
@@ -112,5 +130,5 @@ const Conversations = (() => {
       />
     </>
   );
-});
+};
 export default Conversations;