@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/src/hooks/useChatMessages.ts

@@ -7,11 +7,10 @@ import { ChatMessageAPI } from '../services/message';
 import type { DMessageItem } from '../types/chat';
 import {
   belongsToConversation,
-  getHistoryPaginationAnchor,
   hasNewHistoryMessages,
   mergeMessages,
-  type HistoryPaginationAnchor,
 } from '../utils/message';
+import { useMessageStore } from '../store/message';
 
 type UseChatMessagesOptions = {
   conversationId: string;
@@ -24,44 +23,24 @@ export function useChatMessages({
   enabled = true,
   pageSize = 20,
 }: UseChatMessagesOptions) {
-  const [messages, setMessages] = useState<DMessageItem[]>([]);
+  const messages = useMessageStore((s) => s.messages);
+  const hasMoreEarlier = useMessageStore((s) => s.hasMoreEarlier);
+  const hasMoreNewer = useMessageStore((s) => s.hasMoreNewer);
+  const setMessages = useMessageStore((s) => s.setMessages);
+  const pushNewMessage = useMessageStore((s) => s.pushNewMessage);
+  const reset = useMessageStore((s) => s.reset);
+
   const [currentUserId, setCurrentUserId] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
-  const [hasMoreEarlier, setHasMoreEarlier] = useState(false);
   const [isLoadingNewer, setIsLoadingNewer] = useState(false);
-  const [hasMoreNewer, setHasMoreNewer] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
   const conversationIdRef = useRef(conversationId);
   conversationIdRef.current = conversationId;
 
-  const isLoadingEarlierRef = useRef(false);
-  const isLoadingNewerRef = useRef(false);
-  const messagesRef = useRef(messages);
-  const hasMoreEarlierRef = useRef(hasMoreEarlier);
-  const hasMoreNewerRef = useRef(hasMoreNewer);
-  const historyAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
-  const newestAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
-  messagesRef.current = messages;
-  hasMoreEarlierRef.current = hasMoreEarlier;
-  hasMoreNewerRef.current = hasMoreNewer;
-
-  const resetState = useCallback(() => {
-    setMessages([]);
-    setHasMoreEarlier(false);
-    setHasMoreNewer(false);
-    setError(null);
-    isLoadingEarlierRef.current = false;
-    isLoadingNewerRef.current = false;
-    historyAnchorRef.current = null;
-    newestAnchorRef.current = null;
-  }, []);
-
-  const loadInitialMessages = useCallback(async () => {
-    if (!conversationId) {
-      return;
-    }
+  const fetchInitial = useCallback(async () => {
+    if (!conversationId) return;
 
     setIsLoading(true);
     setError(null);
@@ -75,22 +54,9 @@ export function useChatMessages({
       ]);
 
       const initialMessages = history.messageList as DMessageItem[];
-      const oldestAnchor = getHistoryPaginationAnchor(initialMessages);
 
       setCurrentUserId(userId);
-      setMessages(mergeMessages([], initialMessages));
-      historyAnchorRef.current = oldestAnchor
-        ? {
-            clientMsgID: oldestAnchor.clientMsgID,
-            // lastMinSeq: resolveHistoryLastMinSeq(
-            //   history,
-            //   initialMessages.find(
-            //     (message) => message.clientMsgID === oldestAnchor.clientMsgID
-            //   )
-            // ),
-          }
-        : null;
-      setHasMoreEarlier(!history.isEnd && !!oldestAnchor);
+      setMessages(mergeMessages([], initialMessages), !history.isEnd);
 
       ChatMessageAPI.markConversationAsRead(conversationId).catch(
         () => undefined
@@ -100,177 +66,120 @@ export function useChatMessages({
     } finally {
       setIsLoading(false);
     }
-  }, [conversationId, pageSize]);
+  }, [conversationId, pageSize, setMessages]);
 
   const onLoadEarlier = useCallback(async () => {
-    if (
-      !conversationId ||
-      isLoadingEarlierRef.current ||
-      !hasMoreEarlierRef.current ||
-      !messagesRef.current.length
-    ) {
-      return;
-    }
+    if (isLoadingEarlier || !hasMoreEarlier || !messages.length) return;
 
-    isLoadingEarlierRef.current = true;
     setIsLoadingEarlier(true);
     setError(null);
 
-    const anchor = historyAnchorRef.current;
-    if (!anchor?.clientMsgID) {
-      isLoadingEarlierRef.current = false;
-      setIsLoadingEarlier(false);
-      return;
-    }
-
     try {
       const history = await ChatMessageAPI.fetchHistoryMessages(
         conversationId,
         {
           count: pageSize,
-          startClientMsgID: anchor.clientMsgID,
+          startClientMsgID: messages[0]!.clientMsgID,
         }
       );
-      const incoming = history.messageList as DMessageItem[];
-      const hasNewMessages = hasNewHistoryMessages(
-        messagesRef.current,
-        incoming
-      );
 
-      if (hasNewMessages) {
-        setMessages((current) => mergeMessages(current, incoming));
+      const incoming = history.messageList as DMessageItem[];
+      const hasNew = hasNewHistoryMessages(messages, incoming);
+
+      if (hasNew) {
+        setMessages(
+          mergeMessages(messages, incoming),
+          !history.isEnd && hasNew
+        );
+      } else {
+        setMessages(messages, false);
       }
-
-      const nextAnchor = getHistoryPaginationAnchor(incoming);
-      historyAnchorRef.current = nextAnchor
-        ? {
-            clientMsgID: nextAnchor.clientMsgID,
-            // lastMinSeq: resolveHistoryLastMinSeq(
-            //   history,
-            //   incoming.find(
-            //     (message) => message.clientMsgID === nextAnchor.clientMsgID
-            //   )
-            // ),
-          }
-        : null;
-
-      setHasMoreEarlier(!history.isEnd && hasNewMessages && !!nextAnchor);
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
-      isLoadingEarlierRef.current = false;
       setIsLoadingEarlier(false);
     }
-  }, [conversationId, pageSize]);
+  }, [
+    conversationId,
+    hasMoreEarlier,
+    isLoadingEarlier,
+    messages,
+    pageSize,
+    setMessages,
+  ]);
 
   const onLoadNewer = useCallback(async () => {
-    if (
-      !conversationId ||
-      isLoadingNewerRef.current ||
-      !hasMoreNewerRef.current ||
-      !messagesRef.current.length
-    ) {
-      return;
-    }
+    if (isLoadingNewer || !hasMoreNewer || !messages.length) return;
 
-    isLoadingNewerRef.current = true;
     setIsLoadingNewer(true);
     setError(null);
 
-    const anchor = newestAnchorRef.current;
-    if (!anchor?.clientMsgID && messagesRef.current.length === 0) {
-      isLoadingNewerRef.current = false;
-      setIsLoadingNewer(false);
-      return;
-    }
-
     try {
-      // Get the newest message ID to load from
-      const newestMessage = messagesRef.current[messagesRef.current.length - 1];
       const history = await ChatMessageAPI.fetchHistoryMessages(
         conversationId,
         {
           count: pageSize,
-          startClientMsgID: newestMessage?.clientMsgID,
+          startClientMsgID: messages[messages.length - 1]!.clientMsgID,
         }
       );
 
       const incoming = history.messageList as DMessageItem[];
-      const hasNewMessages = incoming.length > 0;
+      const hasNew = incoming.length > 0;
 
-      if (hasNewMessages) {
-        setMessages((current) => mergeMessages(current, incoming));
+      if (hasNew) {
+        setMessages(
+          mergeMessages(messages, incoming),
+          !history.isEnd && hasNew
+        );
       }
-
-      setHasMoreNewer(!history.isEnd && hasNewMessages);
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
-      isLoadingNewerRef.current = false;
       setIsLoadingNewer(false);
     }
-  }, [conversationId, pageSize]);
-
-  const sendTextMessage = useCallback(async (text: string) => {
-    const trimmed = text.trim();
-    if (!trimmed) {
-      return;
-    }
-
-    const sentMessage = await ChatMessageAPI.sendTextMessage({
-      text: trimmed,
-    });
-
-    setMessages((current) => mergeMessages(current, [sentMessage]));
-  }, []);
-
-  const appendIncomingMessages = useCallback((incoming: MessageItem[]) => {
-    const relevant = incoming.filter((message) =>
-      belongsToConversation(message, conversationIdRef.current)
-    );
-
-    if (!relevant.length) {
-      return;
-    }
+  }, [
+    conversationId,
+    hasMoreNewer,
+    isLoadingNewer,
+    messages,
+    pageSize,
+    setMessages,
+  ]);
+
+  const appendIncomingMessages = useCallback(
+    (incoming: MessageItem[]) => {
+      const relevant = incoming.filter((message) =>
+        belongsToConversation(message, conversationIdRef.current)
+      );
 
-    setMessages((current) =>
-      mergeMessages(current, relevant as DMessageItem[])
-    );
+      if (!relevant.length) return;
 
-    ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
-      () => undefined
-    );
-  }, []);
+      relevant.forEach((msg) => pushNewMessage(msg));
+      ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
+        () => undefined
+      );
+    },
+    [pushNewMessage]
+  );
 
   useEffect(() => {
-    resetState();
+    reset();
 
-    if (!enabled || !conversationId) {
-      return;
-    }
+    if (!enabled || !conversationId) return;
 
-    loadInitialMessages();
-  }, [conversationId, enabled, loadInitialMessages, resetState]);
+    fetchInitial();
+  }, [conversationId, enabled, fetchInitial, reset]);
 
   useEffect(() => {
-    if (!enabled || !conversationId) {
-      return;
-    }
+    if (!enabled || !conversationId) return;
 
-    const handleNewMessages = (incoming: MessageItem[]) => {
+    const handleNewMessages = (incoming: MessageItem[]) =>
       appendIncomingMessages(incoming);
-    };
-
-    const handleNewMessage = (incoming: MessageItem) => {
-      appendIncomingMessages([incoming]);
-    };
 
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
-    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
 
     return () => {
       OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
-      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
     };
   }, [appendIncomingMessages, conversationId, enabled]);
 
