chore: apply review when clicking the subtitle

Author: OnestarLee

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

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdMessage, SendbirdSendableMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useIsFirstMount, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
@@ -22,7 +22,9 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   );
 
   const id = useUniqHandlerId('GroupChannelMessageList');
-  const isFirstMount = useIsFirstMount();
+  const isChangedSearchItem = useMemo(() => {
+    return !!props.searchItem;
+  }, [props.searchItem]);
 
   const scrollToMessageWithCreatedAt = useFreshCallback(
     (createdAt: number, focusAnimated: boolean, timeout: number): boolean => {
@@ -93,13 +95,10 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   }, [props.scrolledAwayFromBottom]);
 
   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) {
+    if (isChangedSearchItem && props.searchItem) {
       scrollToMessageWithCreatedAt(props.searchItem.startingPoint, false, MESSAGE_SEARCH_SAFE_SCROLL_DELAY);
     }
-  }, [isFirstMount]);
+  }, [isChangedSearchItem]);
 
   const onPressParentMessage = useFreshCallback(
     (parentMessage: SendbirdMessage, childMessage: SendbirdSendableMessage) => {

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadHeader.tsx

@@ -1,20 +1,13 @@
 import React, { useContext } from 'react';
 import { View } from 'react-native';
 
-import {
-  Icon,
-  PressBox,
-  Text,
-  createStyleSheet,
-  useHeaderStyle,
-  useUIKitTheme,
-} from '@sendbird/uikit-react-native-foundation';
+import { Icon, Text, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelThreadContexts } from '../module/moduleContext';
 import type { GroupChannelThreadProps } from '../types';
 
-const GroupChannelThreadHeader = ({ onPressHeader }: GroupChannelThreadProps['Header']) => {
+const GroupChannelThreadHeader = ({ onPressLeft, onPressSubtitle }: GroupChannelThreadProps['Header']) => {
   const { headerTitle, channel } = useContext(GroupChannelThreadContexts.Fragment);
   const { HeaderComponent } = useHeaderStyle();
   const { STRINGS } = useLocalization();
@@ -26,6 +19,7 @@ const GroupChannelThreadHeader = ({ onPressHeader }: GroupChannelThreadProps['He
 
     return (
       <Text
+        onPress={onPressSubtitle}
         caption2
         style={styles.subtitle}
         color={select({ light: palette.primary300, dark: palette.primary200 })}
@@ -37,22 +31,21 @@ const GroupChannelThreadHeader = ({ onPressHeader }: GroupChannelThreadProps['He
   };
 
   return (
-    <PressBox onPress={onPressHeader}>
-      <HeaderComponent
-        clearTitleMargin
-        title={
-          <View style={styles.titleContainer}>
-            <View style={{ flexShrink: 1 }}>
-              <Text h2 color={colors.onBackground01} numberOfLines={1}>
-                {headerTitle}
-              </Text>
-              {renderSubtitle()}
-            </View>
+    <HeaderComponent
+      clearTitleMargin
+      title={
+        <View style={styles.titleContainer}>
+          <View style={{ flexShrink: 1 }}>
+            <Text h2 color={colors.onBackground01} numberOfLines={1}>
+              {headerTitle}
+            </Text>
+            {renderSubtitle()}
           </View>
-        }
-        left={<Icon icon={'arrow-left'} size={24} />}
-      />
-    </PressBox>
+        </View>
+      }
+      left={<Icon icon={'arrow-left'} size={24} />}
+      onPressLeft={onPressLeft}
+    />
   );
 };
 

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

@@ -27,7 +27,8 @@ export interface GroupChannelThreadProps {
     startingPoint?: number;
     onParentMessageDeleted: () => void;
     onChannelDeleted: () => void;
-    onPressHeader: GroupChannelThreadProps['Header']['onPressHeader'];
+    onPressHeaderLeft: GroupChannelThreadProps['Header']['onPressLeft'];
+    onPressHeaderSubtitle?: GroupChannelThreadProps['Header']['onPressSubtitle'];
     onPressMediaMessage?: GroupChannelThreadProps['MessageList']['onPressMediaMessage'];
 
     onBeforeSendUserMessage?: OnBeforeHandler<SendbirdUserMessageCreateParams>;
@@ -44,7 +45,8 @@ export interface GroupChannelThreadProps {
     sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
   };
   Header: {
-    onPressHeader: () => void;
+    onPressLeft: () => void;
+    onPressSubtitle: () => void;
   };
   ParentMessageInfo: {
     channel: SendbirdGroupChannel;

packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx

@@ -84,6 +84,10 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       }
     });
 
+    useEffect(() => {
+      setInternalSearchItem(searchItem);
+    }, [searchItem]);
+
     const {
       loading,
       messages,

packages/uikit-react-native/src/fragments/createGroupChannelThreadFragment.tsx

@@ -38,7 +38,8 @@ const createGroupChannelThreadFragment = (
   return ({
     renderMessage,
     enableMessageGrouping = true,
-    onPressHeader = NOOP,
+    onPressHeaderLeft = NOOP,
+    onPressHeaderSubtitle = NOOP,
     onPressMediaMessage = NOOP,
     onParentMessageDeleted = NOOP,
     onChannelDeleted = NOOP,
@@ -105,10 +106,15 @@ const createGroupChannelThreadFragment = (
     const onBlurFragment = () => {
       return Promise.allSettled([playerService.reset(), recorderService.reset()]);
     };
-    const _onPressHeader = useFreshCallback(async () => {
+    const _onPressHeaderLeft = useFreshCallback(async () => {
       await onBlurFragment();
       voiceMessageStatusManager.publishAll();
-      onPressHeader();
+      onPressHeaderLeft();
+    });
+    const _onPressHeaderSubtitle = useFreshCallback(async () => {
+      await onBlurFragment();
+      voiceMessageStatusManager.publishAll();
+      onPressHeaderSubtitle();
     });
     const _onPressMediaMessage: NonNullable<GroupChannelThreadProps['MessageList']['onPressMediaMessage']> =
       useFreshCallback(async (message, deleteMessage, uri) => {
@@ -219,7 +225,7 @@ const createGroupChannelThreadFragment = (
         keyboardAvoidOffset={keyboardAvoidOffset}
         threadedMessages={messages}
       >
-        <GroupChannelThreadModule.Header onPressHeader={_onPressHeader} />
+        <GroupChannelThreadModule.Header onPressLeft={_onPressHeaderLeft} onPressSubtitle={_onPressHeaderSubtitle} />
         <StatusComposition loading={loading} LoadingComponent={<GroupChannelThreadModule.StatusLoading />}>
           <GroupChannelThreadModule.MessageList
             channel={channel}

sample/src/screens/uikit/groupChannel/GroupChannelThreadScreen.tsx

@@ -39,10 +39,17 @@ const GroupChannelThreadScreen = () => {
         // Should leave channel, navigate to channel list
         navigation.navigate(Routes.GroupChannelList);
       }}
-      onPressHeader={() => {
+      onPressHeaderLeft={() => {
         // Navigate back
         navigation.goBack();
       }}
+      onPressHeaderSubtitle={() => {
+        // Navigate to parent message
+        navigation.navigate(Routes.GroupChannel, {
+          channelUrl: channel.url,
+          searchItem: { startingPoint: parentMessage.createdAt },
+        });
+      }}
     />
   );
 };