From 6e3e23620b843fd55f90a5c96d850e8182513024 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 9 Mar 2026 00:31:24 -0500
Subject: [PATCH] Add error handling for API failures to prevent blank screen

---
 client/src/components/DogForm.jsx | 64 +++++++++++++++++++------------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/client/src/components/DogForm.jsx b/client/src/components/DogForm.jsx
index 8da4300..0d741aa 100644
--- a/client/src/components/DogForm.jsx
+++ b/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' }}>
-              <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
-- 
2.49.1