fix: session always being null in history

Next Auth uses cookies. Request from a server component strip cookies. So I moved the db call into the server component.

Helpful link:
nextauthjs/next-auth#7423 (comment)

src/app/history/getHistory.ts

@@ -0,0 +1,21 @@
+import { db } from '~/server/db'
+import { TypingSessionRepository } from '~/server/repositories/typingSession.repository'
+import { TypingSessionLog, getTypingSessionLog } from './log'
+import { BookOverview, getBookOverview } from './overview'
+
+export async function getHistory(
+    userId: string,
+): Promise<{ log: TypingSessionLog[]; overview: BookOverview[] }> {
+    const typingSessionRepository = new TypingSessionRepository(db)
+
+    const typingSessions = await typingSessionRepository.getMany({
+        userId,
+    })
+
+    const overview = getBookOverview(typingSessions)
+
+    const log = typingSessions
+        .map(a => getTypingSessionLog(a))
+        .filter(a => a.numberOfVersesTyped > 0)
+    return { overview, log }
+}

src/app/history/history-log.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { TypingSessionLog } from '../api/history/log'
+import { TypingSessionLog } from './log'
 import { Fragment } from 'react'
 import { format } from 'date-fns'
 

src/app/history/history-overview.tsx

@@ -3,7 +3,7 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import clsx from 'clsx'
 import Link from 'next/link'
-import { BookOverview } from '../api/history/overview'
+import { BookOverview } from './overview'
 
 export function HistoryOverview({ overview }: { overview: BookOverview[] }) {
     return (

src/app/history/page.tsx

@@ -4,8 +4,7 @@ import { HistoryLog } from './history-log'
 import { getServerSession } from 'next-auth/next'
 import { redirect } from 'next/navigation'
 import { authOptions } from '~/server/auth'
-import { fetchHistory } from '~/lib/api'
-
+import { getHistory } from './getHistory'
 export const metadata: Metadata = {
     title: 'Type the Word - History',
     description: 'History of all the passages you have typed.',
@@ -18,15 +17,15 @@ export default async function History() {
         redirect('/')
     }
 
-    const history = await fetchHistory()
+    const { overview, log } = await getHistory(session.user.id)
 
     return (
         <>
             <h2>Overview</h2>
-            <HistoryOverview overview={history.overview} />
+            <HistoryOverview overview={overview} />
             <hr className="mx-0 w-full border-t-2 border-black dark:border-white" />
             <h2>Log</h2>
-            <HistoryLog log={history.log} />
+            <HistoryLog log={log} />
         </>
     )
 }

src/lib/api.ts

@@ -3,9 +3,6 @@ import { PassageSegment } from './passageSegment'
 import { TypingSession } from '~/server/repositories/typingSession.repository'
 import { AddTypedVerseBody } from '~/app/api/typing-session/[id]/route'
 import { ChapterHistory } from '~/app/api/chapter-history/[passage]/route'
-import { TypingSessionLog } from '~/app/api/history/log'
-import { BookOverview } from '~/app/api/history/overview'
-import { headers } from 'next/headers'
 
 export type Body<T> = { data: T }
 
@@ -65,22 +62,3 @@ export async function fetchAddVerseToTypingSession(
 
     return body.data
 }
-
-export async function fetchHistory(): Promise<{
-    log: TypingSessionLog[]
-    overview: BookOverview[]
-}> {
-    const response = await fetch(`${getBaseUrl()}/api/history`, {
-        method: 'POST',
-        headers: headers(),
-    })
-
-    const body: Body<{
-        log: TypingSessionLog[]
-        overview: BookOverview[]
-    }> = await response.json()
-
-    if (!response.ok) console.error(body)
-
-    return body.data
-}