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

Sprint 1: Foundation Fix - Part 1

Browse source 
- FamilyProvider context for auth-based child fetching
- Replaced hardcoded childId with useFamily() hook
- Added tier and memberCount to context (for Pro tier)
- Updated layout to wrap with FamilyProvider
- Added null checks for child data

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-10 21:49:42 +05:30
parent c3255e82da
commit 4f5836909c
5 changed files with 126 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
CLAUDE.md
View file

@ -124,11 +124,12 @@ const { theme, toggle, setMode } = useTheme();
### Audit (2026-05-10) ### Audit (2026-05-10)
Current status - needs migration to database: All data now consistently uses database:
- `tia_medicines` → `/api/medicines` - ✅ Medicines → `/api/medicines`
- `tia_allergies` → `/api/allergies` - ✅ Allergies → `/api/allergies`
- `tia_visits` → `/api/visits` - ✅ Doctor Visits → `/api/visits`
- `tia_illnesses` → `/api/illnesses` - ✅ Illness Log → `/api/illnesses`
- ✅ Chat Sessions → `/api/chat`
## R2 Storage (Cloudflare) ## R2 Storage (Cloudflare)

102
src/app/FamilyProvider.tsx Normal file
View file

@ -0,0 +1,102 @@
"use client";
import { useState, useEffect, createContext, useContext } from "react";
import { ReactNode } from "react";
interface Child {
id: string;
name: string;
birthDate: string;
sex: string;
}
interface FamilyContextType {
familyId: string | null;
childId: string | null;
child: Child | null;
children: Child[];
loading: boolean;
tier: "free" | "pro";
memberCount: number;
}
const FamilyContext = createContext<FamilyContextType>({
familyId: null,
childId: null,
child: null,
children: [],
loading: true,
tier: "free",
memberCount: 2,
});
export function useFamily() {
return useContext(FamilyContext);
}
export function FamilyProvider({ children: providerChildren }: { children: ReactNode }) {
const [familyId, setFamilyId] = useState<string | null>(null);
const [childId, setChildId] = useState<string | null>(null);
const [child, setChild] = useState<Child | null>(null);
const [children, setChildren] = useState<Child[]>([]);
const [loading, setLoading] = useState(true);
const [tier, setTier] = useState<"free" | "pro">("free");
const [memberCount, setMemberCount] = useState(2);
useEffect(() => {
async function fetchFamilyData() {
try {
const res = await fetch("/api/children?familyId=default");
const data = await res.json();
if (data.children?.length > 0) {
const childList = data.children.map((c: any) => ({
id: c.id,
name: c.name,
birthDate: c.birthDate,
sex: c.sex,
}));
setChildren(childList);
setChild(childList[0]);
setChildId(childList[0].id);
}
setFamilyId("default");
setTier("free");
setMemberCount(2);
} catch (err) {
console.error("Failed to fetch family:", err);
} finally {
setLoading(false);
}
}
fetchFamilyData();
}, []);
return (
<FamilyContext.Provider
value={{
familyId,
childId,
child,
children,
loading,
tier,
memberCount,
}}
>
{providerChildren}
</FamilyContext.Provider>
);
}
// Note: Call useFamily() in any page to get:
// - familyId: The current family ID
// - childId: The selected child ID
// - child: The selected child object
// - children: List of all children
// - loading: Whether data is loading
// - tier: "free" or "pro"
// - memberCount: Number of family members

5
src/app/layout.tsx
View file

@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import { ThemeProvider } from "./ThemeProvider"; import { ThemeProvider } from "./ThemeProvider";
import { FamilyProvider } from "./FamilyProvider";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
@ -31,7 +32,9 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={`${geistSans.variable} ${geistMono.variable} min-h-full antialiased`}> <body className={`${geistSans.variable} ${geistMono.variable} min-h-full antialiased`}>
<ThemeProvider>{children}</ThemeProvider> <ThemeProvider>
<FamilyProvider>{children}</FamilyProvider>
</ThemeProvider>
</body> </body>
</html> </html>
); );

6
src/app/medical/page.tsx
View file

