From 75afc177cecaa24ac2045259b8ce152cd0c096e4 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 17 May 2026 13:01:26 +0530
Subject: [PATCH] fix(home): move useEffect hooks above early returns to fix
 Rules of Hooks violation

All three useEffect calls were placed after an early return when childId was
null, causing React error #310 on the home page. Moved them above the
conditional returns and guarded each body with if (!childId) return.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/page.tsx | 63 ++++++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index aa783a7..fe254da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -140,6 +140,37 @@ export default function HomePage() {
   const { theme, toggle: toggleTheme } = useTheme();
   const { childId, child, familyId, loading } = useFamily();
 
+  useEffect(() => {
+    if (!childId) return;
+    getSessions(childId).then(sessions => {
+      if (sessions.length > 0) {
+        setAiChats(sessions[0].messages);
+      }
+    });
+  }, [childId]);
+
+  useEffect(() => {
+    if (!childId) return;
+    const queue = getOfflineQueue();
+    setPendingCount(queue.length);
+    const handleOnline = () => processOfflineQueue();
+    window.addEventListener("online", handleOnline);
+    fetch(`/api/notifications?childId=${childId}`)
+      .then(res => res.json())
+      .then(data => setVaccineReminders(data.notifications || []))
+      .catch(console.error);
+    return () => window.removeEventListener("online", handleOnline);
+  }, [childId]);
+
+  useEffect(() => {
+    if (!childId) return;
+    Promise.all([
+      fetch(`/api/logs?type=feed&childId=${childId}&limit=1`).then(r => r.json()),
+      fetch(`/api/logs?type=sleep&childId=${childId}&limit=1`).then(r => r.json()),
+      fetch(`/api/logs?type=diaper&childId=${childId}&limit=1`).then(r => r.json()),
+    ]).then(([feed, sleep, diaper]) => setLastLogs([feed.entries?.[0], sleep.entries?.[0], diaper.entries?.[0]].filter(Boolean)));
+  }, [childId]);
+
   if (loading) {
     return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
   }
@@ -155,38 +186,6 @@ export default function HomePage() {
   if (!childId) {
     return <div className="min-h-screen flex items-center justify-center">No child found. Add a child in Family settings.</div>;
   }
-  useEffect(() => {
-    getSessions(childId).then(sessions => {
-      if (sessions.length > 0) {
-        setAiChats(sessions[0].messages);
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    const queue = getOfflineQueue();
-    setPendingCount(queue.length);
-    const handleOnline = () => processOfflineQueue();
-    window.addEventListener("online", handleOnline);
-    // Fetch vaccine notifications
-    if (childId) {
-      fetch(`/api/notifications?childId=${childId}`)
-        .then(res => res.json())
-        .then(data => setVaccineReminders(data.notifications || []))
-        .catch(console.error);
-    }
-    // Service worker disabled - causes errors in production
-    // if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js").catch(console.error);
-    return () => window.removeEventListener("online", handleOnline);
-  }, [childId]);
-
-  useEffect(() => {
-    Promise.all([
-      fetch(`/api/logs?type=feed&childId=${childId}&limit=1`).then(r => r.json()),
-      fetch(`/api/logs?type=sleep&childId=${childId}&limit=1`).then(r => r.json()),
-      fetch(`/api/logs?type=diaper&childId=${childId}&limit=1`).then(r => r.json()),
-    ]).then(([feed, sleep, diaper]) => setLastLogs([feed.entries?.[0], sleep.entries?.[0], diaper.entries?.[0]].filter(Boolean)));
-  }, [childId]);
 
   const toggleDarkMode = () => {
     toggleTheme();