manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(home): move useEffect hooks above early returns to fix Rules of Hooks violation

Browse source 
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>
This commit is contained in:
Manohar Gupta 2026-05-17 13:01:26 +05:30
parent 50a6827bfd
commit 75afc177ce
1 changed files with 31 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/app/page.tsx
View file

@ -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();