// DeleteConfirmModal.js // Confirmation dialog for deleting Archer templates. // Identifies the template by vendor/platform/model before deletion. // On confirm: calls DELETE API, invokes onConfirm callback, closes. // On cancel: dismisses dialog, leaves template unchanged. import React, { useState, useEffect, useRef, useCallback } from 'react'; import { AlertTriangle, Trash2 } from 'lucide-react'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; /** * DeleteConfirmModal — confirmation dialog for deleting an Archer template. * * Props: * template {object|null} The template to delete (contains id, vendor, platform, model). * When null/undefined, modal is hidden. * onConfirm {function} Callback after successful delete (refresh list). * onCancel {function} Callback to close without deleting. */ export default function DeleteConfirmModal({ template, onConfirm, onCancel }) { const [deleting, setDeleting] = useState(false); const [error, setError] = useState(null); const cancelRef = useRef(null); // Focus cancel button on open and handle Escape key useEffect(() => { if (!template) return; const timer = setTimeout(() => cancelRef.current?.focus(), 50); const handleKey = (e) => { if (e.key === 'Escape' && !deleting) onCancel?.(); }; document.addEventListener('keydown', handleKey); return () => { clearTimeout(timer); document.removeEventListener('keydown', handleKey); }; }, [template, deleting, onCancel]); // Reset state when template changes (new modal open) useEffect(() => { if (template) { setDeleting(false); setError(null); } }, [template]); const handleConfirm = useCallback(async () => { if (!template) return; setDeleting(true); setError(null); try { const res = await fetch(`${API_BASE}/archer-templates/${template.id}`, { method: 'DELETE', credentials: 'include', }); if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data.error || `Delete failed (${res.status})`); } onConfirm?.(); } catch (err) { setError(err.message); setDeleting(false); } }, [template, onConfirm]); if (!template) return null; return (
{ if (e.target === e.currentTarget && !deleting) onCancel?.(); }} >
{/* Header */}
Delete Template
{/* Body */}

Are you sure you want to delete this template? This action cannot be undone.

Vendor {template.vendor} Platform {template.platform} Model {template.model}
{/* Error banner */} {error && (
{error}
)} {/* Actions */}
); }