From 49e0be44281ffef037b6e99ee8eb3f8e15c6ed51 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Fri, 23 Feb 2024 19:20:56 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=93=BE=E6=8E=A5=E4=B9=8B?= =?UTF-8?q?=E5=90=8E=E4=B8=8A=E7=BA=A7=E7=BB=84=E4=BB=B6re-render;=20?= =?UTF-8?q?=E8=8E=B7=E5=8F=96loginUser?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AuthApp.jsx | 17 ++++++++--------- .../Components/ConversationsList.jsx | 18 ++++++++++++++---- .../Components/Input/Template.jsx | 5 +++-- .../Conversations/Components/InputComposer.jsx | 5 +++-- 4 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/views/AuthApp.jsx b/src/views/AuthApp.jsx index 97bc460..5e0604e 100644 --- a/src/views/AuthApp.jsx +++ b/src/views/AuthApp.jsx @@ -13,7 +13,6 @@ import 'dayjs/locale/zh-cn' import 'react-chat-elements/dist/main.css' import '@/assets/App.css' import AppLogo from '@/assets/logo-gh.png' -import { isEmpty } from '@/utils/commons' const { Header, Footer, Content } = Layout const { Title } = Typography @@ -42,16 +41,16 @@ function AuthApp() { token: { colorBgContainer }, } = theme.useToken() - const { connectWebsocket, disconnectWebsocket, fetchInitialData } = useConversationStore(); + const { userId } = loginUser; useEffect(() => { - if (loginUser && loginUser.userId) { - connectWebsocket(loginUser.userId); - fetchInitialData(loginUser.userId); + if (userId) { + useConversationStore.getState().connectWebsocket(userId); + useConversationStore.getState().fetchInitialData(userId); } return () => { - disconnectWebsocket(); + useConversationStore.getState().disconnectWebsocket(); } - }, [loginUser.userId]); + }, [userId]); return ( e.preventDefault()} style={{ color: colorPrimary }}> - {loginUser.username.substring(1)}{loginUser.username}​ diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx index f0327f5..08a2489 100644 --- a/src/views/Conversations/Components/ConversationsList.jsx +++ b/src/views/Conversations/Components/ConversationsList.jsx @@ -2,11 +2,11 @@ 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 { useAuthContext } from '@/stores/AuthContext'; 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' /** * [] @@ -16,10 +16,20 @@ const Conversations = () => { const { coli_guest_WhatsApp } = orderRow || {}; const { order_sn } = useParams(); const navigate = useNavigate(); - const { loginUser } = useAuthContext(); + const { loadUser } = useAuthStore(); + const loginUser = loadUser(); const { userId } = loginUser; - const { initialState, activeConversations, currentConversation, conversationsList, addToConversationList, delConversationitem, setCurrentConversation, receivedMessageList, setMsgLoading } = - useConversationStore(); + const { + initialState, + activeConversations, + currentConversation, + conversationsList, + addToConversationList, + delConversationitem, + setCurrentConversation, + receivedMessageList, + setMsgLoading, + } = useConversationStore(); const [switchToC, setSwitchToC] = useState({}); const [shouldFetchCList, setShouldFetchCList] = useState(true); diff --git a/src/views/Conversations/Components/Input/Template.jsx b/src/views/Conversations/Components/Input/Template.jsx index bb91007..8a4140c 100644 --- a/src/views/Conversations/Components/Input/Template.jsx +++ b/src/views/Conversations/Components/Input/Template.jsx @@ -1,7 +1,7 @@ import { useState, useRef, useEffect } from 'react'; import { App, Popover, Flex, Button, List, Input } from 'antd'; import { MessageOutlined, SendOutlined } from '@ant-design/icons'; -import { useAuthContext } from '@/stores/AuthContext'; +import useAuthStore from '@/stores/AuthStore' import useConversationStore from '@/stores/ConversationStore'; import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils'; import { v4 as uuid } from 'uuid'; @@ -24,7 +24,8 @@ const splitTemplate = (template) => { const InputTemplate = ({ disabled = false, invokeSendMessage }) => { const searchInputRef = useRef(null); const { notification } = App.useApp(); - const { loginUser } = useAuthContext(); + const { loadUser } = useAuthStore(); + const loginUser = loadUser(); const { currentConversation, templates } = useConversationStore(); // 用于替换变量: customer, agent const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) }; diff --git a/src/views/Conversations/Components/InputComposer.jsx b/src/views/Conversations/Components/InputComposer.jsx index 57144ea..368828d 100644 --- a/src/views/Conversations/Components/InputComposer.jsx +++ b/src/views/Conversations/Components/InputComposer.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Input, Flex, Button, } from 'antd'; // import { Input } from 'react-chat-elements'; -import { useAuthContext } from '@/stores/AuthContext'; +import useAuthStore from '@/stores/AuthStore' import useConversationStore from '@/stores/ConversationStore'; import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentOutlined, UploadOutlined, CloudUploadOutlined, FolderAddOutlined, FilePdfOutlined, CloseCircleOutlined } from '@ant-design/icons'; import { isEmpty } from '@/utils/utils'; @@ -12,7 +12,8 @@ import InputImageUpload from './Input/ImageUpload'; import dayjs from 'dayjs'; const InputBox = () => { - const { loginUser } = useAuthContext(); + const { loadUser } = useAuthStore(); + const loginUser = loadUser(); const { userId } = loginUser; const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, sentOrReceivedNewMessage } = useConversationStore(); const [textContent, setTextContent] = useState('');