Untitled

import * as React from "react"; import Button from "@mui/material/Button"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; import { useTranslation } from "react-i18next"; import { Typography } from "@mui/material"; import { CheckCircleOutlined, CheckOutlined, NotificationFilled, StopOutlined, WarningOutlined, } from "@ant-design/icons"; import { notification } from "antd"; import { eventList, glb_store } from "../../../utlis"; interface ModalMajorProps { isOpenModal: boolean; setIsOpenModal: (isOpen: boolean) => void; } export const AlertDialog: React.FC<ModalMajorProps> = ({ isOpenModal, setIsOpenModal, }) => { const [notification, setNotification] = React.useState<{ type: "WARNING" | "SUCCESS" | "ERROR"; message: string; isShowRefuseBtn: boolean; setHandleRefuseFunct: any; setHandleSuccessFunct: any; }>({ type: "SUCCESS", message: "Cannot update module ", isShowRefuseBtn: false, setHandleRefuseFunct: () => {}, setHandleSuccessFunct: () => {}, }); const { t } = useTranslation(); const handleClose = () => { setIsOpenModal(false); }; React.useEffect(() => { const commonEvent = glb_store.commonEvent.subscribe( (msg: { type: string; value: string; messageType: string; message?: any; isShowRefuseBtn?: any; handleSuccessFunct?: () => void; handleRefuseFunct?: () => void; }) => { if (msg.type === eventList.ALERT) { if (!msg.type || !msg.message) return; setNotification({ type: msg?.messageType as "WARNING" | "SUCCESS" | "ERROR", message: msg.message ?? "", isShowRefuseBtn: msg.isShowRefuseBtn ?? false, setHandleRefuseFunct: msg.handleRefuseFunct ?? (() => {}), setHandleSuccessFunct: msg.handleSuccessFunct ?? (() => {}), }); setTimeout(() => { setIsOpenModal(true); }, 200); } } ); return () => commonEvent.unsubscribe(); }, []); const handleRefuse = () => { notification.setHandleRefuseFunct(); handleClose(); }; const handleAgree = () => { notification.setHandleSuccessFunct(); handleClose(); }; return ( <React.Fragment> <Dialog open={isOpenModal} onClose={handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > <div style={{ minWidth: 350 }}> <DialogTitle id="alert-dialog-title"> <div style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <Typography style={{ alignSelf: "center", marginRight: 8, fontWeight: "bold", fontSize: "1.5rem", }} > {t("notifcation")} </Typography> <div style={{ border: notification.type !== "ERROR" ? "solid 2px" : "", borderRadius: "50%", padding: "0.6rem", color: notification.type === "WARNING" ? "#DAA520" : "#008000", }} > {notification.type === "ERROR" && ( <StopOutlined style={{ color: "#FF0000", fontSize: "3rem", }} /> )} {notification.type === "WARNING" && ( <WarningOutlined style={{ color: "#DAA520", fontSize: "3rem", }} /> )} {notification.type === "SUCCESS" && ( <CheckOutlined style={{ color: "#008000", fontSize: "3rem" }} /> )} </div> </div> </DialogTitle> <DialogContent> <div style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <DialogContentText id="alert-dialog-description"> {notification.message} </DialogContentText> </div> </DialogContent> <div style={{ display: "flex", justifyContent: "center", paddingBottom: "1rem", }} > {notification.isShowRefuseBtn && ( <Button variant="contained" color="error" onClick={handleRefuse} sx={{ marginRight: "1rem" }} > {t("refuse")} </Button> )} <Button variant="contained" onClick={handleAgree} autoFocus> {t("agree")} </Button> </div> </div> </Dialog> </React.Fragment> ); };