perf: 会话列表: 置顶, 分页

10 months ago · 38f0f18efe
parent 9bf9d400c7
commit 38f0f18efe
4 changed files with 38 additions and 34 deletions
--- a/src/stores/ConversationStore.js
+++ b/src/stores/ConversationStore.js
@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { RealTimeAPI } from '@/channel/realTimeAPI';
-import { olog, isEmpty } from '@/utils/commons';
+import { olog, isEmpty, groupBy } from '@/utils/commons';
 import { receivedMsgTypeMapped, handleNotification } from '@/channel/bubbleMsgUtils';
 import { fetchConversationsList, fetchTemplates, fetchConversationsSearch, UNREAD_MARK, fetchTags } from '@/actions/ConversationActions';
 import { devtools } from 'zustand/middleware';
@ -40,6 +40,8 @@ const initialConversationState = {

  closedConversationsList: [], // 已关闭的对话列表
  conversationsList: [], // 对话列表
+  topList: [],
+  pageList: [],
  currentConversation: {}, // 当前对话

  activeConversations: {}, // 激活的对话的消息列表: { [conversationId]: <messageItem>[] }
@ -207,6 +209,9 @@ const conversationSlice = (set, get) => ({
  currentConversation: {},
  closedConversationsList: [],

+  topList: [],
+  pageList: [],
+
  setConversationsListLoading: (conversationsListLoading) => set({ conversationsListLoading }),

  /**
@ -214,9 +219,18 @@ const conversationSlice = (set, get) => ({
   * 搜索结果
   */
  setConversationsList: (conversationsList) => {
-    const { activeConversations, } = get();
+    const { activeConversations,  } = get();
    const conversationsMapped = conversationsList.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
-    return set({ conversationsList, activeConversations: {...conversationsMapped, ...activeConversations,} });
+
+    const conversationsTopStateMapped = groupBy(conversationsList, 'top_state');
+
+    return set({
+      topList: conversationsTopStateMapped[1] || [],
+      // conversationsList: conversationsTopStateMapped[0],
+      pageList: conversationsTopStateMapped[0] || [],
+      conversationsList,
+      activeConversations: { ...conversationsMapped, ...activeConversations }
+    })
  },
  setClosedConversationList: (closedConversationsList) => {
    const { activeConversations, } = get();
@ -224,7 +238,7 @@ const conversationSlice = (set, get) => ({
    return set({ closedConversationsList, activeConversations: { ...activeConversations, ...listMapped } });
  },
  addToConversationList: (newList, position='top') => {
-    const { activeConversations, conversationsList } = get();
+    const { activeConversations, conversationsList, } = get();
    // const conversationsIds = Object.keys(activeConversations);
    const conversationsIds = conversationsList.map((chatItem) => `${chatItem.sn}`);
    const newConversations = newList.filter((conversation) => !conversationsIds.includes(`${conversation.sn}`));
@ -236,9 +250,13 @@ const conversationSlice = (set, get) => ({
    const updateList = replaceObjectsByKey(conversationsList, newList, 'sn');

    const mergedList = position==='top' ? [...newList, ...withoutNew] : [...updateList, ...newConversations];
+    const mergedListMapped = groupBy(mergedList, 'top_state');
+
    const refreshTotalNotify = mergedList.reduce((r, c) => r+(c.unread_msg_count === UNREAD_MARK ? 0 : c.unread_msg_count), 0);

    return set((state) => ({
+      topList: mergedListMapped[1] || [],
+      pageList: mergedListMapped[0] || [],
      conversationsList: mergedList,
      activeConversations: { ...activeConversations, ...newConversationsMapped },
      totalNotify: refreshTotalNotify,
@ -444,17 +462,11 @@ export const useConversationStore = create(

    // side effects
    fetchInitialData: async ({userId, userIds, whatsAppBusiness, ...loginUser}) => {
-      const { addToConversationList, setTemplates, setInitial, setClosedConversationList, setTags } = get();
-
-      // const conversationsList = await fetchConversationsList({ opisn: userIds });
-      // addToConversationList(conversationsList);
+      const { setTemplates, setInitial, setTags } = get();

      const templates = await fetchTemplates({ waba: whatsAppBusiness });
      setTemplates(templates);

-      // const closedList = await fetchConversationsList({ opisn: userIds, session_enable: 0 });
-      // setClosedConversationList(closedList);
-
      const myTags = await fetchTags({ opisn: userId});
      setTags(myTags);

--- a/src/views/Conversations/Online/Components/ChatListItem.jsx
+++ b/src/views/Conversations/Online/Components/ChatListItem.jsx
@ -91,13 +91,13 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch

  const handleConversationItemUnread = async (item) => {
    await fetchConversationItemUnread({ conversationid: item.sn });
-    await refreshConversationList(item.last_received_time > item.last_send_time ? item.last_received_time : item.last_send_time);
+    await refreshConversationList(item.lasttime);
    setListUpdateFlag(Math.random());
  }

  const handleConversationItemTop = async (item) => {
    await fetchConversationItemTop({ conversationid: item.sn, top_state: item.top_state === 0 ? 1 : 0 });
-    await refreshConversationList(item.last_received_time > item.last_send_time ? item.last_received_time : item.last_send_time);
+    await refreshConversationList(item.lasttime);
    setListUpdateFlag(Math.random());
  }

@ -116,8 +116,9 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
        addTag({ label: rtag.tag_label, key: rtag.tag_key, value: rtag.tag_key })
      }
    }
-    await refreshConversationList(item.last_received_time > item.last_send_time ? item.last_received_time : item.last_send_time);
+    await refreshConversationList(item.lasttime);
    setListUpdateFlag(Math.random());
+    setContextMenuOpen(false);
  }

  const [contextMenuOpen, setContextMenuOpen] = useState(false);
--- a/src/views/Conversations/Online/Components/MessageListFilter.jsx
+++ b/src/views/Conversations/Online/Components/MessageListFilter.jsx
@ -1,19 +1,9 @@
 import { useEffect, useState } from 'react';
 import { App, Button, Popover, Tabs, List, Image, Avatar, Card, Flex, Space } from 'antd';
 import { FileSearchOutlined, LoadingOutlined } from '@ant-design/icons';
-import {
-  DownloadOutlined,
-  LeftOutlined,
-  RightOutlined,
-  RotateLeftOutlined,
-  RotateRightOutlined,
-  SwapOutlined,
-  UndoOutlined,
-  ZoomInOutlined,
-  ZoomOutOutlined,
-} from '@ant-design/icons';
-import { InboxIcon, SendPlaneFillIcon, ShareForwardIcon } from '@/components/Icons';
-import { groupBy, stringToColour } from '@/utils/commons';
+import { RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons'
+import { InboxIcon, SendPlaneFillIcon } from '@/components/Icons';
+import { groupBy, isEmpty, stringToColour } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
 import EmailDetail from './EmailDetail';
 import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationActions';
@ -21,7 +11,7 @@ import DnDModal from '@/components/DnDModal';
 import useConversationStore from '@/stores/ConversationStore';
 import useStyleStore from '@/stores/StyleStore';
 import useAuthStore from '@/stores/AuthStore';
-import { sentMsgTypeMapped, whatsappSupportFileTypes, uploadProgressSimulate } from '@/channel/bubbleMsgUtils';
+import { sentMsgTypeMapped } from '@/channel/bubbleMsgUtils';
 import { v4 as uuid } from 'uuid';

 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 10;
@ -100,9 +90,10 @@ const MessageListFilter = ({ ...props }) => {
  };

  useEffect(() => {
-    if (activeMessages.length > 0) {
-      setHistoryMessages(activeMessages);
-    }
+    // if (activeMessages.length > 0) {
+    //   setHistoryMessages(activeMessages);
+    // }
+    setHistoryMessages(activeMessages)
    const { opi_sn: opisn, whatsapp_phone_number: whatsappid } = currentConversation;
    setParamsForMsgList({ loadPrePage: true, pretime: activeMessages.length > 0 ? activeMessages[0].orgmsgtime : '', opisn, whatsappid });

@ -408,7 +399,7 @@ const MessageListFilter = ({ ...props }) => {
            />
          </>
        }>
-        <Button icon={<FileSearchOutlined />} type='text' size='middle' title='消息记录' />
+        <Button icon={<FileSearchOutlined />} disabled={isEmpty(currentConversation.sn)} type='text' size='middle' title='消息记录' />
      </Popover>
    </>
  );
--- a/src/views/Conversations/Online/ConversationsList.jsx
+++ b/src/views/Conversations/Online/ConversationsList.jsx
@ -28,7 +28,7 @@ const Conversations = () => {
  const userId = useAuthStore((state) => state.loginUser.userId);
  const initialState = useConversationStore((state) => state.initialState);
  const [currentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation]);
-  const conversationsList = useConversationStore((state) => state.conversationsList);
+  const [topList, pageList, conversationsList] = useConversationStore((state) => [state.topList, state.pageList, state.conversationsList]);
  const [conversationsListLoading, setConversationsListLoading] = useConversationStore((state) => [state.conversationsListLoading, state.setConversationsListLoading]);
  const addToConversationList = useConversationStore((state) => state.addToConversationList);
  const setConversationsList = useConversationStore((state) => state.setConversationsList);
@ -116,7 +116,7 @@ const Conversations = () => {
  const [dataSource, setDataSource] = useState(conversationsList);
  const [listUpdateFlag, setListUpdateFlag] = useState();
  useEffect(() => {
-    setDataSource(conversationsList);
+    setDataSource([...topList, ...pageList]);
    // setDataSource(activeList ? conversationsList: closedConversationsList);
    return () => {};
  }, [conversationsList, listUpdateFlag, currentConversation.unread_msg_count]);