jason/breedr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dogs): add delete button with confirm modal on DogList

Browse Source
This commit is contained in:
jason
2026-03-09 22:58:41 -05:00
parent 0ade8586f9
commit e44883b5e0
1 changed files with 147 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
client/src/pages/DogList.jsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { Dog, Plus, Search, Calendar, Hash, ArrowRight } from 'lucide-react'
import { Link, useNavigate } from 'react-router-dom'
import { Dog, Plus, Search, Calendar, Hash, ArrowRight, Trash2 } from 'lucide-react'
import axios from 'axios'
import DogForm from '../components/DogForm'
import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'
@@ -12,6 +12,8 @@ function DogList() {
const [sexFilter, setSexFilter] = useState('all')
const [loading, setLoading] = useState(true)
const [showAddModal, setShowAddModal] = useState(false)
const [deleteTarget, setDeleteTarget] = useState(null) // { id, name }
const [deleting, setDeleting] = useState(false)
useEffect(() => { fetchDogs() }, [])
useEffect(() => { filterDogs() }, [dogs, search, sexFilter])
@@ -43,6 +45,21 @@ function DogList() {
const handleSave = () => { fetchDogs() }
const handleDelete = async () => {
if (!deleteTarget) return
setDeleting(true)
try {
await axios.delete(`/api/dogs/${deleteTarget.id}`)
setDogs(prev => prev.filter(d => d.id !== deleteTarget.id))
setDeleteTarget(null)
} catch (err) {
console.error('Delete failed:', err)
alert('Failed to delete dog. Please try again.')
} finally {
setDeleting(false)
}
}
const calculateAge = (birthDate) => {
if (!birthDate) return null
const today = new Date()
@@ -55,7 +72,6 @@ function DogList() {
return `${years}y ${months}mo`
}
// A dog has champion blood if sire or dam is a champion
const hasChampionBlood = (dog) =>
(dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion)
@@ -132,18 +148,15 @@ function DogList() {
) : (
<div style={{ display: 'grid', gap: '1rem' }}>
{filteredDogs.map(dog => (
<Link
<div
key={dog.id}
to={`/dogs/${dog.id}`}
className="card"
style={{
padding: '1rem',
textDecoration: 'none',
display: 'flex',
gap: '1rem',
alignItems: 'center',
transition: 'var(--transition)',
cursor: 'pointer'
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = 'var(--primary)'
@@ -157,8 +170,12 @@ function DogList() {
}}
>
{/* Avatar */}
<Link
to={`/dogs/${dog.id}`}
style={{ flexShrink: 0, textDecoration: 'none' }}
>
<div style={{
width: '80px', height: '80px', flexShrink: 0,
width: '80px', height: '80px',
borderRadius: 'var(--radius)',
background: 'var(--bg-primary)',
border: dog.is_champion
@@ -184,9 +201,13 @@ function DogList() {
<Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
)}
</div>
</Link>
{/* Info */}
<div style={{ flex: 1, minWidth: 0 }}>
{/* Info — clicking navigates to detail */}
<Link
to={`/dogs/${dog.id}`}
style={{ flex: 1, minWidth: 0, textDecoration: 'none', color: 'inherit' }}
>
<h3 style={{
fontSize: '1.125rem',
marginBottom: '0.25rem',
@@ -238,22 +259,108 @@ function DogList() {
{dog.registration_number}
</div>
)}
</div>
<div style={{ opacity: 0.5, transition: 'var(--transition)' }}>
<ArrowRight size={20} color="var(--text-muted)" />
</div>
</Link>
{/* Actions */}
<div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0, alignItems: 'center' }}>
<Link
to={`/dogs/${dog.id}`}
style={{ opacity: 0.5, transition: 'var(--transition)', color: 'inherit' }}
>
<ArrowRight size={20} color="var(--text-muted)" />
</Link>
<button
className="btn btn-ghost"
title={`Delete ${dog.name}`}
onClick={(e) => { e.stopPropagation(); setDeleteTarget({ id: dog.id, name: dog.name }) }}
style={{
padding: '0.4rem',
color: 'var(--text-muted)',
border: '1px solid transparent',
borderRadius: 'var(--radius-sm)',
display: 'flex', alignItems: 'center',
transition: 'var(--transition)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = '#ef4444'
e.currentTarget.style.borderColor = '#ef4444'
e.currentTarget.style.background = 'rgba(239,68,68,0.08)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-muted)'
e.currentTarget.style.borderColor = 'transparent'
e.currentTarget.style.background = 'transparent'
}}
>
<Trash2 size={16} />
</button>
</div>
</div>
))}
</div>
)}
{/* Add Dog Modal */}
{showAddModal && (
<DogForm
onClose={() => setShowAddModal(false)}
onSave={handleSave}
/>
)}
{/* Delete Confirmation Modal */}
{deleteTarget && (
<div style={{
position: 'fixed', inset: 0,
background: 'rgba(0,0,0,0.65)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
zIndex: 1000,
backdropFilter: 'blur(4px)'
}}>
<div className="card" style={{ maxWidth: 420, width: '90%', padding: '2rem', textAlign: 'center' }}>
<div style={{
width: 56, height: 56,
borderRadius: '50%',
background: 'rgba(239,68,68,0.12)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
margin: '0 auto 1rem'
}}>
<Trash2 size={26} style={{ color: '#ef4444' }} />
</div>
<h3 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>Delete Dog?</h3>
<p style={{ color: 'var(--text-secondary)', marginBottom: '1.75rem', lineHeight: 1.6 }}>
<strong style={{ color: 'var(--text-primary)' }}>{deleteTarget.name}</strong> will be
permanently removed along with all parent relationships, health records,
and heat cycles. This cannot be undone.
</p>
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
<button
className="btn btn-ghost"
onClick={() => setDeleteTarget(null)}
disabled={deleting}
style={{ minWidth: 100 }}
>
Cancel
</button>
<button
className="btn"
onClick={handleDelete}
disabled={deleting}
style={{
minWidth: 140,
background: '#ef4444',
color: '#fff',
border: '1px solid #ef4444',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem'
}}
>
<Trash2 size={15} />
{deleting ? 'Deleting…' : 'Yes, Delete'}
</button>
</div>
</div>
</div>
)}
</div>
)
}