@@ -285,7 +194,6 @@ export function useChatMessages({
     error,
     onLoadEarlier,
     onLoadNewer,
-    sendTextMessage,
-    refresh: loadInitialMessages,
+    refresh: fetchInitial,
   };
 }

package/src/hooks/useConversationList.ts

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import OpenIMSDK from '@droppii/openim-rn-client-sdk';
-import { ChatAPI } from '../services';
+import OpenIMSDK, {
+  type ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
-import { mergeOpenIMIntoConversation } from '../utils/conversation';
+import type { DConversationItem, DMessageItem } from '../types/chat';
 
 type Params = {
   applicationType: string;
@@ -12,6 +13,29 @@ type Params = {
   enabled?: boolean;
 };
 
+function toConversationItem(raw: ConversationItem): DConversationItem {
+  let lastMessage: DMessageItem | undefined;
+  if (raw.latestMsg) {
+    try {
+      lastMessage = JSON.parse(raw.latestMsg) as DMessageItem;
+    } catch {
+      // leave undefined
+    }
+  }
+
+  let applicationType: string | undefined;
+  if (raw.ex) {
+    try {
+      applicationType = (JSON.parse(raw.ex) as { applicationType?: string })
+        .applicationType;
+    } catch {
+      // leave undefined
+    }
+  }
+
+  return { ...(raw as DConversationItem), lastMessage, applicationType };
+}
+
 export function useConversationList({
   applicationType,
   page = 1,
@@ -26,21 +50,15 @@ export function useConversationList({
     enabled: enabled !== false,
     queryFn: async () => {
       const offset = (page - 1) * 20;
-      const [{ data: droppiiList }, openimList] = await Promise.all([
-        ChatAPI.queryConversations({ applicationType, page, pageSize: 20 }),
-        OpenIMSDK.getConversationListSplit({ offset, count: 20 }),
-      ]);
-      const openimMap = new Map(openimList.map((c) => [c.conversationID, c]));
-
-      const merged = droppiiList.map((conv) => {
-        const openimConv = openimMap.get(conv.conversationId);
-        return openimConv
-          ? mergeOpenIMIntoConversation(conv, openimConv)
-          : conv;
+      const rawList = await OpenIMSDK.getConversationListSplitApp({
+        offset,
+        count: 20,
+        applicationType,
       });
 
-      useConversationStore.getState().updateConversations(merged);
-      return merged;
+      const conversations = rawList.map(toConversationItem);
+      useConversationStore.getState().updateConversations(conversations);
+      return conversations;
     },
   });