perf: 在线窗口: 会话列表刷新

src/stores/ConversationStore.js

@@ -148,9 +148,12 @@ const complexMsgSlice = (set) => ({
 });
 
 const conversationSlice = (set, get) => ({
+  conversationsListLoading: false,
   conversationsList: [],
   currentConversation: {},
 
+  setConversationsListLoading: (conversationsListLoading) => set({ conversationsListLoading }),
+
   /**
    * @deprecated
    */
@@ -167,10 +170,14 @@ const conversationSlice = (set, get) => ({
     const newListIds = newList.map((chatItem) => `${chatItem.sn}`);
     const withoutNew = conversationsList.filter((item) => !newListIds.includes(`${item.sn}`));
 
+    const mergedList = [...newList, ...withoutNew];
+    const refreshTotalNotify = mergedList.reduce((r, c) => r+c.unread_msg_count, 0);
+
     return set((state) => ({
-      conversationsList: [...newList, ...withoutNew],
+      conversationsList: mergedList,
       activeConversations: { ...activeConversations, ...newConversationsMapped },
-      totalNotify: state.totalNotify + newConversations.map((ele) => ele.unread_msg_count).reduce((acc, cur) => acc + (cur || 0), 0),
+      totalNotify: refreshTotalNotify,
+      // totalNotify: state.totalNotify + newConversations.map((ele) => ele.unread_msg_count).reduce((acc, cur) => acc + (cur || 0), 0),
     }));
   },
   delConversationitem: (conversation) => {

src/views/Conversations/Online/ConversationsList.jsx

@@ -1,12 +1,13 @@
 import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Dropdown, Input, Button, } from 'antd';
-import { PlusOutlined, WhatsAppOutlined, } from '@ant-design/icons';
+import { PlusOutlined, WhatsAppOutlined, LoadingOutlined } from '@ant-design/icons';
-import { fetchOrderConversationsList, fetchConversationItemClose, postNewConversationItem } from '@/actions/ConversationActions';
+import { fetchConversationsList, fetchOrderConversationsList, fetchConversationItemClose, postNewConversationItem } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
-import { isEmpty } from '@/utils/commons';
+import { isEmpty, olog } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
 /**
  * []
@@ -22,19 +23,36 @@ const Conversations = ({ mobile }) => {
   const initialState = useConversationStore((state) => state.initialState);
   const [currentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation]);
   const conversationsList = useConversationStore((state) => state.conversationsList);
+  const [conversationsListLoading, setConversationsListLoading] = useConversationStore((state) => [state.conversationsListLoading, state.setConversationsListLoading]);
   const addToConversationList = useConversationStore((state) => state.addToConversationList);
   const delConversationitem = useConversationStore((state) => state.delConversationitem);
 
+  const isVisible = useVisibilityState();
+
   const [tabSelectedConversation, setTabSelectedConversation] = useState({});
   const [tabCnt, setTabCnt] = useState(-1);
 
+  async function refreshConversationList() {
+    setConversationsListLoading(mobile !== undefined ? true : false);
+    const _list = await fetchConversationsList({opisn:userId});
+    addToConversationList(_list);
+    setConversationsListLoading(false);
+  }
+
   useEffect(() => {
     if (mobile !== undefined) {
       setCurrentConversation({});
     }
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    if (isVisible) {
+      refreshConversationList();
+    }
 
     return () => {};
-  }, [])
+  }, [isVisible]);
 
 
   const [dataSource, setDataSource] = useState(conversationsList);
@@ -143,10 +161,10 @@ const Conversations = ({ mobile }) => {
             setTabCnt(-1);
             setTabSelectedConversation({});
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (e.key === 'Tab') {
               e.preventDefault();
-              const _this = tabCnt >= dataSource.length-1 ? 0 : tabCnt + 1
+              const _this = tabCnt >= dataSource.length - 1 ? 0 : tabCnt + 1;
               setTabCnt(_this);
               setTabSelectedConversation(dataSource[_this]);
             }
@@ -154,15 +172,21 @@ const Conversations = ({ mobile }) => {
           onPressEnter={(e) => {
             handleSearchConversations(e.target.value);
             searchInputRef.current.blur();
-            onSwitchConversation(dataSource[(tabCnt < 0 ? 0 : tabCnt)]);
+            onSwitchConversation(dataSource[tabCnt < 0 ? 0 : tabCnt]);
             setTabCnt(-1);
             setTabSelectedConversation({});
             return false;
           }}
-          placeholder='搜索名称'
+          placeholder={`搜索名称${conversationsListLoading ? '...' : ''}`}
         />
       </div>
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
+        {conversationsListLoading && dataSource.length === 0 ? (
+          <div className='text-center py-2'>
+            <LoadingOutlined className='text-primary ' />
+          </div>
+        ) : null}
+
         {dataSource.map((item) => (
           <Dropdown
             key={item.sn}