Merge pull request 'Add error handling for API failures to prevent blank screen' (#8) from fix/dog-form-litter-ui into master

Reviewed-on: #8

client/src/components/DogForm.jsx

@@ -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' }}>
+            {littersAvailable && (
-              <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
+              <div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
-                <input
+                <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
-                  type="radio"
+                  <input
-                  checked={!useManualParents}
+                    type="radio"
-                  onChange={() => setUseManualParents(false)}
+                    name="parentMode"
-                  style={{ width: '16px', height: '16px' }}
+                    checked={!useManualParents}
-                />
+                    onChange={() => setUseManualParents(false)}
-                <span>Link to Litter</span>
+                    style={{ width: '16px', height: '16px' }}
-              </label>
+                  />
-              <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
+                  <span>Link to Litter</span>
-                <input
+                </label>
-                  type="radio"
+                <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
-                  checked={useManualParents}
+                  <input
-                  onChange={() => setUseManualParents(true)}
+                    type="radio"
-                  style={{ width: '16px', height: '16px' }}
+                    name="parentMode"
-                />
+                    checked={useManualParents}
-                <span>Manual Parent Selection</span>
+                    onChange={() => setUseManualParents(true)}
-              </label>
+                    style={{ width: '16px', height: '16px' }}
-            </div>
+                  />
+                  <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