fix(practice): use React Query cache for /resume page session data

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>
This commit is contained in:
Thomas Hallock 2025-12-09 12:48:05 -06:00
parent 28b3b30da6
commit ae1a0a8e2d
2 changed files with 11 additions and 10 deletions

View File

@ -7,26 +7,33 @@ import { ContinueSessionCard } from '@/components/practice'
import { useTheme } from '@/contexts/ThemeContext' import { useTheme } from '@/contexts/ThemeContext'
import type { Player } from '@/db/schema/players' import type { Player } from '@/db/schema/players'
import type { SessionPlan } from '@/db/schema/session-plans' 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' import { css } from '../../../../../styled-system/css'
interface ResumeClientProps { interface ResumeClientProps {
studentId: string studentId: string
player: Player player: Player
session: SessionPlan initialSession: SessionPlan
} }
/** /**
* Client component for the Resume page * Client component for the Resume page
* *
* Shows the "Welcome back" card for students returning to an in-progress session. * 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 router = useRouter()
const { resolvedTheme } = useTheme() const { resolvedTheme } = useTheme()
const isDark = resolvedTheme === 'dark' const isDark = resolvedTheme === 'dark'
const abandonSession = useAbandonSession() 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 // Handle continuing the session - navigate to main practice page
const handleContinue = useCallback(() => { const handleContinue = useCallback(() => {
router.push(`/practice/${studentId}`, { scroll: false }) router.push(`/practice/${studentId}`, { scroll: false })

View File

@ -41,11 +41,5 @@ export default async function ResumePage({ params }: ResumePageProps) {
redirect(`/practice/${studentId}`) redirect(`/practice/${studentId}`)
} }
return ( return <ResumeClient studentId={studentId} player={player} initialSession={activeSession} />
<ResumeClient
studentId={studentId}
player={player}
session={activeSession}
/>
)
} }