mongog setup

src/pages/HistoryPage.tsx

@@ -1,17 +1,33 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { getUserEntries, type JournalEntry } from '../lib/api'
 import BottomNav from '../components/BottomNav'
 
-interface JournalEntry {
-  id: string
-  date: Date
-  title: string
-  content: string
-}
-
 export default function HistoryPage() {
+  const { user, userId, loading } = useAuth()
   const [currentMonth, setCurrentMonth] = useState(new Date())
-  
-  const entries: JournalEntry[] = []
+  const [entries, setEntries] = useState<JournalEntry[]>([])
+  const [loadingEntries, setLoadingEntries] = useState(false)
+
+  // Fetch entries on mount and when userId changes
+  useEffect(() => {
+    if (!user || !userId) return
+
+    const fetchEntries = async () => {
+      setLoadingEntries(true)
+      try {
+        const token = await user.getIdToken()
+        const response = await getUserEntries(userId, token, 100, 0)
+        setEntries(response.entries)
+      } catch (error) {
+        console.error('Error fetching entries:', error)
+      } finally {
+        setLoadingEntries(false)
+      }
+    }
+
+    fetchEntries()
+  }, [user, userId])
 
   const getDaysInMonth = (date: Date) => {
     const year = date.getFullYear()
@@ -20,43 +36,50 @@ export default function HistoryPage() {
     const lastDay = new Date(year, month + 1, 0)
     const daysInMonth = lastDay.getDate()
     const startingDayOfWeek = firstDay.getDay()
-    
+
     return { daysInMonth, startingDayOfWeek }
   }
 
   const hasEntryOnDate = (day: number) => {
-    return entries.some(entry => {
-      const entryDate = new Date(entry.date)
-      return entryDate.getDate() === day &&
+    return entries.some((entry) => {
+      const entryDate = new Date(entry.createdAt)
+      return (
+        entryDate.getDate() === day &&
         entryDate.getMonth() === currentMonth.getMonth() &&
         entryDate.getFullYear() === currentMonth.getFullYear()
+      )
     })
   }
 
   const isToday = (day: number) => {
     const today = new Date()
-    return day === today.getDate() &&
+    return (
+      day === today.getDate() &&
       currentMonth.getMonth() === today.getMonth() &&
       currentMonth.getFullYear() === today.getFullYear()
+    )
   }
 
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString('en-US', { 
-      weekday: 'short', 
-      month: 'short', 
-      day: '2-digit' 
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: '2-digit',
     }).toUpperCase()
   }
 
-  const formatTime = (date: Date) => {
-    return date.toLocaleTimeString('en-US', { 
-      hour: '2-digit', 
-      minute: '2-digit'
+  const formatTime = (date: string) => {
+    return new Date(date).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
     }).toUpperCase()
   }
 
   const { daysInMonth, startingDayOfWeek } = getDaysInMonth(currentMonth)
-  const monthName = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+  const monthName = currentMonth.toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric',
+  })
 
   const previousMonth = () => {
     setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1))
@@ -66,6 +89,24 @@ export default function HistoryPage() {
     setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1))
   }
 
+  // Get entries for current month
+  const currentMonthEntries = entries.filter((entry) => {
+    const entryDate = new Date(entry.createdAt)
+    return (
+      entryDate.getMonth() === currentMonth.getMonth() &&
+      entryDate.getFullYear() === currentMonth.getFullYear()
+    )
+  })
+
+  if (loading) {
+    return (
+      <div className="history-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <p style={{ color: '#9ca3af' }}>Loading…</p>
+        <BottomNav />
+      </div>
+    )
+  }
+
   return (
     <div className="history-page">
       <header className="history-header">
@@ -116,7 +157,7 @@ export default function HistoryPage() {
               const day = i + 1
               const hasEntry = hasEntryOnDate(day)
               const isTodayDate = isToday(day)
-              
+
               return (
                 <button
                   key={day}
@@ -133,28 +174,36 @@ export default function HistoryPage() {
 
         <section className="recent-entries">
           <h3 className="recent-entries-title">RECENT ENTRIES</h3>
-          
-          <div className="entries-list">
-            {entries.length === 0 ? (
-              <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
-                No entries yet. Start writing!
-              </p>
-            ) : entries.map(entry => (
-              <button
-                key={entry.id}
-                type="button"
-                className="entry-card"
-                onClick={() => console.log('Open entry', entry.id)}
-              >
-                <div className="entry-header">
-                  <span className="entry-date">{formatDate(entry.date)}</span>
-                  <span className="entry-time">{formatTime(entry.date)}</span>
-                </div>
-                <h4 className="entry-title">{entry.title}</h4>
-                <p className="entry-preview">{entry.content}</p>
-              </button>
-            ))}
-          </div>
+
+          {loadingEntries ? (
+            <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
+              Loading entries…
+            </p>
+          ) : (
+            <div className="entries-list">
+              {currentMonthEntries.length === 0 ? (
+                <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
+                  No entries for this month yet. Start writing!
+                </p>
+              ) : (
+                currentMonthEntries.map((entry) => (
+                  <button
+                    key={entry.id}
+                    type="button"
+                    className="entry-card"
+                    onClick={() => console.log('Open entry', entry.id)}
+                  >
+                    <div className="entry-header">
+                      <span className="entry-date">{formatDate(entry.createdAt)}</span>
+                      <span className="entry-time">{formatTime(entry.createdAt)}</span>
+                    </div>
+                    <h4 className="entry-title">{entry.title}</h4>
+                    <p className="entry-preview">{entry.content}</p>
+                  </button>
+                ))
+              )}
+            </div>
+          )}
         </section>
       </main>