chore: delete message i18n

public/locales/en/chat.json

@@ -30,5 +30,10 @@
 
   "send_to": "Send To",
   "edited": "edited",
-  "license_tip": "Your license has reached the limit, upgrade the License or contact the Admin!"
+  "license_tip": "Your license has reached the limit, upgrade the License or contact the Admin!",
+
+  "delete_msg_title": "Delete Message",
+  "delete_msg_desc": "Are you sure want to delete {{msg}}?",
+  "delete_msg_this": "this message",
+  "delete_msg_these": "these messages"
 }

public/locales/zh/chat.json

@@ -31,5 +31,10 @@
 
   "send_to": "发送至",
   "edited": "已编辑",
-  "license_tip": "您的使用人数已达证书限制上限，请升级证书或者联系管理员！"
+  "license_tip": "您的使用人数已达证书限制上限，请升级证书或者联系管理员！",
+
+  "delete_msg_title": "删除消息",
+  "delete_msg_desc": "确定删除{{msg}}？",
+  "delete_msg_this": "此消息",
+  "delete_msg_these": "这些消息"
 }

src/common/component/DeleteMessageConfirm.tsx

@@ -1,4 +1,5 @@
 import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
 import useDeleteMessage from "../hook/useDeleteMessage";
 import StyledModal from "./styled/Modal";
 import Button from "./styled/Button";
@@ -11,6 +12,8 @@ interface Props {
 }
 
 const DeleteMessageConfirmModal: FC<Props> = ({ closeModal, mids = [] }) => {
+  const { t } = useTranslation("chat");
+  const { t: ct } = useTranslation();
   const mid_arr: number[] = mids ? (Array.isArray(mids) ? mids : [mids]) : [];
   const [ids] = useState(mid_arr);
   const { deleteMessage, isDeleting } = useDeleteMessage();
@@ -20,23 +23,22 @@ const DeleteMessageConfirmModal: FC<Props> = ({ closeModal, mids = [] }) => {
   };
 
   if (ids.length == 0) return null;
+  const msgTip = ids.length > 1 ? t("delete_msg_these") : t("delete_msg_this");
   return (
     <Modal>
       <StyledModal
         buttons={
           <>
             <Button className="cancel" onClick={closeModal.bind(null, false)}>
-              Cancel
+              {ct("action.cancel")}
             </Button>
             <Button disabled={isDeleting} onClick={handleDelete} className="danger">
-              {isDeleting ? "Deleting" : `Delete`}
+              {isDeleting ? "Deleting" : ct("action.remove")}
             </Button>
           </>
         }
-        title="Delete Message"
+        title={t("delete_msg_title")}
-        description={`Are you sure want to delete ${
+        description={t("delete_msg_desc", { msg: msgTip })}
-          ids.length > 1 ? "these messages" : "this message"
-        }?`}
       >
         {ids.length === 1 && <PreviewMessage mid={ids[0]} />}
       </StyledModal>