Merge pull request #256 from sendbird/fix/search-item-scroll-issue

[CLNP-7468] fix: resolve search item scroll issue

Author: OnestarLee

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -26,7 +26,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const { sdk, sbOptions, groupChannelFragmentOptions } = useSendbirdChat();
   const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
   const groupChannelPubSub = useContext(GroupChannelContexts.PubSub);
-  const { flatListRef, lazyScrollToBottom, lazyScrollToIndex, onPressReplyMessageInThread } = useContext(
+  const { flatListRef, lazyScrollToBottom, lazyScrollToMessageId, onPressReplyMessageInThread } = useContext(
     GroupChannelContexts.MessageList,
   );
 
@@ -40,6 +40,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const viewableMessages = useRef<SendbirdMessage[]>();
   const hasUserMarkedAsUnreadRef = useRef(false);
   const [unreadFirstMessage, setUnreadFirstMessage] = useState<SendbirdMessage | undefined>(undefined);
+  const pendingBottomReachedRef = useRef<{ timeout: number; timestamp: number } | null>(null);
 
   const updateHasSeenNewLine = useCallback(
     (hasSeenNewLine: boolean) => {
@@ -63,14 +64,16 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
 
   const scrollToMessageWithCreatedAt = useFreshCallback(
     (createdAt: number, focusAnimated: boolean, timeout: number): boolean => {
-      const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
-      const isIncludedInList = foundMessageIndex > -1;
+      const foundMessage = props.messages.find((it) => it.createdAt === createdAt);
+      const isIncludedInList = !!foundMessage;
+      pendingBottomReachedRef.current = null;
 
       if (isIncludedInList) {
         if (focusAnimated) {
           setTimeout(() => props.onUpdateSearchItem({ startingPoint: createdAt }), MESSAGE_FOCUS_ANIMATION_DELAY);
         }
-        lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout });
+        pendingBottomReachedRef.current = { timeout, timestamp: Date.now() };
+        lazyScrollToMessageId({ messageId: foundMessage.messageId, animated: true, timeout });
       } else {
         if (props.channel.messageOffsetTimestamp <= createdAt) {
           if (focusAnimated) {
@@ -346,6 +349,23 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     },
   );
 
+  const onBottomReached = useFreshCallback(() => {
+    if (props.hasNext()) {
+      if (pendingBottomReachedRef.current) {
+        const currentTime = Date.now();
+        const elapsedTime = currentTime - pendingBottomReachedRef.current.timestamp;
+
+        const timeoutThreshold = 500;
+        if (elapsedTime >= pendingBottomReachedRef.current.timeout + timeoutThreshold) {
+          props.onBottomReached?.();
+          pendingBottomReachedRef.current = null;
+        }
+      } else {
+        props.onBottomReached?.();
+      }
+    }
+  });
+
   return (
     <ChannelMessageList
       {...props}
@@ -359,6 +379,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
       onPressNewMessagesButton={scrollToBottom}
       onPressScrollToBottomButton={scrollToBottom}
       onPressMarkAsUnreadMessage={onPressMarkAsUnreadMessage}
+      onBottomReached={onBottomReached}
       unreadFirstMessage={unreadFirstMessage}
       unreadMessagesFloatingProps={unreadMessagesFloatingPropsRef.current}
     />

packages/uikit-react-native/src/domain/groupChannel/module/moduleContext.tsx

@@ -46,6 +46,9 @@ export const GroupChannelContexts: GroupChannelContextsType = {
     lazyScrollToIndex: () => {
       // noop
     },
+    lazyScrollToMessageId: () => {
+      // noop
+    },
   } as MessageListContextValue),
 };
 
@@ -68,10 +71,11 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
   const [messageToReply, setMessageToReply] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
-  const { flatListRef, lazyScrollToIndex, lazyScrollToBottom, scrollToMessage } = useScrollActions({
-    messages,
-    onUpdateSearchItem,
-  });
+  const { flatListRef, lazyScrollToIndex, lazyScrollToBottom, scrollToMessage, lazyScrollToMessageId } =
+    useScrollActions({
+      messages,
+      onUpdateSearchItem,
+    });
 
   const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
     if (mode === 'send' || !message) {
@@ -143,6 +147,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
                 scrollToMessage,
                 lazyScrollToIndex,
                 lazyScrollToBottom,
+                lazyScrollToMessageId,
                 onPressReplyMessageInThread,
               }}
             >
@@ -159,9 +164,11 @@ type MessageListContextValue = ContextValue<GroupChannelContextsType['MessageLis
 const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages' | 'onUpdateSearchItem'>) => {
   const { messages, onUpdateSearchItem } = params;
   const flatListRef = useRef<FlatList<SendbirdMessage>>(null);
+  const messagesRef = useRef(messages);
+  messagesRef.current = messages;
 
   // FIXME: Workaround, should run after data has been applied to UI.
-  const lazyScrollToBottom = useFreshCallback<MessageListContextValue['lazyScrollToIndex']>((params) => {
+  const lazyScrollToBottom = useFreshCallback<MessageListContextValue['lazyScrollToBottom']>((params) => {
     if (!flatListRef.current) {
       logFlatListRefWarning();
       return;
@@ -188,6 +195,33 @@ const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages'
     }, params?.timeout ?? 0);
   });
 
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToMessageId = useFreshCallback<MessageListContextValue['lazyScrollToMessageId']>((params) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return;
+    }
+
+    setTimeout(() => {
+      let messageIndex = 0;
+      if (params?.messageId) {
+        const foundMessageIndex = messagesRef.current.findIndex((it) => it.messageId === params.messageId);
+        if (foundMessageIndex > -1) {
+          messageIndex = foundMessageIndex;
+        } else {
+          Logger.warn('Message with messageId not found:', params.messageId);
+          return;
+        }
+      }
+
+      flatListRef.current?.scrollToIndex({
+        index: messageIndex,
+        animated: params?.animated ?? false,
+        viewPosition: params?.viewPosition ?? 0.5,
+      });
+    }, params?.timeout ?? 0);
+  });
+
   const scrollToMessage = useFreshCallback<MessageListContextValue['scrollToMessage']>((messageId, options) => {
     if (!flatListRef.current) {
       logFlatListRefWarning();
@@ -221,6 +255,7 @@ const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages'
     lazyScrollToIndex,
     lazyScrollToBottom,
     scrollToMessage,
+    lazyScrollToMessageId,
   };
 };
 

packages/uikit-react-native/src/domain/groupChannel/types.ts

@@ -186,6 +186,16 @@ export interface GroupChannelContextsType {
       timeout?: number;
       viewPosition?: number;
     }) => void;
+    /**
+     * Call the FlatList function asynchronously to scroll to a message by messageId lazily.
+     * to avoid scrolling before data rendering has been committed.
+     * */
+    lazyScrollToMessageId: (params?: {
+      messageId?: number;
+      animated?: boolean;
+      timeout?: number;
+      viewPosition?: number;
+    }) => void;
 
     onPressReplyMessageInThread?: (parentMessage: SendbirdSendableMessage, startingPoint?: number) => void;
   }>;