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

Add error handling for API failures to prevent blank screen #8

Merged
jason merged 1 commits from fix/dog-form-litter-ui into master 2026-03-09 00:32:31 -05:00
Conversation 0 Commits 1 Files Changed 1 +40 -24
1 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6e3e23620b - Show all commits

64
client/src/components/DogForm.jsx
View File

@@ -20,7 +20,8 @@ function DogForm({ dog, onClose, onSave }) {
const [litters, setLitters] = useState([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
const [useManuaParents, setUseManualParents] = useState(false)
const [useManualParents, setUseManualParents] = useState(true)
const [littersAvailable, setLittersAvailable] = useState(false)
useEffect(() => {
fetchDogs()
@@ -46,18 +47,29 @@ function DogForm({ dog, onClose, onSave }) {
const fetchDogs = async () => {
try {
const res = await axios.get('/api/dogs')
setDogs(res.data)
setDogs(res.data || [])
} catch (error) {
console.error('Error fetching dogs:', error)
setDogs([])
}
}
const fetchLitters = async () => {
try {
const res = await axios.get('/api/litters')
setLitters(res.data)
const litterData = res.data || []
setLitters(litterData)
setLittersAvailable(litterData.length > 0)
// Only default to manual if no litters exist
if (litterData.length === 0) {
setUseManualParents(true)
}
} catch (error) {
console.error('Error fetching litters:', error)
// If endpoint fails, gracefully fallback to manual mode
setLitters([])
setLittersAvailable(false)
setUseManualParents(true)
}
}
@@ -211,28 +223,32 @@ function DogForm({ dog, onClose, onSave }) {
<div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(99, 102, 241, 0.05)', borderRadius: '8px', border: '1px solid rgba(99, 102, 241, 0.2)' }}>
<label className="label" style={{ marginBottom: '0.75rem', display: 'block', fontWeight: '600' }}>Parent Information</label>
<div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
<input
type="radio"
checked={!useManualParents}
onChange={() => setUseManualParents(false)}
style={{ width: '16px', height: '16px' }}
/>
<span>Link to Litter</span>
</label>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
<input
type="radio"
checked={useManualParents}
onChange={() => setUseManualParents(true)}
style={{ width: '16px', height: '16px' }}
/>
<span>Manual Parent Selection</span>
</label>
</div>
{littersAvailable && (
<div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
<input
type="radio"
name="parentMode"
checked={!useManualParents}
onChange={() => setUseManualParents(false)}
style={{ width: '16px', height: '16px' }}
/>
<span>Link to Litter</span>
</label>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
<input
type="radio"
name="parentMode"
checked={useManualParents}
onChange={() => setUseManualParents(true)}
style={{ width: '16px', height: '16px' }}
/>
<span>Manual Parent Selection</span>
</label>
</div>
)}
{!useManualParents ? (
{!useManualParents && littersAvailable ? (
<div className="form-group" style={{ marginTop: '0.5rem' }}>
<label className="label">Select Litter</label>
<select