fix: 清空currentConversation, 用useShadow避免re-render取到旧的值

2.0/wai-server
Lei OT 10 months ago committed by lyt
parent da4af792cd
commit 1ced6878dd

@ -7,26 +7,25 @@ import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/ac
import useAuthStore from '@/stores/AuthStore'; import useAuthStore from '@/stores/AuthStore';
import { useVisibilityState } from '@/hooks/useVisibilityState'; import { useVisibilityState } from '@/hooks/useVisibilityState';
import ConversationNewItem from './ConversationsNewItem'; import ConversationNewItem from './ConversationsNewItem';
import emailItem from './Components/emailSent.json';
import emailReItem from './Components/emailRe.json';
// import EmailEditor from './Input/bak/EmailEditor'; // import EmailEditor from './Input/bak/EmailEditor';
import EmailEditorPopup from './Input/EmailEditorPopup'; import EmailEditorPopup from './Input/EmailEditorPopup';
import EmailDetail from './Components/EmailDetail'; import EmailDetail from './Components/EmailDetail';
import { useOrderStore, } from "@/stores/OrderStore"; import { useOrderStore, } from "@/stores/OrderStore";
import { isEmpty } from '@/utils/commons';
const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => { const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const userId = useAuthStore((state) => state.loginUser.userId); const userId = useAuthStore((state) => state.loginUser.userId);
const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]); const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]);
const conversationsList = useConversationStore((state) => state.conversationsList); // const conversationsList = useConversationStore((state) => state.conversationsList);
const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: []))); const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
const addToConversationList = useConversationStore((state) => state.addToConversationList); // const addToConversationList = useConversationStore((state) => state.addToConversationList);
const receivedMessageList = useConversationStore((state) => state.receivedMessageList); const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
const setMsgLoading = useConversationStore((state) => state.setMsgLoading); const setMsgLoading = useConversationStore((state) => state.setMsgLoading);
const refreshTotalNotify = useConversationStore(useShallow((state) => state.refreshTotalNotify)); const refreshTotalNotify = useConversationStore(useShallow((state) => state.refreshTotalNotify));
const currentConversationSN = useConversationStore(useShallow((state) => state.currentConversation.sn));
const currentConversationColiSN = useConversationStore(useShallow((state) => state.currentConversation.coli_sn));
const [orderDetail, ] = useOrderStore(state => [state.orderDetail, ]); const [orderDetail, ] = useOrderStore(state => [state.orderDetail, ]);
@ -35,21 +34,32 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const [longList, setLongList] = useState([]); const [longList, setLongList] = useState([]);
const [longListLoading, setLongListLoading] = useState(false); const [longListLoading, setLongListLoading] = useState(false);
const [shouldScrollBottom, setShouldScrollBottom] = useState(true); const [shouldScrollBottom, setShouldScrollBottom] = useState(true);
useEffect(() => {
return () => {
setCurrentConversation({})
}
}, [])
useEffect(() => { useEffect(() => {
if (currentConversation.sn && (activeMessages.length < 20 || forceGetMessages !== undefined)) { // console.log('effect sn', currentConversationSN);
if (currentConversationSN && (activeMessages.length < 20 || forceGetMessages !== undefined)) {
getFirstPageMessages(currentConversation); getFirstPageMessages(currentConversation);
} }
setShouldScrollBottom(true); setShouldScrollBottom(true);
return () => {}; return () => {};
}, [currentConversation.sn]); }, [currentConversationSN]);
useEffect(() => { useEffect(() => {
// console.log('effect coli_sn', currentConversationSN);
if (currentConversation.sn) { if (currentConversation.sn) {
getFirstPageMessages({...currentConversation, }); getFirstPageMessages({...currentConversation, });
} }
setShouldScrollBottom(true); setShouldScrollBottom(true);
return () => {}; return () => {};
}, [currentConversation.coli_sn]); }, [currentConversationColiSN]);
useEffect(() => { useEffect(() => {
setLongList(activeMessages); setLongList(activeMessages);

@ -2,6 +2,7 @@ import { LinkOutlined, MailOutlined, PhoneOutlined, UserOutlined, WhatsAppOutlin
import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag } from "antd"; import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag } from "antd";
import { useEffect, useState, useRef, useCallback } from "react"; import { useEffect, useState, useRef, useCallback } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useShallow } from 'zustand/react/shallow';
import { copy, isEmpty } from "@/utils/commons"; import { copy, isEmpty } from "@/utils/commons";
import { Conditional } from "@/components/Conditional"; import { Conditional } from "@/components/Conditional";
@ -23,8 +24,8 @@ const CustomerProfile = () => {
const [orderList, setOrderList] = useState([]); const [orderList, setOrderList] = useState([]);
const orderCommentRef = useRef(null); const orderCommentRef = useRef(null);
const currentOrder = useConversationStore(state => state.currentConversation?.coli_sn || ""); const currentOrder = useConversationStore(useShallow(state => state.currentConversation?.coli_sn || ""));
const currentConversationID = useConversationStore(state => state.currentConversation?.sn || ""); const currentConversationID = useConversationStore(useShallow(state => state.currentConversation?.sn || ""));
const channels = useConversationStore(state => state.currentConversation?.channels); const channels = useConversationStore(state => state.currentConversation?.channels);
const [updateCurrentConversation] = useConversationStore(state => [state.updateCurrentConversation]); const [updateCurrentConversation] = useConversationStore(state => [state.updateCurrentConversation]);
const [emailMsg, setEmailMsg, detailPopupOpen, setDetailOpen, openDetail] = useConversationStore(state => [state.emailMsg, state.setEmailMsg, state.detailPopupOpen, state.setDetailOpen, state.openDetail]); const [emailMsg, setEmailMsg, detailPopupOpen, setDetailOpen, openDetail] = useConversationStore(state => [state.emailMsg, state.setEmailMsg, state.detailPopupOpen, state.setDetailOpen, state.openDetail]);
@ -65,7 +66,7 @@ const CustomerProfile = () => {
setOrderNumber(result.orderDetail.order_no) setOrderNumber(result.orderDetail.order_no)
setChatOrder(result.orderDetail.order_no) setChatOrder(result.orderDetail.order_no)
const queryEmail = result.customerDetail.email || channels?.email || ''; const queryEmail = result.customerDetail.email || channels?.email || '';
const queryWA = channels?.whatsapp_phone_number || '' const queryWA = result.customerDetail.whatsapp_phone_number || result.customerDetail.phone || channels?.whatsapp_phone_number || ''
getHistoryOrder(queryEmail, queryWA) getHistoryOrder(queryEmail, queryWA)
}) })
.finally(() => setLoading(false)) .finally(() => setLoading(false))
@ -95,7 +96,8 @@ const CustomerProfile = () => {
} else { } else {
resetOrderStore(); resetOrderStore();
} }
}, [currentOrder, currentConversationID]); return () => resetOrderStore()
}, [currentOrder]);
let regularText = ""; let regularText = "";
if (orderDetail.buytime > 0) regularText = "(R" + orderDetail.buytime + ")"; if (orderDetail.buytime > 0) regularText = "(R" + orderDetail.buytime + ")";
@ -146,7 +148,8 @@ const CustomerProfile = () => {
variant="borderless" variant="borderless"
value={chatOrder} value={chatOrder}
options={orderList} options={orderList}
onSelect={handleOrderSwitch} // onSelect={handleOrderSwitch}
onChange={handleOrderSwitch}
/>} />}
actions={[ actions={[
<Select <Select

Loading…
Cancel
Save