From ae1a0a8e2d40df7e5d3a19eae04e427a13e4e583 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 9 Dec 2025 12:48:05 -0600
Subject: [PATCH] fix(practice): use React Query cache for /resume page session
 data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The /resume page was showing stale session data when navigating mid-session.
Now uses useActiveSessionPlan with server props as initialData, so cached
session data from the active practice session takes priority.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../practice/[studentId]/resume/ResumeClient.tsx    | 13 ++++++++++---
 .../src/app/practice/[studentId]/resume/page.tsx    |  8 +-------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/practice/[studentId]/resume/ResumeClient.tsx b/apps/web/src/app/practice/[studentId]/resume/ResumeClient.tsx
index e911018c..ad59a011 100644
--- a/apps/web/src/app/practice/[studentId]/resume/ResumeClient.tsx
+++ b/apps/web/src/app/practice/[studentId]/resume/ResumeClient.tsx
@@ -7,26 +7,33 @@ import { ContinueSessionCard } from '@/components/practice'
 import { useTheme } from '@/contexts/ThemeContext'
 import type { Player } from '@/db/schema/players'
 import type { SessionPlan } from '@/db/schema/session-plans'
-import { useAbandonSession } from '@/hooks/useSessionPlan'
+import { useAbandonSession, useActiveSessionPlan } from '@/hooks/useSessionPlan'
 import { css } from '../../../../../styled-system/css'
 
 interface ResumeClientProps {
   studentId: string
   player: Player
-  session: SessionPlan
+  initialSession: SessionPlan
 }
 
 /**
  * Client component for the Resume page
  *
  * Shows the "Welcome back" card for students returning to an in-progress session.
+ * Uses React Query to get the most up-to-date session data (from cache if available,
+ * otherwise uses server-provided initial data).
  */
-export function ResumeClient({ studentId, player, session }: ResumeClientProps) {
+export function ResumeClient({ studentId, player, initialSession }: ResumeClientProps) {
   const router = useRouter()
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
   const abandonSession = useAbandonSession()
 
+  // Use React Query to get fresh session data
+  // If there's cached data from in-progress session, use that; otherwise use server props
+  const { data: fetchedSession } = useActiveSessionPlan(studentId, initialSession)
+  const session = fetchedSession ?? initialSession
+
   // Handle continuing the session - navigate to main practice page
   const handleContinue = useCallback(() => {
     router.push(`/practice/${studentId}`, { scroll: false })
diff --git a/apps/web/src/app/practice/[studentId]/resume/page.tsx b/apps/web/src/app/practice/[studentId]/resume/page.tsx
index 2f91fa15..5e9185df 100644
--- a/apps/web/src/app/practice/[studentId]/resume/page.tsx
+++ b/apps/web/src/app/practice/[studentId]/resume/page.tsx
@@ -41,11 +41,5 @@ export default async function ResumePage({ params }: ResumePageProps) {
     redirect(`/practice/${studentId}`)
   }
 
-  return (
-    <ResumeClient
-      studentId={studentId}
-      player={player}
-      session={activeSession}
-    />
-  )
+  return <ResumeClient studentId={studentId} player={player} initialSession={activeSession} />
 }