Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { useState } from 'react'
import { Trash2, AlertTriangle, Loader2 } from 'lucide-react'
import { toast } from 'sonner'
import { api, type DeletionPreview } from '../../api/client'
import UserDeletionModal from './UserDeletionModal'
interface DeleteAccountSectionProps {
profileId: number
onDeleted: () => void
}
export default function DeleteAccountSection({ profileId, onDeleted }: DeleteAccountSectionProps) {
const [showModal, setShowModal] = useState(false)
const [preview, setPreview] = useState<DeletionPreview | null>(null)
const [loading, setLoading] = useState(false)
const [deleting, setDeleting] = useState(false)
const handleDeleteClick = async () => {
setLoading(true)
try {
const data = await api.profiles.deletionPreview(profileId)
setPreview(data)
setShowModal(true)
} catch {
toast.error('Failed to load account info')
} finally {
setLoading(false)
}
}
const handleConfirm = async () => {
setDeleting(true)
try {
await api.profiles.delete(profileId)
toast.success('Account deleted')
onDeleted()
} catch {
toast.error('Failed to delete account')
setDeleting(false)
}
}
const handleCancel = () => {
setShowModal(false)
setPreview(null)
}
return (
<div className="rounded-lg border border-destructive/30 bg-card p-4">
<div className="flex items-center gap-2 text-destructive">
<AlertTriangle className="h-5 w-5" />
<h2 className="text-lg font-medium">Delete Account</h2>
</div>
<p className="mt-2 text-sm text-muted-foreground">
Permanently delete your account and all associated data. This cannot be undone.
</p>
<button
onClick={handleDeleteClick}
disabled={loading}
className="mt-4 flex items-center gap-2 rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 disabled:cursor-not-allowed disabled:opacity-50"
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Trash2 className="h-4 w-4" />
)}
Delete My Account
</button>
{showModal && preview && (
<UserDeletionModal
preview={preview}
deleting={deleting}
onConfirm={handleConfirm}
onCancel={handleCancel}
/>
)}
</div>
)
}
|