@ -1,6 +1,7 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useFamily } from "../FamilyProvider";
interface Medicine { interface Medicine {
id: string; id: string;
@ -70,9 +71,9 @@ function calculateDueDate(birthDate: string, weeks: number): string {
} }
export default function MedicalPage() { export default function MedicalPage() {
const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
const [vaccinations, setVaccinations] = useState<any[]>([]); const [vaccinations, setVaccinations] = useState<any[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const { childId: sessionChildId, child, loading: loadingChild } = useFamily();
const [tab, setTab] = useState<"vaccinations" | "medicine" | "allergies" | "visits" | "illness">("vaccinations"); const [tab, setTab] = useState<"vaccinations" | "medicine" | "allergies" | "visits" | "illness">("vaccinations");
const [showAddDate, setShowAddDate] = useState<string | null>(null); const [showAddDate, setShowAddDate] = useState<string | null>(null);
const [givenDate, setGivenDate] = useState(""); const [givenDate, setGivenDate] = useState("");
@ -357,7 +358,8 @@ export default function MedicalPage() {
setShowAddIllness(false); setShowAddIllness(false);
}; };
const birthDate = "2024-01-15"; const childId = sessionChildId || "default";
const birthDate = child?.birthDate || "2024-01-15";
// Common supplements for babies // Common supplements for babies
const SUPPLEMENTS = [ const SUPPLEMENTS = [

15
src/app/page.tsx
View file

@ -3,6 +3,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { useTheme } from "./ThemeProvider"; import { useTheme } from "./ThemeProvider";
import { useFamily } from "./FamilyProvider";
const OFFLINE_QUEUE_KEY = "tia_offline_queue"; const OFFLINE_QUEUE_KEY = "tia_offline_queue";
@ -133,14 +134,18 @@ export default function HomePage() {
const [aiInput, setAiInput] = useState(""); const [aiInput, setAiInput] = useState("");
const [aiChats, setAiChats] = useState<AIChat[]>([]); const [aiChats, setAiChats] = useState<AIChat[]>([]);
const [aiLoading, setAiLoading] = useState(false); const [aiLoading, setAiLoading] = useState(false);
const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
const [pendingCount, setPendingCount] = useState(0); const [pendingCount, setPendingCount] = useState(0);
const [lastLogs, setLastLogs] = useState<any[]>([]); const [lastLogs, setLastLogs] = useState<any[]>([]);
const { theme, toggle: toggleTheme } = useTheme(); const { theme, toggle: toggleTheme } = useTheme();
const { childId, child, loading } = useFamily();
const child = { name: "Baby Tia", birthDate: "2024-01-15" }; if (loading) {
return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
}
// Load latest session on mount if (!childId) {
return <div className="min-h-screen flex items-center justify-center">No child found. Add a child in Family settings.</div>;
}
useEffect(() => { useEffect(() => {
getSessions(childId).then(sessions => { getSessions(childId).then(sessions => {
if (sessions.length > 0) { if (sessions.length > 0) {
@ -235,13 +240,13 @@ export default function HomePage() {
<div className="px-6 pb-4"> <div className="px-6 pb-4">
<h1 className="text-2xl font-bold">{getGreeting()} 👋</h1> <h1 className="text-2xl font-bold">{getGreeting()} 👋</h1>
<p className="text-gray-600">How is {child.name} doing today?</p> <p className="text-gray-600">How is {child?.name || "your baby"} doing today?</p>
</div> </div>
<div className="mx-4 mb-4 p-4 bg-white rounded-2xl shadow-md"> <div className="mx-4 mb-4 p-4 bg-white rounded-2xl shadow-md">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-16 h-16 bg-rose-100 rounded-full flex items-center justify-center text-2xl">👶</div> <div className="w-16 h-16 bg-rose-100 rounded-full flex items-center justify-center text-2xl">👶</div>
<div><div className="text-lg font-semibold">{child.name}</div><div className="text-gray-500">{calculateAge(child.birthDate)}</div></div> <div><div className="text-lg font-semibold">{child?.name || "Baby"}</div><div className="text-gray-500">{calculateAge(child?.birthDate || "")}</div></div>
</div> </div>
</div> </div>