diff --git a/src/app/page.tsx b/src/app/page.tsx index 074ee71..5668465 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,6 +10,7 @@ import CalendarView from '@/components/CalendarView'; import ReflectionsList from '@/components/ReflectionsList'; import SettingsPage from '@/components/SettingsPage'; import HomePage from '@/components/HomePage'; +import AnsweredPrayers from '@/components/AnsweredPrayers'; import { db } from '@/lib/firebase'; import { collection, addDoc, getDocs, updateDoc, query, where, doc } from 'firebase/firestore'; import toast from 'react-hot-toast'; @@ -20,10 +21,12 @@ interface Prayer { date: string; text: string; prayFor?: string; + answered?: boolean; + answerDetails?: string; } export default function Home() { - const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'reflections' | 'settings'>('home'); + const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'settings'>('home'); const [prayers, setPrayers] = useState([]); const [editingPrayer, setEditingPrayer] = useState(null); @@ -31,6 +34,8 @@ export default function Home() { const [date, setDate] = useState(new Date().toISOString().split('T')[0]); const [text, setText] = useState(''); const [prayFor, setPrayFor] = useState(''); + const [answered, setAnswered] = useState(false); + const [answerDetails, setAnswerDetails] = useState(''); const { user, loading: authLoading } = useAuth(); @@ -98,6 +103,8 @@ export default function Home() { date, text, prayFor: prayFor || undefined, + answered, + answerDetails: answerDetails || undefined, }; if (editingPrayer) { @@ -132,7 +139,9 @@ export default function Home() { setDate(prayer.date); setText(prayer.text); setPrayFor(prayer.prayFor || ''); - setActiveTab('home'); + setAnswered(prayer.answered || false); + setAnswerDetails(prayer.answerDetails || ''); + setActiveTab('compose'); }; const handleDateClick = (clickedDate: string) => { @@ -206,6 +215,10 @@ export default function Home() { onTextChange={setText} prayFor={prayFor} onPrayForChange={setPrayFor} + answered={answered} + onAnsweredChange={setAnswered} + answerDetails={answerDetails} + onAnswerDetailsChange={setAnswerDetails} onSubmit={handleSubmit} isEditing={!!editingPrayer} /> @@ -215,6 +228,10 @@ export default function Home() { )} + {activeTab === 'answered' && ( + + )} + {activeTab === 'reflections' && ( void; +} + +export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProps) { + const answeredPrayers = prayers.filter(p => p.answered); + + return ( +
+
+

Answered Prayers

+

Celebrate prayers God has answered

+ + {answeredPrayers.length > 0 ? ( +
+ {answeredPrayers.map((prayer) => ( +
onEdit?.(prayer)} + > +
+ ✅ +
+ {prayer.prayFor && ( +
+ {prayer.prayFor} +
+ )} +

{prayer.text}

+
+
+ + {prayer.answerDetails && ( +
+

How it was answered:

+

{prayer.answerDetails}

+
+ )} + +
+ {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} +
+
+ ))} +
+ ) : ( +
+
🙏
+

No answered prayers yet

+

+ Mark prayers as answered in the Compose tab to see them here +

+
+ )} +
+
+ ); +} diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx index fb8b568..33ec64b 100644 --- a/src/components/BottomNav.tsx +++ b/src/components/BottomNav.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { useAuth } from '@/context/AuthContext'; interface BottomNavProps { - activeTab: 'home' | 'compose' | 'journal' | 'reflections' | 'settings'; - onTabChange: (tab: 'home' | 'compose' | 'journal' | 'reflections' | 'settings') => void; + activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'settings'; + onTabChange: (tab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'settings') => void; } export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) { @@ -15,6 +15,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) { { id: 'home' as const, label: 'Home', icon: '🏠' }, { id: 'compose' as const, label: 'Compose', icon: '✍️' }, { id: 'journal' as const, label: 'Journal', icon: '📅' }, + { id: 'answered' as const, label: 'Answered', icon: '✅' }, { id: 'reflections' as const, label: 'Reflections', icon: '📖' }, { id: 'settings' as const, label: 'Settings', icon: '⚙️' }, ]; diff --git a/src/components/DailyEntry.tsx b/src/components/DailyEntry.tsx index 1302ea1..66d5995 100644 --- a/src/components/DailyEntry.tsx +++ b/src/components/DailyEntry.tsx @@ -10,6 +10,10 @@ interface DailyEntryProps { onTextChange: (text: string) => void; prayFor: string; onPrayForChange: (prayFor: string) => void; + answered?: boolean; + onAnsweredChange?: (answered: boolean) => void; + answerDetails?: string; + onAnswerDetailsChange?: (details: string) => void; onSubmit: (e: React.FormEvent) => void; loading?: boolean; isEditing?: boolean; @@ -22,6 +26,10 @@ export default function DailyEntry({ onTextChange, prayFor, onPrayForChange, + answered = false, + onAnsweredChange, + answerDetails = '', + onAnswerDetailsChange, onSubmit, loading = false, isEditing = false, @@ -91,6 +99,37 @@ export default function DailyEntry({ /> + {/* Answered Checkbox */} +
+ onAnsweredChange?.(e.target.checked)} + className="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500 cursor-pointer" + /> + +
+ + {/* Answer Details */} + {answered && ( +
+ +