@planningcenter/chat-react-native 3.17.0-rc.1 → 3.17.0

package/src/navigation/index.tsx

@@ -187,9 +187,9 @@ export const ChatStack = createNativeStackNavigator({
     },
     ConversationReply: {
       screen: ConversationScreen,
-      options: {
-        title: 'Reply', // TODO: Get root reply author
-      },
+      options: ({ route }) => ({
+        title: (route.params as ConversationRouteProps)?.title ?? 'Reply',
+      }),
     },
     TeamConversation: {
       screen: TeamConversationScreen,

package/src/screens/conversation_screen.tsx

@@ -40,7 +40,7 @@ import { REPLIES_FEATURE_ENABLED } from '../utils'
 export type ConversationRouteProps = {
   conversation_id: number
   reply_root_id?: string | null
-  replyRootAuthor?: string
+  reply_root_author_name?: string
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
@@ -55,7 +55,8 @@ export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id, reply_root_id } = route.params
+  const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
+    route.params
   const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
@@ -73,6 +74,10 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
   const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
+  const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
+  const replyHeaderTitle = replyRootAuthorFirstName
+    ? `Reply to ${replyRootAuthorFirstName}`
+    : 'Reply'
 
   const listRef = useRef<FlatList>(null)
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
@@ -89,14 +94,18 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   }, [])
 
   useEffect(() => {
-    if (reply_root_id) return
-
-    navigation.setParams({
-      title: title,
-      badge: badges?.[0],
-      deleted: conversation?.deleted,
-    })
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id])
+    if (reply_root_id) {
+      navigation.setParams({
+        title: replyHeaderTitle,
+      })
+    } else {
+      navigation.setParams({
+        title: title,
+        badge: badges?.[0],
+        deleted: conversation?.deleted,
+      })
+    }
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -167,6 +176,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
         {canReply ? (
           <MessageForm.Root
+            replyRootAuthorFirstName={replyRootAuthorFirstName}
             conversation={conversation}
             replyRootId={reply_root_id}
             currentlyEditingMessage={currentlyEditingMessage}

package/src/screens/message_actions_screen.tsx

@@ -23,13 +23,20 @@ export const MessageActionsScreenOptions = getFormSheetScreenOptions({
 
 export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
+  reply_root_author_name?: string
   conversation_id: number
   canDeleteNonAuthoredMessages?: boolean
   inReplyScreen?: boolean
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
-  const { conversation_id, message_id, canDeleteNonAuthoredMessages, inReplyScreen } = route.params
+  const {
+    conversation_id,
+    message_id,
+    canDeleteNonAuthoredMessages,
+    inReplyScreen,
+    reply_root_author_name,
+  } = route.params
 
   const { messages, refetch } = useConversationMessages(
     { conversation_id },
@@ -46,6 +53,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
       inReplyScreen={inReplyScreen}
+      replyRootAuthorName={reply_root_author_name}
     />
   )
 }
@@ -56,12 +64,14 @@ function MessageActionsScreenContent({
   canDeleteNonAuthoredMessages,
   refetchMessages,
   inReplyScreen,
+  replyRootAuthorName,
 }: {
   message: MessageResource
   conversation_id: number
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
   inReplyScreen?: boolean
+  replyRootAuthorName?: string
 }) {
   const navigation = useNavigation()
   const apiClient = useApiClient()
@@ -95,10 +105,10 @@ function MessageActionsScreenContent({
       navigation.navigate('ConversationReply', {
         conversation_id,
         reply_root_id: message.replyRootId || message.id,
-        // TODO: Update title param with reply root author
+        reply_root_author_name: replyRootAuthorName,
       })
     })
-  }, [navigation, conversation_id, message.id, message.replyRootId])
+  }, [navigation, conversation_id, message.id, message.replyRootId, replyRootAuthorName])
 
   const handleCopyPress = () => {
     Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')