ConfirmationModal.tsx)¶

Overview¶

A confirmation modal component that provides a dialog for confirming user actions with loading state and error handling.

Features¶

Modal dialog display
Loading state handling
Error handling
Customizable title
Customizable message
Primary action button
Cancel button
Close button
Loading spinner
Bootstrap styling

Dependencies¶

import React, { useEffect, useState } from 'react'
import { Modal, Button, Spinner } from 'react-bootstrap'

Props¶

interface ConfirmationModalProps {
  show: boolean;
  onClose: () => void;
  onConfirm: () => Promise<any>;
  message: string;
  title: string;
  primaryButton: string;
}

Implementation¶

State Management¶

const [loading, setLoading] = useState(false);

Methods¶

const handleConfirm = async () => {
  setLoading(true);
  try {
    await onConfirm();
    onClose();
  } catch (error) {
    console.error('Error uploading PDF:', error);
    alert('Failed to upload PDF. Please try again later.');
    setLoading(false);
  } finally {
    setLoading(false);
  }
};

Unique Functionality¶

Async confirmation handling
Loading state management
Error state handling
Modal visibility control
Button state management

HTML Structure¶

<Modal show={show} onHide={onClose}>
  <Modal.Header closeButton>
    <Modal.Title>{title}</Modal.Title>
  </Modal.Header>
  <Modal.Body>{message}</Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={onClose} disabled={loading}>
      Cancel
    </Button>
    <Button variant="primary" onClick={handleConfirm} disabled={loading}>
      {loading ? 
        <> 
          <Spinner animation="border" size="sm" /> 
          {primaryButton}
        </> 
        : primaryButton
      }
    </Button>
  </Modal.Footer>
</Modal>

API Integration¶

No direct API integration required.

Components Used¶

Modal from react-bootstrap
Button from react-bootstrap
Spinner from react-bootstrap

Notes¶

Uses Bootstrap Modal component
Handles async confirmation
Manages loading states
Provides error handling
Disables buttons during loading
Shows loading spinner