refactor: replace window alerts with modals

Signed-off-by: Abhinav Sinha <[email protected]>
2026-06-18 01:49:10 +05:30
parent 35dfeb7208
commit ec27b01531
7 changed files with 270 additions and 16 deletions
@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react'
+import styles from './ConfirmModal.module.css'
+
+/**
+ * ConfirmModal — drop-in replacement for window.confirm.
+ *
+ * Usage via the useConfirm hook (see useConfirm.js).
+ * Props:
+ *   open        boolean
+ *   title       string
+ *   message     string
+ *   confirmLabel  string  (default "Confirm")
+ *   cancelLabel   string  (default "Cancel")
+ *   danger      boolean  (red confirm button)
+ *   onConfirm   () => void
+ *   onCancel    () => void
+ */
+export default function ConfirmModal({
+  open, title, message,
+  confirmLabel = 'Confirm', cancelLabel = 'Cancel',
+  danger = false,
+  onConfirm, onCancel,
+}) {
+  const confirmRef = useRef(null)
+
+  useEffect(() => {
+    if (open) confirmRef.current?.focus()
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = e => {
+      if (e.key === 'Escape') onCancel()
+      if (e.key === 'Enter') onConfirm()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, onConfirm, onCancel])
+
+  if (!open) return null
+
+  return (
+    <div className={styles.overlay} onMouseDown={e => e.target === e.currentTarget && onCancel()}>
+      <div className={styles.modal} role="dialog" aria-modal="true">
+        {title && <div className={styles.header}>{title}</div>}
+        {message && <div className={styles.body}>{message}</div>}
+        <div className={styles.actions}>
+          <button className={styles.cancelBtn} onClick={onCancel}>{cancelLabel}</button>
+          <button
+            ref={confirmRef}
+            className={`${styles.confirmBtn} ${danger ? styles.danger : ''}`}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}