fix: 在线聊天页面 re-render

2.0/wai-server
Lei OT 10 months ago
parent 8ef2b7c25c
commit cb7d05f20d

@ -161,14 +161,13 @@ const Conversations = () => {
let orderChatRefreshing = false;
useEffect(() => {
// console.log('effect get order c');
if (isEmpty(currentConversation.sn) && order_sn && shouldFetchCList && initialState) {
getOrderConversationList(order_sn)
}
return () => {}
}, [initialState, customerDetail.email])
}, [initialState, customerDetail])
const getOrderConversationList = async (colisn) => {

@ -1,4 +1,4 @@
import { useRef, useState, useEffect } from 'react';
import { useRef, useState, useEffect, } from 'react';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
import { Image, Modal, Button } from 'antd';
@ -11,10 +11,13 @@ import ConversationNewItem from './ConversationsNewItem';
import EmailEditorPopup from './Input/EmailEditorPopup';
import EmailDetail from './Components/EmailDetail';
import { useOrderStore, } from "@/stores/OrderStore";
import { isEmpty } from '@/utils/commons';
import useStyleStore from '@/stores/StyleStore';
const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const userId = useAuthStore((state) => state.loginUser.userId);
const [mobile] = useStyleStore(state => [state.mobile]);
const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]);
// const conversationsList = useConversationStore((state) => state.conversationsList);
const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
@ -35,26 +38,45 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const [longListLoading, setLongListLoading] = useState(false);
const [shouldScrollBottom, setShouldScrollBottom] = useState(true);
const prevSN = useRef(currentConversationSN);
const prevColiSN = useRef(currentConversationColiSN);
useEffect(() => {
return () => {
setCurrentConversation({})
if (!mobile) {
prevSN.current = currentConversationSN
prevColiSN.current = currentConversationColiSN
}
return () => {}
}, [])
useEffect(() => {
// console.log('effect sn', currentConversationSN);
// console.log('effect sn', currentConversationSN, prevSN);
// if (isEmpty(prevSN) || currentConversationSN === prevSN) {
// return () => {};
// }
// console.log('effect sn', currentConversationSN, prevSN.current, 'llllllllllllllllll');
// console.log('if fetch', (activeMessages.length))
if (currentConversationSN && (activeMessages.length < 20 || forceGetMessages !== undefined)) {
if (currentConversationSN && (mobile || prevSN.current !== currentConversationSN) && (activeMessages.length < 20 || forceGetMessages !== undefined)) {
// console.log('effect sn NOT empty GO fetch', currentConversationSN);
getFirstPageMessages(currentConversation);
} else if (currentConversationSN) {
// console.log('--------------------- set ref longlist', currentConversationSN, currentConversationColiSN)
prevSN.current = currentConversationSN;
prevColiSN.current = currentConversationColiSN;
}
setShouldScrollBottom(true);
return () => {};
}, [currentConversationSN]);
useEffect(() => {
// console.log('effect coli_sn', currentConversationSN);
// console.log('effect coli_sn', currentConversationSN, currentConversationColiSN, prevColiSN.current, 'xxxxxxxxxxxx');
// console.log('effect coli_sn After if', currentConversationSN, currentConversationNeedLoaded);
if (currentConversation.sn) {
if (currentConversation.sn && (mobile || prevColiSN.current !== currentConversationColiSN)) {
// console.log('effect coli_sn NOT empty GO fetch', currentConversationSN);
getFirstPageMessages({...currentConversation, });
}
setShouldScrollBottom(true);
@ -65,7 +87,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
setLongList(activeMessages);
const thisLastTime = activeMessages.length > 0 ? activeMessages[0].msgtime : '';
const loadNextPage = !(activeMessages.length === 0 || activeMessages.length < MESSAGE_PAGE_SIZE);
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage, });
return () => {};
}, [activeMessages]);
@ -88,14 +110,18 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
setMsgLoading(true);
const data = await fetchMessages({
conversationid: item.sn,
opisn: forceGetMessages ? currentConversation.opi_sn || '' : userId,
opisn: forceGetMessages ? item.opi_sn || '' : userId,
whatsappid: item.whatsapp_phone_number,
lasttime: '',
coli_sn: currentConversation.coli_sn || '',
coli_sn: item.coli_sn || '',
})
prevSN.current = item.sn;
prevColiSN.current = item.coli_sn;
const thisLastTime = data.length > 0 ? data[0].msgtime : ''; // orgmsgtime
const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage, });
// setPrevSN(item.sn);
setMsgLoading(false);
receivedMessageList(item.sn, data);
@ -116,7 +142,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
setLongList(prevValue => data.concat(prevValue));
const thisLastTime = data.length > 0 ? data[0].msgtime : '';
const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
updateCurrentConversation({ lasttime: thisLastTime, loadNextPage, });
return data.length;
};

@ -15,6 +15,7 @@ import ConversationsNewItem from "./../ConversationsNewItem";
import { useConversationNewItem } from "@/hooks/useConversation";
import EmailDetail from './../Components/EmailDetail';
import { postEditConversationItemColiAction } from "@/actions/ConversationActions";
import useStyleStore from '@/stores/StyleStore';
const CustomerProfile = () => {
const { notification, message } = App.useApp();
@ -24,6 +25,7 @@ const CustomerProfile = () => {
const [orderList, setOrderList] = useState([]);
const orderCommentRef = useRef(null);
const [mobile] = useStyleStore(state => [state.mobile]);
const currentOrder = useConversationStore(useShallow(state => state.currentConversation?.coli_sn || ""));
const currentConversationID = useConversationStore(useShallow(state => state.currentConversation?.sn || ""));
const channels = useConversationStore(state => state.currentConversation?.channels);
@ -57,12 +59,21 @@ const CustomerProfile = () => {
})
}
const prevOrder = useRef(currentOrder);
useEffect(() => {
if (!mobile) prevOrder.current = currentOrder
// console.log('---- 000 useEffect -----', currentOrder)
return () => {}
}, [])
useEffect(() => {
setChatOrder(currentOrder)
if (currentOrder) {
// console.log('---- useEffect -----', currentOrder, prevOrder.current)
if (currentOrder && (mobile || prevOrder.current !== currentOrder)) {
setLoading(true);
fetchOrderDetail(currentOrder)
.then(result => {
prevOrder.current = currentOrder
setOrderNumber(result.orderDetail.order_no)
setChatOrder(result.orderDetail.order_no)
const queryEmail = result.customerDetail.email || channels?.email || '';
@ -94,9 +105,9 @@ const CustomerProfile = () => {
});
});
} else {
resetOrderStore();
// resetOrderStore();
}
return () => resetOrderStore()
return () => {} // resetOrderStore()
}, [currentOrder]);
let regularText = "";

Loading…
Cancel
Save