feat: add scrollToMessage to group channel contexts

Author: bang9

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

@@ -10,13 +10,15 @@ import ChannelMessageList from '../../../components/ChannelMessageList';
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
-import type { GroupChannelProps } from '../types';
+import type { GroupChannelProps, GroupChannelScrollToMessageFunc } from '../types';
 
 const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const toast = useToast();
   const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
-  const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
+  const { setMessageToEdit, setMessageToReply, __internalSetScrollToMessageFunc } = useContext(
+    GroupChannelContexts.Fragment,
+  );
   const { subscribe } = useContext(GroupChannelContexts.PubSub);
 
   const id = useUniqHandlerId('GroupChannelMessageList');
@@ -31,13 +33,31 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   };
 
   // FIXME: Workaround, should run after data has been applied to UI.
-  const lazyScrollToIndex = (index = 0, animated = false, timeout = 0) => {
+  const lazyScrollToIndex = (index = 0, animated = false, timeout = 0, viewPosition = 0.5) => {
     setTimeout(() => {
-      ref.current?.scrollToIndex({ index, animated, viewPosition: 0.5 });
+      ref.current?.scrollToIndex({ index, animated, viewPosition });
     }, timeout);
   };
 
-  const scrollToMessage = useFreshCallback((createdAt: number, focusAnimated = false): boolean => {
+  const scrollToMessage = useFreshCallback<GroupChannelScrollToMessageFunc>((messageId, options) => {
+    const foundMessageIndex = props.messages.findIndex((it) => it.messageId === messageId);
+    const isIncludedInList = foundMessageIndex > -1;
+
+    if (isIncludedInList) {
+      if (options?.focusAnimated) {
+        setTimeout(
+          () => props.onUpdateSearchItem({ startingPoint: props.messages[foundMessageIndex].createdAt }),
+          MESSAGE_FOCUS_ANIMATION_DELAY,
+        );
+      }
+      lazyScrollToIndex(foundMessageIndex, true, 0, options?.viewPosition);
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  const scrollToMessageWithCreatedAt = useFreshCallback((createdAt: number, focusAnimated = false): boolean => {
     const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
     const isIncludedInList = foundMessageIndex > -1;
 
@@ -54,7 +74,6 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
         return false;
       }
     }
-
     return true;
   });
 
@@ -102,17 +121,21 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     });
   }, [props.scrolledAwayFromBottom]);
 
-  // Only trigger once when message list mount with initial props.searchItem
-  // - Search screen + searchItem > mount message list
-  // - Reset message list + searchItem > re-mount message list
   useEffect(() => {
+    // Only trigger once when message list mount with initial props.searchItem
+    // - Search screen + searchItem > mount message list
+    // - Reset message list + searchItem > re-mount message list
     if (isFirstMount && props.searchItem) {
-      scrollToMessage(props.searchItem.startingPoint);
+      scrollToMessageWithCreatedAt(props.searchItem.startingPoint);
     }
   }, [isFirstMount]);
 
+  useEffect(() => {
+    __internalSetScrollToMessageFunc(() => scrollToMessage);
+  }, []);
+
   const onPressParentMessage = useFreshCallback((message: SendbirdMessage) => {
-    const canScrollToParent = scrollToMessage(message.createdAt, true);
+    const canScrollToParent = scrollToMessageWithCreatedAt(message.createdAt, true);
     if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
   });
 

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

@@ -2,6 +2,7 @@ import React, { createContext, useCallback, useState } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import {
+  Logger,
   NOOP,
   SendbirdFileMessage,
   SendbirdGroupChannel,
@@ -14,14 +15,25 @@ import {
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { PubSub } from '../../../utils/pubsub';
-import type { GroupChannelContextsType, GroupChannelModule, GroupChannelPubSubContextPayload } from '../types';
+import type {
+  GroupChannelContextsType,
+  GroupChannelModule,
+  GroupChannelPubSubContextPayload,
+  GroupChannelScrollToMessageFunc,
+} from '../types';
 
 export const GroupChannelContexts: GroupChannelContextsType = {
   Fragment: createContext({
     headerTitle: '',
     channel: {} as SendbirdGroupChannel,
     setMessageToEdit: NOOP,
     setMessageToReply: NOOP,
+    scrollToMessage: (_: number) => {
+      // noop
+    },
+    __internalSetScrollToMessageFunc: (_: () => GroupChannelScrollToMessageFunc) => {
+      // noop
+    },
   }),
   TypingIndicator: createContext({
     typingUsers: [] as SendbirdUser[],
@@ -48,6 +60,11 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
   const [messageToReply, setMessageToReply] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+  const [scrollToMessage, __internalSetScrollToMessageFunc] = useState<GroupChannelScrollToMessageFunc>(() => () => {
+    Logger.error(
+      'You should render `src/domain/groupChannel/component/GroupChannelMessageList.tsx` component first to use scrollToMessage.',
+    );
+  });
 
   const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
     if (mode === 'send' || !message) {
@@ -99,6 +116,8 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
           setMessageToEdit: useCallback((message) => updateInputMode('edit', message), []),
           messageToReply,
           setMessageToReply: useCallback((message) => updateInputMode('reply', message), []),
+          scrollToMessage,
+          __internalSetScrollToMessageFunc,
         }}
       >
         <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>

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

@@ -19,6 +19,25 @@ import type { ChannelMessageListProps } from '../../components/ChannelMessageLis
 import type { CommonComponent } from '../../types';
 import type { PubSub } from '../../utils/pubsub';
 
+/**
+ * Function that scrolls to a message within a group channel.
+ * @param messageId {number} - The id of the message to scroll.
+ * @param options {object} - Scroll options (optional).
+ * @param options.focusAnimated {boolean} - Enable a shake animation on the message component upon completion of scrolling.
+ * @param options.viewPosition {number} - Position information to adjust the visible area during scrolling. bottom(0) ~ top(1.0)
+ *
+ * @example
+ * ```
+ *   const { scrollToMessage } = useContext(GroupChannelContexts.Fragment);
+ *   const messageIncludedInMessageList = scrollToMessage(lastMessage.messageId, { focusAnimated: true, viewPosition: 1 });
+ *   if (!messageIncludedInMessageList) console.warn('Message not found in the message list.');
+ * ```
+ * */
+export type GroupChannelScrollToMessageFunc = (
+  messageId: number,
+  options?: { focusAnimated?: boolean; viewPosition?: number },
+) => void;
+
 export interface GroupChannelProps {
   Fragment: {
     channel: SendbirdGroupChannel;
@@ -112,6 +131,8 @@ export interface GroupChannelContextsType {
     setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
     messageToReply?: SendbirdUserMessage | SendbirdFileMessage;
     setMessageToReply: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+    scrollToMessage: GroupChannelScrollToMessageFunc;
+    __internalSetScrollToMessageFunc: (func: () => GroupChannelScrollToMessageFunc) => void;
   }>;
   TypingIndicator: React.Context<{
     typingUsers: SendbirdUser[];