feat: auto delete msg

src/routes/settingDM/DeleteConfirmModal.tsx

@@ -0,0 +1,54 @@
+import { useEffect, FC } from "react";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+import Modal from "../../common/component/Modal";
+import { useLazyDeleteUserQuery } from "../../app/services/user";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+  id: number;
+  closeModal: (cid?: number) => void;
+}
+
+const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
+  const { t } = useTranslation("setting");
+  const { t: ct } = useTranslation();
+  const navigateTo = useNavigate();
+  const [deleteUser, { isLoading, isSuccess }] = useLazyDeleteUserQuery();
+  const handleDelete = () => {
+    deleteUser(id);
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("delete user successfully!");
+      closeModal();
+      navigateTo("/chat");
+    }
+  }, [isSuccess]);
+
+  if (!id) return null;
+  return (
+    <Modal id="modal-modal">
+      <StyledModal
+        className="compact"
+        title={t("dm.delete")}
+        description={t("dm.delete_desc")}
+        buttons={
+          <>
+            <Button onClick={closeModal.bind(null, undefined)} className="cancel">
+              {ct("action.cancel")}
+            </Button>
+            <Button onClick={handleDelete} className="danger">
+              {isLoading ? "Deleting" : ct("action.remove")}
+            </Button>
+          </>
+        }
+      ></StyledModal>
+    </Modal>
+  );
+};
+
+export default DeleteConfirmModal;