From cb7d05f20dec4f2dcee3f3d48d57e6c89defa326 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Wed, 18 Dec 2024 08:57:50 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9C=A8=E7=BA=BF=E8=81=8A=E5=A4=A9?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20re-render?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Online/ConversationsList.jsx | 3 +- .../Conversations/Online/MessagesWrapper.jsx | 50 ++++++++++++++----- .../Online/order/CustomerProfile.jsx | 17 +++++-- 3 files changed, 53 insertions(+), 17 deletions(-) diff --git a/src/views/Conversations/Online/ConversationsList.jsx b/src/views/Conversations/Online/ConversationsList.jsx index 9dce49c..5df8e4c 100644 --- a/src/views/Conversations/Online/ConversationsList.jsx +++ b/src/views/Conversations/Online/ConversationsList.jsx @@ -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) => { diff --git a/src/views/Conversations/Online/MessagesWrapper.jsx b/src/views/Conversations/Online/MessagesWrapper.jsx index e7ec31d..22f030f 100644 --- a/src/views/Conversations/Online/MessagesWrapper.jsx +++ b/src/views/Conversations/Online/MessagesWrapper.jsx @@ -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; }; diff --git a/src/views/Conversations/Online/order/CustomerProfile.jsx b/src/views/Conversations/Online/order/CustomerProfile.jsx index 07dc571..4499433 100644 --- a/src/views/Conversations/Online/order/CustomerProfile.jsx +++ b/src/views/Conversations/Online/order/CustomerProfile.jsx @@ -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 = "";