[Clipclops] Delete message in dialog (#3849)

* delete and copy

* add retry dialog if message send fails

* add layout animation

* fix `nextMessage` being incorrect

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

2 files changed, 36 insertions, 15 deletions

diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx
index 1e1733609..d2a7d147d 100644
--- a/src/components/dms/MessageMenu.tsx
+++ b/src/components/dms/MessageMenu.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
+import {LayoutAnimation, Pressable, View} from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useChat} from 'state/messages'
+import {ConvoStatus} from 'state/messages/convo'
 import {useSession} from 'state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
@@ -31,7 +33,9 @@ export let MessageMenu = ({
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()
+  const chat = useChat()
   const deleteControl = usePromptControl()
+  const retryDeleteControl = usePromptControl()
 
   const isFromSelf = message.sender?.did === currentAccount?.did
 
@@ -44,8 +48,14 @@ export let MessageMenu = ({
   }, [_, message.text])
 
   const onDelete = React.useCallback(() => {
-    // TODO delete the message
-  }, [])
+    if (chat.status !== ConvoStatus.Ready) return
+
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    chat
+      .deleteMessage(message.id)
+      .then(() => Toast.show(_(msg`Message deleted`)))
+      .catch(() => retryDeleteControl.open())
+  }, [_, chat, message.id, retryDeleteControl])
 
   const onReport = React.useCallback(() => {
     // TODO report the message
@@ -114,6 +124,17 @@ export let MessageMenu = ({
         confirmButtonColor="negative"
         onConfirm={onDelete}
       />
+
+      <Prompt.Basic
+        control={retryDeleteControl}
+        title={_(msg`Failed to delete message`)}
+        description={_(
+          msg`An error occurred while trying to delete the message. Please try again.`,
+        )}
+        confirmButtonCta={_(msg`Retry`)}
+        confirmButtonColor="negative"
+        onConfirm={onDelete}
+      />
     </>
   )
 }
diff --git a/src/state/messages/convo.ts b/src/state/messages/convo.ts
index a68eddb7f..cf15550d1 100644
--- a/src/state/messages/convo.ts
+++ b/src/state/messages/convo.ts
@@ -92,7 +92,7 @@ export type ConvoState =
       convo: ChatBskyConvoDefs.ConvoView
       error: undefined
       isFetchingHistory: boolean
-      deleteMessage: (messageId: string) => void
+      deleteMessage: (messageId: string) => Promise<void>
       sendMessage: (
         message: ChatBskyConvoSendMessage.InputSchema['message'],
       ) => void
@@ -104,11 +104,11 @@ export type ConvoState =
       convo: ChatBskyConvoDefs.ConvoView
       error: undefined
       isFetchingHistory: boolean
-      deleteMessage: (messageId: string) => void
+      deleteMessage: (messageId: string) => Promise<void>
       sendMessage: (
         message: ChatBskyConvoSendMessage.InputSchema['message'],
-      ) => void
-      fetchMessageHistory: () => void
+      ) => Promise<void>
+      fetchMessageHistory: () => Promise<void>
     }
   | {
       status: ConvoStatus.Backgrounded
@@ -116,11 +116,11 @@ export type ConvoState =
       convo: ChatBskyConvoDefs.ConvoView
       error: undefined
       isFetchingHistory: boolean
-      deleteMessage: (messageId: string) => void
+      deleteMessage: (messageId: string) => Promise<void>
       sendMessage: (
         message: ChatBskyConvoSendMessage.InputSchema['message'],
-      ) => void
-      fetchMessageHistory: () => void
+      ) => Promise<void>
+      fetchMessageHistory: () => Promise<void>
     }
   | {
       status: ConvoStatus.Resuming
@@ -128,11 +128,11 @@ export type ConvoState =
       convo: ChatBskyConvoDefs.ConvoView
       error: undefined
       isFetchingHistory: boolean
-      deleteMessage: (messageId: string) => void
+      deleteMessage: (messageId: string) => Promise<void>
       sendMessage: (
         message: ChatBskyConvoSendMessage.InputSchema['message'],
-      ) => void
-      fetchMessageHistory: () => void
+      ) => Promise<void>
+      fetchMessageHistory: () => Promise<void>
     }
   | {
       status: ConvoStatus.Error
@@ -776,7 +776,7 @@ export class Convo {
         }
         return true
       })
-      .map((item, i) => {
+      .map((item, i, arr) => {
         let nextMessage = null
         const isMessage = isConvoItemMessage(item)
 
@@ -786,7 +786,7 @@ export class Convo {
             (ChatBskyConvoDefs.isMessageView(item.message) ||
               ChatBskyConvoDefs.isDeletedMessageView(item.message))
           ) {
-            const next = items[i + 1]
+            const next = arr[i + 1]
 
             if (
               isConvoItemMessage(next) &&