update db str

src/pages/HistoryPage.tsx

@@ -1,11 +1,13 @@
 import { useState, useEffect } from 'react'
 import { useAuth } from '../contexts/AuthContext'
 import { getUserEntries, type JournalEntry } from '../lib/api'
+import { formatIST, formatISTDateOnly, getISTDateComponents } from '../lib/timezone'
 import BottomNav from '../components/BottomNav'
 
 export default function HistoryPage() {
   const { user, userId, loading } = useAuth()
   const [currentMonth, setCurrentMonth] = useState(new Date())
+  const [selectedDate, setSelectedDate] = useState(new Date())
   const [entries, setEntries] = useState<JournalEntry[]>([])
   const [loadingEntries, setLoadingEntries] = useState(false)
 
@@ -42,11 +44,11 @@ export default function HistoryPage() {
 
   const hasEntryOnDate = (day: number) => {
     return entries.some((entry) => {
-      const entryDate = new Date(entry.createdAt)
+      const components = getISTDateComponents(entry.createdAt)
       return (
-        entryDate.getDate() === day &&
-        entryDate.getMonth() === currentMonth.getMonth() &&
-        entryDate.getFullYear() === currentMonth.getFullYear()
+        components.date === day &&
+        components.month === currentMonth.getMonth() &&
+        components.year === currentMonth.getFullYear()
       )
     })
   }
@@ -61,18 +63,11 @@ export default function HistoryPage() {
   }
 
   const formatDate = (date: string) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: '2-digit',
-    }).toUpperCase()
+    return formatIST(date, 'date')
   }
 
   const formatTime = (date: string) => {
-    return new Date(date).toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    }).toUpperCase()
+    return formatIST(date, 'time')
   }
 
   const { daysInMonth, startingDayOfWeek } = getDaysInMonth(currentMonth)
@@ -89,15 +84,28 @@ 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)
+  // Get entries for selected date (in IST)
+  const selectedDateEntries = entries.filter((entry) => {
+    const components = getISTDateComponents(entry.createdAt)
     return (
-      entryDate.getMonth() === currentMonth.getMonth() &&
-      entryDate.getFullYear() === currentMonth.getFullYear()
+      components.date === selectedDate.getDate() &&
+      components.month === selectedDate.getMonth() &&
+      components.year === selectedDate.getFullYear()
     )
   })
 
+  const isDateSelected = (day: number) => {
+    return (
+      day === selectedDate.getDate() &&
+      currentMonth.getMonth() === selectedDate.getMonth() &&
+      currentMonth.getFullYear() === selectedDate.getFullYear()
+    )
+  }
+
+  const handleDateClick = (day: number) => {
+    setSelectedDate(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day))
+  }
+
   if (loading) {
     return (
       <div className="history-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -157,13 +165,14 @@ export default function HistoryPage() {
               const day = i + 1
               const hasEntry = hasEntryOnDate(day)
               const isTodayDate = isToday(day)
+              const isSelected = isDateSelected(day)
 
               return (
                 <button
                   key={day}
                   type="button"
-                  className={`calendar-day ${hasEntry ? 'calendar-day-has-entry' : ''} ${isTodayDate ? 'calendar-day-today' : ''}`}
-                  onClick={() => console.log('View entries for', day)}
+                  className={`calendar-day ${hasEntry ? 'calendar-day-has-entry' : ''} ${isTodayDate ? 'calendar-day-today' : ''} ${isSelected ? 'calendar-day-selected' : ''}`}
+                  onClick={() => handleDateClick(day)}
                 >
                   {day}
                 </button>
@@ -173,7 +182,9 @@ export default function HistoryPage() {
         </div>
 
         <section className="recent-entries">
-          <h3 className="recent-entries-title">RECENT ENTRIES</h3>
+          <h3 className="recent-entries-title">
+            {selectedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase()}
+          </h3>
 
           {loadingEntries ? (
             <p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
@@ -181,12 +192,12 @@ export default function HistoryPage() {
             </p>
           ) : (
             <div className="entries-list">
-              {currentMonthEntries.length === 0 ? (
+              {selectedDateEntries.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!
+                  No entries for this day yet. Start writing!
                 </p>
               ) : (
-                currentMonthEntries.map((entry) => (
+                selectedDateEntries.map((entry) => (
                   <button
                     key={entry.id}
                     type="button"
@@ -198,7 +209,6 @@ export default function HistoryPage() {
                       <span className="entry-time">{formatTime(entry.createdAt)}</span>
                     </div>
                     <h4 className="entry-title">{entry.title}</h4>
-                    <p className="entry-preview">{entry.content}</p>
                   </button>
                 ))
               )}