ConversationView: Move deleteMessage to redux

ts/components/conversation/TimelineMessage.tsx

@@ -39,7 +39,10 @@ export type PropsData = {
 } & Omit<MessagePropsData, 'renderingContext' | 'menu'>;
 
 export type PropsActions = {
-  deleteMessage: (id: string) => void;
+  deleteMessage: (options: {
+    conversationId: string;
+    messageId: string;
+  }) => void;
   deleteMessageForEveryone: (id: string) => void;
   toggleForwardMessageModal: (id: string) => void;
   reactToMessage: (
@@ -233,6 +236,7 @@ export function TimelineMessage(props: Props): JSX.Element {
   const handleReact = canReact ? () => toggleReactionPicker() : undefined;
 
   const [hasDOEConfirmation, setHasDOEConfirmation] = useState(false);
+  const [hasDeleteConfirmation, setHasDeleteConfirmation] = useState(false);
 
   const toggleReactionPickerKeyboard = useToggleReactionPicker(
     handleReact || noop
@@ -266,6 +270,26 @@ export function TimelineMessage(props: Props): JSX.Element {
           {i18n('deleteForEveryoneWarning')}
         </ConfirmationDialog>
       )}
+      {hasDeleteConfirmation && (
+        <ConfirmationDialog
+          actions={[
+            {
+              action: () =>
+                deleteMessage({
+                  conversationId,
+                  messageId: id,
+                }),
+              style: 'negative',
+              text: i18n('delete'),
+            },
+          ]}
+          dialogName="TimelineMessage/deleteMessage"
+          i18n={i18n}
+          onClose={() => setHasDeleteConfirmation(false)}
+        >
+          {i18n('deleteWarning')}
+        </ConfirmationDialog>
+      )}
       <Message
         {...props}
         renderingContext="conversation/TimelineItem"
@@ -330,7 +354,7 @@ export function TimelineMessage(props: Props): JSX.Element {
             : undefined
         }
         onForward={canForward ? () => toggleForwardMessageModal(id) : undefined}
-        onDeleteForMe={() => deleteMessage(id)}
+        onDeleteForMe={() => setHasDeleteConfirmation(true)}
         onDeleteForEveryone={
           canDeleteForEveryone ? () => setHasDOEConfirmation(true) : undefined
         }