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:
parent
28b3b30da6
commit
ae1a0a8e2d
|
|
@ -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 })
|
||||||
|
|
|
||||||
|
|
@ -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}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue