Tristan Yang
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
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(ct("tip.delete"));
|
|
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;
|