349 lines
14 KiB
JavaScript
349 lines
14 KiB
JavaScript
import { useEffect, useState, useRef } from 'react'
|
|
import { useParams, Link, useNavigate } from 'react-router-dom'
|
|
import { Dog, GitBranch, Edit, Upload, Trash2, ArrowLeft, Calendar, Hash, Award } from 'lucide-react'
|
|
import axios from 'axios'
|
|
import DogForm from '../components/DogForm'
|
|
|
|
function DogDetail() {
|
|
const { id } = useParams()
|
|
const navigate = useNavigate()
|
|
const [dog, setDog] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [showEditModal, setShowEditModal] = useState(false)
|
|
const [uploading, setUploading] = useState(false)
|
|
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
const fileInputRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
fetchDog()
|
|
}, [id])
|
|
|
|
const fetchDog = async () => {
|
|
try {
|
|
const res = await axios.get(`/api/dogs/${id}`)
|
|
setDog(res.data)
|
|
setLoading(false)
|
|
} catch (error) {
|
|
console.error('Error fetching dog:', error)
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handlePhotoUpload = async (e) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
|
|
setUploading(true)
|
|
const formData = new FormData()
|
|
formData.append('photo', file)
|
|
|
|
try {
|
|
await axios.post(`/api/dogs/${id}/photos`, formData, {
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
})
|
|
fetchDog()
|
|
} catch (error) {
|
|
console.error('Error uploading photo:', error)
|
|
alert('Failed to upload photo')
|
|
} finally {
|
|
setUploading(false)
|
|
if (fileInputRef.current) fileInputRef.current.value = ''
|
|
}
|
|
}
|
|
|
|
const handleDeletePhoto = async (photoIndex) => {
|
|
if (!confirm('Delete this photo?')) return
|
|
|
|
try {
|
|
await axios.delete(`/api/dogs/${id}/photos/${photoIndex}`)
|
|
fetchDog()
|
|
if (selectedPhoto >= photoIndex && selectedPhoto > 0) {
|
|
setSelectedPhoto(selectedPhoto - 1)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting photo:', error)
|
|
alert('Failed to delete photo')
|
|
}
|
|
}
|
|
|
|
const calculateAge = (birthDate) => {
|
|
if (!birthDate) return null
|
|
const today = new Date()
|
|
const birth = new Date(birthDate)
|
|
let years = today.getFullYear() - birth.getFullYear()
|
|
let months = today.getMonth() - birth.getMonth()
|
|
|
|
if (months < 0) {
|
|
years--
|
|
months += 12
|
|
}
|
|
|
|
if (years === 0) return `${months} month${months !== 1 ? 's' : ''}`
|
|
if (months === 0) return `${years} year${years !== 1 ? 's' : ''}`
|
|
return `${years}y ${months}m`
|
|
}
|
|
|
|
if (loading) {
|
|
return <div className="container loading">Loading...</div>
|
|
}
|
|
|
|
if (!dog) {
|
|
return <div className="container">Dog not found</div>
|
|
}
|
|
|
|
return (
|
|
<div className="container" style={{ paddingTop: '2rem', paddingBottom: '3rem' }}>
|
|
{/* Header */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
|
|
<button className="btn-icon" onClick={() => navigate('/dogs')} style={{ marginRight: '0.5rem' }}>
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<div style={{ flex: 1 }}>
|
|
<h1 style={{ marginBottom: '0.25rem' }}>{dog.name}</h1>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', color: 'var(--text-secondary)' }}>
|
|
<span>{dog.breed}</span>
|
|
<span>•</span>
|
|
<span>{dog.sex === 'male' ? 'Male ♂' : 'Female ♀'}</span>
|
|
{dog.birth_date && (
|
|
<>
|
|
<span>•</span>
|
|
<span>{calculateAge(dog.birth_date)}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
|
<Link to={`/pedigree/${dog.id}`} className="btn btn-ghost">
|
|
<GitBranch size={18} />
|
|
Pedigree
|
|
</Link>
|
|
<button className="btn btn-primary" onClick={() => setShowEditModal(true)}>
|
|
<Edit size={18} />
|
|
Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '1.5rem', marginBottom: '1.5rem' }}>
|
|
{/* Photo Section - Compact */}
|
|
<div className="card" style={{ padding: '1rem' }}>
|
|
<div style={{ marginBottom: '0.75rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<h3 style={{ fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>Photos</h3>
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={uploading}
|
|
style={{ padding: '0.375rem 0.75rem', fontSize: '0.75rem' }}
|
|
>
|
|
<Upload size={14} />
|
|
{uploading ? 'Uploading...' : 'Add'}
|
|
</button>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handlePhotoUpload}
|
|
style={{ display: 'none' }}
|
|
/>
|
|
</div>
|
|
|
|
{dog.photo_urls && dog.photo_urls.length > 0 ? (
|
|
<>
|
|
{/* Main Photo */}
|
|
<div style={{ position: 'relative', marginBottom: '0.75rem' }}>
|
|
<img
|
|
src={dog.photo_urls[selectedPhoto]}
|
|
alt={dog.name}
|
|
style={{
|
|
width: '100%',
|
|
aspectRatio: '1',
|
|
objectFit: 'cover',
|
|
borderRadius: 'var(--radius)',
|
|
border: '1px solid var(--border)'
|
|
}}
|
|
/>
|
|
<button
|
|
className="btn-icon"
|
|
onClick={() => handleDeletePhoto(selectedPhoto)}
|
|
style={{
|
|
position: 'absolute',
|
|
top: '0.5rem',
|
|
right: '0.5rem',
|
|
background: 'rgba(15, 23, 42, 0.8)',
|
|
backdropFilter: 'blur(8px)'
|
|
}}
|
|
>
|
|
<Trash2 size={16} color="var(--danger)" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Thumbnail Strip */}
|
|
{dog.photo_urls.length > 1 && (
|
|
<div style={{ display: 'flex', gap: '0.5rem', overflowX: 'auto' }}>
|
|
{dog.photo_urls.map((url, index) => (
|
|
<img
|
|
key={index}
|
|
src={url}
|
|
alt={`${dog.name} ${index + 1}`}
|
|
onClick={() => setSelectedPhoto(index)}
|
|
style={{
|
|
width: '60px',
|
|
height: '60px',
|
|
objectFit: 'cover',
|
|
borderRadius: 'var(--radius-sm)',
|
|
cursor: 'pointer',
|
|
border: selectedPhoto === index ? '2px solid var(--primary)' : '1px solid var(--border)',
|
|
opacity: selectedPhoto === index ? 1 : 0.6,
|
|
transition: 'all 0.2s'
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div style={{ textAlign: 'center', padding: '3rem 1rem', background: 'var(--bg-primary)', borderRadius: 'var(--radius)', border: '1px dashed var(--border)' }}>
|
|
<Dog size={48} style={{ color: 'var(--text-muted)', margin: '0 auto 0.5rem', opacity: 0.5 }} />
|
|
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>No photos</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info Section */}
|
|
<div>
|
|
<div className="card" style={{ marginBottom: '1.5rem' }}>
|
|
<h2 style={{ fontSize: '1rem', marginBottom: '1rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Details</h2>
|
|
|
|
<div>
|
|
<div className="info-row">
|
|
<span className="info-label">Breed</span>
|
|
<span className="info-value">{dog.breed}</span>
|
|
</div>
|
|
|
|
<div className="info-row">
|
|
<span className="info-label">Sex</span>
|
|
<span className="info-value">{dog.sex === 'male' ? 'Male ♂' : 'Female ♀'}</span>
|
|
</div>
|
|
|
|
{dog.birth_date && (
|
|
<div className="info-row">
|
|
<span className="info-label"><Calendar size={14} style={{ display: 'inline', marginRight: '0.25rem' }} />Birth Date</span>
|
|
<span className="info-value">
|
|
{new Date(dog.birth_date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
|
<span style={{ marginLeft: '0.5rem', color: 'var(--text-muted)', fontSize: '0.875rem' }}>({calculateAge(dog.birth_date)})</span>
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{dog.color && (
|
|
<div className="info-row">
|
|
<span className="info-label">Color</span>
|
|
<span className="info-value">{dog.color}</span>
|
|
</div>
|
|
)}
|
|
|
|
{dog.registration_number && (
|
|
<div className="info-row">
|
|
<span className="info-label"><Award size={14} style={{ display: 'inline', marginRight: '0.25rem' }} />Registration</span>
|
|
<span className="info-value" style={{ fontFamily: 'monospace' }}>{dog.registration_number}</span>
|
|
</div>
|
|
)}
|
|
|
|
{dog.microchip && (
|
|
<div className="info-row">
|
|
<span className="info-label"><Hash size={14} style={{ display: 'inline', marginRight: '0.25rem' }} />Microchip</span>
|
|
<span className="info-value" style={{ fontFamily: 'monospace' }}>{dog.microchip}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Parents */}
|
|
<div className="card">
|
|
<h2 style={{ fontSize: '1rem', marginBottom: '1rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Pedigree</h2>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
|
<div>
|
|
<div style={{ fontSize: '0.8125rem', color: 'var(--text-muted)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Sire</div>
|
|
{dog.sire ? (
|
|
<Link to={`/dogs/${dog.sire.id}`} style={{ color: 'var(--primary)', fontWeight: 500, textDecoration: 'none' }}>
|
|
{dog.sire.name}
|
|
</Link>
|
|
) : (
|
|
<span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Unknown</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: '0.8125rem', color: 'var(--text-muted)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Dam</div>
|
|
{dog.dam ? (
|
|
<Link to={`/dogs/${dog.dam.id}`} style={{ color: 'var(--primary)', fontWeight: 500, textDecoration: 'none' }}>
|
|
{dog.dam.name}
|
|
</Link>
|
|
) : (
|
|
<span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Unknown</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notes */}
|
|
{dog.notes && (
|
|
<div className="card" style={{ marginBottom: '1.5rem' }}>
|
|
<h2 style={{ fontSize: '1rem', marginBottom: '1rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Notes</h2>
|
|
<p style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6', color: 'var(--text-secondary)' }}>{dog.notes}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Offspring */}
|
|
{dog.offspring && dog.offspring.length > 0 && (
|
|
<div className="card">
|
|
<h2 style={{ fontSize: '1rem', marginBottom: '1rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Offspring ({dog.offspring.length})</h2>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '0.75rem' }}>
|
|
{dog.offspring.map(child => (
|
|
<Link
|
|
key={child.id}
|
|
to={`/dogs/${child.id}`}
|
|
style={{
|
|
padding: '0.75rem 1rem',
|
|
background: 'var(--bg-primary)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
textDecoration: 'none',
|
|
transition: 'var(--transition)',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--primary)'
|
|
e.currentTarget.style.background = 'var(--bg-tertiary)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--border)'
|
|
e.currentTarget.style.background = 'var(--bg-primary)'
|
|
}}
|
|
>
|
|
<span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{child.name}</span>
|
|
<span style={{ fontSize: '1.125rem' }}>{child.sex === 'male' ? '♂' : '♀'}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showEditModal && (
|
|
<DogForm
|
|
dog={dog}
|
|
onClose={() => setShowEditModal(false)}
|
|
onSave={() => {
|
|
fetchDog()
|
|
setShowEditModal(false)
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DogDetail |