@planningcenter/chat-react-native 3.21.2-rc.5 → 3.22.0-rc.0

package/src/components/conversation/message_attachments.tsx

@@ -10,6 +10,7 @@ import { GiphyAttachment } from './attachments/giphy_attachment'
 import { GenericFileAttachment } from './attachments/generic_file_attachment'
 import { ExpandedLink } from './attachments/expanded_link'
 import { ImageAttachment, type MetaProps } from './attachments/image_attachment'
+import { useDeletingIds } from '../../hooks'
 
 export function MessageAttachments(props: {
   attachments: DenormalizedAttachmentResource[]
@@ -19,6 +20,7 @@ export function MessageAttachments(props: {
 }) {
   const styles = useStyles()
   const { attachments, metaProps, onMessageAttachmentLongPress, onMessageLongPress } = props
+  const deletingAttachmentIds = useDeletingIds('deleteAttachment')
   if (!attachments || attachments.length === 0) return null
 
   const imageAttachments = attachments.filter(
@@ -40,6 +42,7 @@ export function MessageAttachments(props: {
             currentImageIndex={index}
             metaProps={metaProps}
             onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+            isDeleting={deletingAttachmentIds.has(image.id)}
           />
         ))}
 
@@ -51,6 +54,7 @@ export function MessageAttachments(props: {
                 key={`${attachment.id}-${index}`}
                 attachment={attachment}
                 onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+                isDeleting={deletingAttachmentIds.has(attachment.id)}
               />
             )
           case 'giphy':
@@ -80,9 +84,11 @@ export function MessageAttachments(props: {
 function MessageAttachment({
   attachment,
   onMessageAttachmentLongPress,
+  isDeleting,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  isDeleting: boolean
 }) {
   const { attributes } = attachment
   const contentType = attributes?.contentType
@@ -94,6 +100,7 @@ function MessageAttachment({
         <VideoAttachment
           attachment={attachment}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          isDeleting={isDeleting}
         />
       )
     case 'audio':
@@ -101,6 +108,7 @@ function MessageAttachment({
         <AudioAttachment
           attachment={attachment}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          isDeleting={isDeleting}
         />
       )
     case 'application':
@@ -108,6 +116,7 @@ function MessageAttachment({
         <GenericFileAttachment
           attachment={attachment}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          isDeleting={isDeleting}
         />
       )
     default:

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './use_animated_message_background_color'
 export * from './use_theme'
 export * from './use_suspense_api'
 export * from './use_current_person'
+export * from './use_deleting_ids'
 export * from './use_font_scale'
 export * from './use_create_android_ripple_color'
 export * from './use_chat_permissions'

package/src/hooks/use_deleting_ids.ts

@@ -0,0 +1,22 @@
+import { useMutationState } from '@tanstack/react-query'
+import { useMemo } from 'react'
+
+type DeletableResourceEvent = 'deleteAttachment'
+
+export function useDeletingIds(event: DeletableResourceEvent): Set<string> {
+  const ids = useMutationState({
+    filters: {
+      mutationKey: [event],
+      status: 'pending',
+    },
+    select: mutation => {
+      // Extract the item ID from the mutation key: [ event, id ]
+      const key = mutation.options.mutationKey
+      return key && Array.isArray(key) && typeof key[1] === 'string' ? key[1] : null
+    },
+  })
+
+  return useMemo(() => {
+    return new Set(ids.filter(id => id !== null))
+  }, [ids])
+}

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -44,10 +44,17 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
       'Are you sure you want to permanently delete this attachment?',
       [
         { text: 'Cancel', style: 'cancel' },
-        { text: 'Delete', style: 'destructive', onPress: () => handleDeleteAttachment() },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            handleDeleteAttachment()
+            navigation.goBack()
+          },
+        },
       ]
     )
-  }, [attachmentName, handleDeleteAttachment])
+  }, [attachmentName, handleDeleteAttachment, navigation])
 
   const handleOpenInBrowser = () => {
     Linking.openURL(attachmentUrl)

package/src/screens/attachment_actions/hooks/useDeleteAttachment.tsx

@@ -1,5 +1,4 @@
 import { Alert } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
 import { useMutation } from '@tanstack/react-query'
 import { useApiClient } from '../../../hooks/use_api_client'
 import { useCallback } from 'react'
@@ -18,7 +17,6 @@ export function useDeleteAttachment({
   attachmentName,
 }: UseDeleteAttachmentProps) {
   const apiClient = useApiClient()
-  const navigation = useNavigation()
   const { refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
 
   const deleteAttachment = useCallback(() => {
@@ -29,10 +27,10 @@ export function useDeleteAttachment({
 
   const { mutate: handleDeleteAttachment } = useMutation({
     mutationFn: deleteAttachment,
+    mutationKey: ['deleteAttachment', attachmentId],
     onSuccess: () => {
       refetch()
       Haptic.notificationSuccess()
-      navigation.goBack()
     },
     onError: () => {
       Alert.alert(