@planningcenter/chat-react-native 3.16.0-rc.3 → 3.16.0-rc.5

package/src/screens/message_actions_screen.tsx

@@ -14,6 +14,7 @@ import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard, Haptic } from '../utils/native_adapters'
 import { MessageResource } from '../types'
+import { REPLIES_FEATURE_ENABLED } from '../utils'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -24,10 +25,11 @@ export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
   conversation_id: number
   canDeleteNonAuthoredMessages?: boolean
+  inReplyScreen?: boolean
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
-  const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params
+  const { conversation_id, message_id, canDeleteNonAuthoredMessages, inReplyScreen } = route.params
 
   const { messages, refetch } = useConversationMessages(
     { conversation_id },
@@ -43,6 +45,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       conversation_id={conversation_id}
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
+      inReplyScreen={inReplyScreen}
     />
   )
 }
@@ -52,11 +55,13 @@ function MessageActionsScreenContent({
   conversation_id,
   canDeleteNonAuthoredMessages,
   refetchMessages,
+  inReplyScreen,
 }: {
   message: MessageResource
   conversation_id: number
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
+  inReplyScreen?: boolean
 }) {
   const navigation = useNavigation()
   const apiClient = useApiClient()
@@ -83,6 +88,18 @@ function MessageActionsScreenContent({
     return ''
   }
 
+  const handleReplyPress = useCallback(() => {
+    navigation.goBack()
+    // Waits for the modal to be dismissed before pushing the reply screen
+    requestAnimationFrame(() => {
+      navigation.navigate('ConversationReply', {
+        conversation_id,
+        reply_root_id: message.replyRootId || message.id,
+        // TODO: Update title param with reply root author
+      })
+    })
+  }, [navigation, conversation_id, message.id, message.replyRootId])
+
   const handleCopyPress = () => {
     Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')
     navigation.goBack()
@@ -163,6 +180,15 @@ function MessageActionsScreenContent({
         ))}
       </View>
       <View style={styles.actions}>
+        {REPLIES_FEATURE_ENABLED && !inReplyScreen && (
+          <FormSheet.Action
+            onPress={handleReplyPress}
+            title="Reply to message"
+            iconName="registrations.undo"
+            accessibilityHint="Navigates to the reply screen"
+            accessibilityRole="link"
+          />
+        )}
         <FormSheet.Action
           onPress={handleCopyPress}
           title="Copy text"

package/src/types/jolt_events/message_events.ts

@@ -16,6 +16,8 @@ interface BaseMessageEventData extends Record<string, unknown> {
     html: string
     attachments: DenormalizedAttachmentResource[]
     idempotent_key?: string | null
+    reply_count: number
+    reply_root_id: string | null
   }
 }
 

package/src/types/resources/message.ts

@@ -15,6 +15,8 @@ export interface MessageResource {
   attachments: DenormalizedAttachmentResource[]
   author: PersonResource
   reactionCounts: ReactionCountResource[]
+  replyCount: number
+  replyRootId?: string | null
 
   // Custom Local Properties we set for rendering
   renderAuthor?: boolean

package/src/utils/cache/optimistically_create_message.ts

@@ -48,6 +48,8 @@ export function optimisticallyCreateMessage({
     myLatestInConversation: true,
     lastInGroup: true,
     pending: true,
+    replyCount: 0,
+    replyRootId: null,
   }
 
   // Add the optimistic message to the cache

package/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from './pluralize'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
 export * from './assert_keys_are_numbers'
+export * from './replies_local_feature_flag'

package/src/utils/jolt/transform_message_event_data_to_message_resource.ts

@@ -27,5 +27,7 @@ export function transformMessageEventDataToMessageResource({
       avatar: data.author_avatar,
     },
     reactionCounts: [],
+    replyCount: data.reply_count || 0,
+    replyRootId: data.reply_root_id || null,
   }
 }

package/src/utils/replies_local_feature_flag.ts

@@ -0,0 +1,2 @@
+// TODO: Replace this whole file with the flipper flag
+export const REPLIES_FEATURE_ENABLED = false