Paul Bailey
cbf6f3c6b6
- Remove router.push() logic that was preventing refresh - Always call router.refresh() after successful deletion - Reset state before refresh to clear 'Deleting...' text - Item now disappears immediately after deletion
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { deleteItem } from '@/lib/actions'
|
|
import { Trash2 } from 'lucide-react'
|
|
import { useToast } from './ToastContainer'
|
|
|
|
interface DeleteItemButtonProps {
|
|
itemId: string
|
|
listId?: string
|
|
variant?: 'full' | 'icon'
|
|
}
|
|
|
|
export default function DeleteItemButton({ itemId, listId, variant = 'full' }: DeleteItemButtonProps) {
|
|
const router = useRouter()
|
|
const { showToast } = useToast()
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
const [showConfirm, setShowConfirm] = useState(false)
|
|
|
|
const handleDelete = async (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setIsDeleting(true)
|
|
try {
|
|
await deleteItem(itemId)
|
|
showToast('Task deleted successfully', 'success')
|
|
setShowConfirm(false)
|
|
setIsDeleting(false)
|
|
// Always refresh to update the UI
|
|
router.refresh()
|
|
} catch (error) {
|
|
console.error('Error deleting item:', error)
|
|
showToast('Failed to delete task', 'error')
|
|
setIsDeleting(false)
|
|
setShowConfirm(false)
|
|
}
|
|
}
|
|
|
|
const handleShowConfirm = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setShowConfirm(true)
|
|
}
|
|
|
|
const handleCancel = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setShowConfirm(false)
|
|
}
|
|
|
|
if (showConfirm) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
className="px-3 sm:px-4 py-2 sm:py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 disabled:bg-red-300 text-white rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
|
|
>
|
|
{isDeleting ? 'Deleting...' : 'Confirm'}
|
|
</button>
|
|
<button
|
|
onClick={handleCancel}
|
|
disabled={isDeleting}
|
|
className="px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (variant === 'icon') {
|
|
return (
|
|
<button
|
|
onClick={handleShowConfirm}
|
|
className="text-gray-400 hover:text-red-600 active:text-red-700 transition-colors tap-target-sm hover:bg-red-50 active:bg-red-100 rounded-lg"
|
|
aria-label="Delete item"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleShowConfirm}
|
|
className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
<Trash2 size={18} className="flex-shrink-0" />
|
|
<span>Delete</span>
|
|
</button>
|
|
)
|
|
}
|