Global-sales/src/views/Conversations/Components/ConversationsList.jsx

import { useEffect, useState } from 'react';
import { useParams, useNavigate, useLocation } from 'react-router-dom';
import { Button, Dropdown } from 'antd';
import { MoreOutlined } from '@ant-design/icons';
import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages } from '@/actions/ConversationActions';
import { ChatList, ChatItem } from 'react-chat-elements';
import { isEmpty } from '@/utils/utils';
import useConversationStore from '@/stores/ConversationStore';
import useAuthStore from '@/stores/AuthStore'

/**
 * []
 */
const Conversations = () => {
  const { state: orderRow } = useLocation();
  const { coli_guest_WhatsApp } = orderRow || {};
  const { order_sn } = useParams();
  const navigate = useNavigate();
  const userId = useAuthStore(state => state.loginUser.userId);
  const initialState = useConversationStore((state) => state.initialState);
  const activeConversations = useConversationStore((state) => state.activeConversations);
  const currentConversation = useConversationStore((state) => state.currentConversation);
  const conversationsList = useConversationStore((state) => state.conversationsList);
  const addToConversationList = useConversationStore((state) => state.addToConversationList);
  const delConversationitem = useConversationStore((state) => state.delConversationitem);
  const setCurrentConversation = useConversationStore((state) => state.setCurrentConversation);
  const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
  const setMsgLoading = useConversationStore((state) => state.setMsgLoading);

  const [switchToC, setSwitchToC] = useState({});
  const [shouldFetchCList, setShouldFetchCList] = useState(true);
  useEffect(() => {
    if (order_sn && shouldFetchCList && initialState) {
      getOrderConversationList(order_sn);
    }

    return () => {};
  }, [order_sn, shouldFetchCList, initialState]);

  const getOrderConversationList = async (colisn) => {
    const { whatsapp_phone_number } = switchToC;
    const whatsappID = coli_guest_WhatsApp || whatsapp_phone_number || '';
    let findCurrent = -1; // conversationsList.findIndex((item) => item.coli_sn === Number(colisn));
    if (!isEmpty(whatsappID)) {
      const data = await fetchOrderConversationsList({ opisn: userId, colisn: colisn, whatsappid: whatsappID });
      if (!isEmpty(data)) {
        addToConversationList(data);
      }
      findCurrent = conversationsList.findIndex((item) => item.coli_sn === Number(colisn)); // data.findIndex((item) => item.sn === currentConversation.sn);
    }
    if (findCurrent !== -1) {
      switchConversation(conversationsList[findCurrent]);
    } else {
      // reset chat window
      setCurrentConversation({ sn: '', customer_name: '', coli_sn: order_sn });
      return false;
    }
  };
  const getMessages = async (item) => {
    setMsgLoading(true);
    const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number });
    receivedMessageList(item.sn, data);
  };
  const switchConversation = async (item) => {
    const messagesList = activeConversations[`${item.sn}`] || [];
    if (messagesList.length < 20) {
      await getMessages(item);
    }
    if (String(item.sn) === String(currentConversation.sn)) {
      return false;
    }
    setCurrentConversation(item);
  };

  const onSwitchConversation = (item) => {
    if (!isEmpty(item.coli_sn)) {
      setSwitchToC(item);
      setShouldFetchCList(false);
      navigate(`/order/chat/${item.coli_sn}`, { replace: true });
    } else {
      navigate(`/order/chat`, { replace: true });
    }
    switchConversation(item);
  };

  const handleConversationItemClose = async (item) => {
    await fetchConversationItemClose({ conversationid: item.sn, opisn: item.opi_sn });
    delConversationitem(item);
  };
  return (
    <>
      <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}`}
              letterItem={{id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: item.whatsapp_name.trim() || item.whatsapp_phone_number}}
              alt={`${item.whatsapp_name.trim()}`}
              title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
              subtitle={item.whatsapp_phone_number}
              date={item.last_received_time}
              unread={item.unread_msg_count}
              className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : ''}
              onClick={() => onSwitchConversation(item)}
            />
          </Dropdown>
        ))}
      </div>
    </>
  );
};
export default Conversations;