From ab41ad326805f4d22efa45f92014f8ffe5dd02b9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 20 Mar 2022 18:01:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E6=81=AF=E7=9A=84=E6=92=A4?=
 =?UTF-8?q?=E5=9B=9E=E4=B8=8E=E5=88=A0=E9=99=A4=E9=9C=80=E8=A6=81=E4=BA=8C?=
 =?UTF-8?q?=E6=AC=A1=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../useChatMessageItemAction.tsx              | 11 ++--
 web/src/components/Modal.tsx                  | 52 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx b/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx
index 847cca8b..fae250f3 100644
--- a/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx
@@ -11,6 +11,7 @@ import {
   useGroupInfoContext,
   useUserInfo,
 } from 'tailchat-shared';
+import { openReconfirmModalP } from '@/components/Modal';
 
 /**
  * 消息的会话操作
@@ -23,12 +24,14 @@ export function useChatMessageItemAction(
   const groupInfo = useGroupInfoContext();
   const userInfo = useUserInfo();
 
-  const [, handleRecallMessage] = useAsyncRequest(() => {
-    return recallMessage(payload._id);
+  const [, handleRecallMessage] = useAsyncRequest(async () => {
+    await openReconfirmModalP();
+    await recallMessage(payload._id);
   }, [payload._id]);
 
-  const [, handleDeleteMessage] = useAsyncRequest(() => {
-    return deleteMessage(payload._id);
+  const [, handleDeleteMessage] = useAsyncRequest(async () => {
+    await openReconfirmModalP();
+    await deleteMessage(payload._id);
   }, [payload._id]);
 
   const isGroupOwner = groupInfo && groupInfo.owner === userInfo?._id; //
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 198fe736..f1d09b10 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -6,13 +6,14 @@ import _pull from 'lodash/pull';
 import _isString from 'lodash/isString';
 import _noop from 'lodash/noop';
 import { PortalAdd, PortalRemove } from './Portal';
-import { Typography } from 'antd';
+import { Button, Typography } from 'antd';
 import { Icon } from '@/components/Icon';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { stopPropagation } from '@/utils/dom-helper';
 import { ErrorBoundary } from './ErrorBoundary';
+import { t } from 'tailchat-shared';
 
 import './Modal.less';
 
@@ -155,6 +156,55 @@ export function openModal(
   return key;
 }
 
+interface OpenReconfirmModalProps {
+  onConfirm: () => void;
+  onCancel?: () => void;
+}
+
+/**
+ * 打开再次确认操作modal
+ */
+export function openReconfirmModal(props: OpenReconfirmModalProps) {
+  const key = openModal(
+    <ModalWrapper title={t('确认要进行该操作么?')}>
+      <h3 className="text-center pb-6">{t('该操作无法被撤回')}</h3>
+      <div className="space-x-2 text-right">
+        <Button
+          onClick={() => {
+            props.onCancel?.();
+            closeModal(key);
+          }}
+        >
+          {t('取消')}
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            props.onConfirm();
+            closeModal(key);
+          }}
+        >
+          {t('确认')}
+        </Button>
+      </div>
+    </ModalWrapper>
+  );
+}
+/**
+ * 打开再次确认操作modal(Promise版本)
+ * TODO: 需要检查一下持久pending的promise会不会导致内存泄露
+ */
+export function openReconfirmModalP(
+  props?: Omit<OpenReconfirmModalProps, 'onConfirm'>
+) {
+  return new Promise<void>((resolve) => {
+    openReconfirmModal({
+      ...props,
+      onConfirm: resolve,
+    });
+  });
+}
+
 /**
  * 获取modal上下文
  */