MessageVerifyDialog.jsx

import React, { useEffect, useState } from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Verify from './user/Verify';

function MessageVerifyDialog({ messageData, onClose, onSuccess }) {
  const isConfirmation = typeof onSuccess !== 'undefined';

  const [open, setOpen] = useState(false);

  const handleCancel = () => {
    setOpen(false);
    onClose();
  };

  const handleOk = () => {
    setOpen(false);
    if (isConfirmation) {
      onSuccess(messageData?.data);
    } else {
      onClose();
    }
  };

  useEffect(() => {
    if (messageData?.message) {
      setOpen(true);
    }
  }, [messageData]);

  return (
    <>
      <Dialog
        open={open}
        onClose={handleCancel}
        aria-labelledby='message-dialog-title'>
        <DialogTitle id='message-dialog-title'>
          {messageData?.title || ''}
        </DialogTitle>
        <DialogContent>
          <DialogContentText>
            <Verify />
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          {isConfirmation && <Button onClick={handleCancel}>Cancel</Button>}
          <Button onClick={handleOk} color='primary'>
            OK
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export default MessageVerifyDialog;