[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>

1 files changed, 24 insertions, 3 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}
+      />
     </>
   )
 }