chore: delete message i18n

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"
-        description={`Are you sure want to delete ${
-          ids.length > 1 ? "these messages" : "this message"
-        }?`}
+        title={t("delete_msg_title")}
+        description={t("delete_msg_desc", { msg: msgTip })}
       >
         {ids.length === 1 && <PreviewMessage mid={ids[0]} />}
       </StyledModal>