关闭会话

src/actions/ConversationActions.js

@@ -62,6 +62,12 @@ export const addConversationList = (data) => {
     payload: data,
   };
 };
+export const delConversationitem = (data) => {
+  return {
+    type: NAME_SPACE + 'DEL_CONVERSATIONS_ITEM',
+    payload: data,
+  };
+};
 // export const updateConversationListItemNew = (message) => ({
 //   type: NAME_SPACE + 'UPDATE_CONVERSATION_LIST_ITEM_NEW',
 //   payload: message,
@@ -122,8 +128,8 @@ export const fetchCustomerProfile = async (colisn) => {
   return data;
 };
 
-export const postConversationItemClose = async (body) => {
+export const fetchConversationItemClose = async (body) => {
   const getParams = body ? new URLSearchParams(body).toString() : '';
-  const { result } = await postJSON(`${API_HOST}/closeconversation?${getParams}`);
+  const { result } = await fetchJSON(`${API_HOST}/closeconversation?${getParams}`);
   return result;
 };

src/reducers/ConversationReducer.js

@@ -27,6 +27,19 @@ const ConversationReducer = (state = initialState, action) => {
         activeConversations: { ...activeConversations, ...newConversationsMapped },
       };
     }
+    case NAME_SPACE + 'DEL_CONVERSATIONS_ITEM': {
+      const { conversationsList, activeConversations, currentConversation, customerOrderProfile } = state;
+      const targetId = action.payload.sn;
+      const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
+      conversationsList.splice(targetIndex, 1);
+      return {
+        ...state,
+        conversationsList: [...conversationsList],
+        activeConversations: { ...activeConversations, [`${targetId}`]: [] },
+        currentConversation: {},
+        customerOrderProfile: {},
+      };
+    }
 
     case NAME_SPACE + 'SET_TEMPLATE_LIST':
       return { ...state, templates: action.payload };
@@ -39,10 +52,10 @@ const ConversationReducer = (state = initialState, action) => {
       const { conversationsList } = state;
       const targetId = action.payload.sn;
       const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
-      conversationsList.splice(targetIndex, 1, {
+      targetIndex !== -1 ? conversationsList.splice(targetIndex, 1, {
         ...conversationsList[targetIndex],
         unread_msg_count: 0,
-      });
+      }) : null;
 
       return { ...state, currentConversation: action.payload, conversationsList: [...conversationsList] };
     }

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,19 +1,55 @@
 import { useRef, useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { List, Avatar, Flex } from 'antd';
+import { List, Avatar, Flex, Popconfirm, Button, Dropdown } from 'antd';
+import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentOutlined, UploadOutlined, CloudUploadOutlined, FolderAddOutlined, FilePdfOutlined, CloseCircleOutlined, CloseCircleFilled, MoreOutlined } from '@ant-design/icons';
 import { useAuthContext } from '@/stores/AuthContext';
 import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
 import {
   fetchCustomerProfile,
   receivedCustomerProfile,
   setCurrentConversation,
-  addConversationList,
-  postConversationItemClose,
+  addConversationList, delConversationitem,
+  fetchConversationItemClose,
   fetchMessages, receivedMessageList,
 } from '@/actions/ConversationActions';
-import { ChatList } from 'react-chat-elements';
+import { ChatList, } from 'react-chat-elements';
 import { isEmpty, pick } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
+
+const CDropdown = () => {
+  const { loginUser } = useAuthContext();
+  const { userId } = loginUser;
+  const { currentConversation } = useConversationState();
+  const dispatch = useConversationDispatch();
+  const handleConversationItemClose = async (item) => {
+    await fetchConversationItemClose({ conversationid: item.sn, opisn: userId });
+    dispatch(delConversationitem(item));
+  };
+  return (
+    <Dropdown key={'more-action'}
+      trigger={'click'}
+      menu={{
+        items: [
+          {
+            key: 'close',
+            danger: true,
+            label: '关闭会话',
+          },
+        ],
+        onClick: ({ key }) => {
+          switch (key) {
+            case 'close':
+              return handleConversationItemClose(currentConversation);
+
+            default:
+              return;
+          }
+        },
+      }}>
+      <Button key={'More'} type='text' title='More' className=' rounded-none text-gray-400' icon={<MoreOutlined />} size={'middle'} onClick={e => e.stopPropagation() } />
+    </Dropdown>
+  );
+}
 /**
  * []
  */
@@ -37,13 +73,14 @@ const Conversations = () => {
         // subtitle: item.lastMessage,
         date: item.last_received_time, // last_send_time // todo: GMT+8
         unread: item.unread_msg_count,
-        showMute: true,
-        muted: false,
+        // showMute: true,
+        // muted: false,
         // showVideoCall: true,
         // statusColor: '#ccd5ae',
         // statusColorType: 'badge',
-        // statusText: 'online'
-        className: String(item.sn) === String(currentConversation.sn) ? 'text-primary underline __active' : '',
+        // statusText: 'online',
+        className: String(item.sn) === String(currentConversation.sn) ? '__active text-primary underline  bg-whatsapp-me ' : '',
+        customStatusComponents: [CDropdown],
       }))
     );
 
@@ -91,6 +128,9 @@ const Conversations = () => {
     }
   };
   const switchConversation = async (item) => {
+    if (String(item.sn) === String(currentConversation.sn)) {
+      return false;
+    }
     dispatch(setCurrentConversation(item));
     const messagesList = activeConversations[`${item.sn}`] || [];
     if (isEmpty(messagesList)) {
@@ -105,6 +145,8 @@ const Conversations = () => {
   const onSwitchConversation = (item) => {
     if (item.coli_sn) {
       navigate(`/order/chat/${item.coli_sn}`, { replace: true });
+    } else {
+      navigate(`/order/chat`, { replace: true });
     }
     switchConversation(item);
   };
@@ -124,7 +166,7 @@ const Conversations = () => {
         //   console.log(item, i, e);
         //   return ( <p>ppp</p> )
         // }}
-        onClickMute={handleConversationItemClose}
+        // onClickMute={handleConversationItemClose}
       />
     </>
   );

src/views/Conversations/Components/InputComposer.jsx

@@ -56,7 +56,7 @@ const InputBox = () => {
     <div>
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
-          <div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 py-1'>{referenceMsg.text}</div>
+          <div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>{referenceMsg.text}</div>
           <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => dispatch(setReplyTo({}))} />
         </Flex>
       )}