feat: note journal

app/routes/tracker-journal/route.tsx

@@ -1,107 +1,68 @@
-import React, { useEffect, useState } from 'react'
-import db, { ISupplement, INote } from 'src/pages/tracker/db'
+import React from 'react'
+import db, { INote } from 'src/pages/tracker/db'
 import { formatDateKey } from 'src/lib/utils'
 import ContentHeader from 'src/components/content-header.tsx'
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationNext,
-  PaginationPrevious,
-} from 'src/components/ui/pagination'
 
-interface JournalEntry {
-  [date: string]: (ISupplement | INote)[]
-}
+import DailyNoteForm from 'src/pages/tracker/daily-note-form'
+import { useLiveQuery } from 'dexie-react-hooks'
 
 const TrackerJournal: React.FC = () => {
-  const [entries, setEntries] = useState<JournalEntry>({})
-  const [page, setPage] = useState(0)
-  const pageSize = 50
-  const [totalEntries, setTotalEntries] = useState(0)
-
-  const loadEntries = async () => {
-    const supplements: ISupplement[] = await db.supplements
-      .orderBy('date')
-      .reverse()
-      .offset(page * pageSize)
-      .limit(pageSize)
-      .toArray()
-    const notes: INote[] = await db.notes
-      .orderBy('date')
-      .reverse()
-      .offset(page * pageSize)
-      .limit(pageSize)
-      .toArray()
-
-    const combinedEntries: JournalEntry = supplements
-      // @ts-ignore
-      .concat(notes)
-      .reduce((acc: JournalEntry, entry: ISupplement | INote) => {
-        const { date } = entry
-        if (!acc[date]) {
-          acc[date] = []
-        }
-        acc[date].push(entry)
-        return acc
-      }, {})
+  const journalNotes = useLiveQuery<INote[]>(() => db.notes.orderBy('date').reverse().toArray(), [])
 
-    setEntries((prevEntries) => ({
-      ...prevEntries,
-      ...combinedEntries,
-    }))
-  }
+  const currentDate = formatDateKey(new Date())
+  let lastDate = ''
 
-  useEffect(() => {
-    loadEntries()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page])
+  const journalElements = journalNotes?.flatMap((note, index) => {
+    const noteDate = formatDateKey(new Date(note.date))
+    const elements = []
 
-  useEffect(() => {
-    const fetchTotalEntries = async () => {
-      const totalSupplements = await db.supplements.count()
-      const totalNotes = await db.notes.count()
-      setTotalEntries(totalSupplements + totalNotes)
+    if (noteDate !== lastDate) {
+      elements.push(
+        <li key={`header-${index}`}>
+          <h2 className="text-xl font-bold">{noteDate === currentDate ? 'Today' : noteDate}</h2>
+        </li>,
+      )
+      lastDate = noteDate
     }
 
-    fetchTotalEntries()
-  }, [])
+    elements.push(
+      <li className="p-2" key={index}>
+        <p>{note.content}</p>
+      </li>,
+    )
 
+    return elements
+  })
   return (
     <div className="p-2">
-      <ContentHeader title="Journal" linkTo="/tracker" linkText="Tracker" />
-      {Object.keys(entries).length === 0 ? (
-        <div>No journal entries found.</div>
+      <div className="my-1">
+        <ContentHeader title="Note Journal" linkTo="/tracker" linkText="Tracker" />
+      </div>
+      <DailyNoteForm dateKey={formatDateKey(new Date())} />
+      {journalNotes?.length === 0 ? (
+        <div>No notes found.</div>
       ) : (
-        <ul>
-          {Object.entries(entries).map(([date, contents], index) => (
-            <li key={index}>
-              <p className="text-slate-400">{formatDateKey(new Date(date))}</p>
-              {contents.map((content, contentIndex) => (
-                <p key={contentIndex}>
-                  {'content' in content
-                    ? `Note: ${content.content}`
-                    : `${content.name} - ${content.dosage} ${content.dosageUnit}`}
-                </p>
-              ))}
-            </li>
-          ))}
-        </ul>
+        <ul className="divide-y divide-gray-200">{journalElements}</ul>
       )}
-      <Pagination>
+      {/* <Pagination>
         <PaginationContent>
           <PaginationItem>
-            <PaginationPrevious onClick={() => setPage((oldPage) => Math.max(0, oldPage - 1))} href="#" />
+            <PaginationPrevious
+              isActive={false}
+              onClick={() => setPage((oldPage) => Math.max(0, oldPage - 1))}
+              href="#"
+            />
           </PaginationItem>
           <PaginationItem>{page + 1}</PaginationItem>
           <PaginationItem>
             <PaginationNext
+              isActive={page < Math.floor(totalEntries / pageSize)}
               onClick={() => setPage((oldPage) => Math.min(oldPage + 1, Math.floor(totalEntries / pageSize)))}
-              href="#"
+              href="#next"
             />
           </PaginationItem>
         </PaginationContent>
-      </Pagination>
+      </Pagination> */}
     </div>
   )
 }

src/pages/tracker/daily-note-form.tsx

@@ -15,17 +15,20 @@ import { Textarea } from 'src/components/ui/textarea'
 import db from './db'
 import { useState } from 'react'
 import { toast } from 'react-hot-toast'
+import { useNavigate } from '@remix-run/react'
 
 export default function DailyNoteForm({ dateKey }: { dateKey: string }) {
   const [note, setNote] = useState<string>('')
 
+  const navigate = useNavigate()
+
   //   const recentNotes = useLiveQuery(() => db.notes.orderBy('date').limit(3).toArray(), [dateKey])
 
   return (
     <Sheet>
       <SheetTrigger asChild>
         <Button className="ml-2" variant={'secondary'} size={'sm'}>
-          <Edit3Icon className="mr-2 w-4" /> Notes
+          <Edit3Icon className="mr-2 w-4" /> Add Note
         </Button>
       </SheetTrigger>
       <SheetContent side={'top'}>
@@ -64,6 +67,7 @@ export default function DailyNoteForm({ dateKey }: { dateKey: string }) {
                   createdAt: new Date(),
                 })
                 setNote('')
+                navigate('/tracker-journal')
               }}
             >
               Save Note

src/pages/tracker/dashboard.tsx

@@ -1,5 +1,5 @@
 import { differenceInCalendarDays, isSameDay, startOfDay } from 'date-fns'
-import { BotIcon, CheckCircle2 } from 'lucide-react'
+import { BookIcon, BotIcon, CheckCircle2 } from 'lucide-react'
 
 import { Button } from 'src/components/ui/button'
 import DieOffSymptoms from './die-off-symptoms'
@@ -104,7 +104,15 @@ const Dashboard: React.FC<DashboardProps> = ({ startDate }) => {
             <Link to={'/tracker-regimen'}>Edit</Link>
           </Button>
         </span>
-        <DailyNoteForm dateKey={dateKey} />
+        <div className="flex gap-2">
+          <DailyNoteForm dateKey={dateKey} />
+          <Button variant={'secondary'} className="m-0" size={'sm'} asChild>
+            <Link to={`/tracker-journal`}>
+              {' '}
+              <BookIcon className="inline-block w-4" />
+            </Link>
+          </Button>
+        </div>
       </h3>
       <div id="regimen" className="flex gap-2">
         <div className="w-full flex-1">