From 24a319fd8f68a1bb9d8902a2b9aa7e6312a5ba14 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:50:29 +0000 Subject: [PATCH] fix(frontend): restore session context behavior in vertical slice --- frontend/src/spa/vertical-slice.ts | 60 +++++++++++++++++++++++---- frontend/tests/vertical-slice.test.ts | 46 +++++++++++++++++++- 2 files changed, 98 insertions(+), 8 deletions(-) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index f531f53..a63bf93 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -4,6 +4,17 @@ import { deriveGameplayPhase, type GameplayPhase } from './gameplay-phase-machin export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; +export interface SessionContext { + sessionCode: string; + playerToken: string; + nickname: string; +} + +export interface SessionContextStore { + get(): SessionContext | null; + set(context: SessionContext): void; +} + export interface VerticalSliceState { sessionCode: string; session: SessionDetailResponse | null; @@ -21,9 +32,19 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } -export function createVerticalSliceController(api: ApiClient): VerticalSliceController { +const NOOP_SESSION_CONTEXT_STORE: SessionContextStore = { + get: () => null, + set: () => undefined +}; + +export function createVerticalSliceController( + api: ApiClient, + sessionContextStore: SessionContextStore = NOOP_SESSION_CONTEXT_STORE +): VerticalSliceController { + const persistedContext = sessionContextStore.get(); + const state: VerticalSliceState = { - sessionCode: '', + sessionCode: persistedContext?.sessionCode ?? '', session: null, gameplayPhase: null, joinState: 'idle', @@ -37,7 +58,10 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - state.sessionCode = normalizeCode(sessionCode); + + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + state.sessionCode = normalizedRequestedCode || fallbackCode; const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -50,6 +74,12 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont state.session = result.data; state.gameplayPhase = deriveGameplayPhase(result.data); + state.sessionCode = normalizeCode(result.data.session.code); + + if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) { + sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode }); + } + return { ...state }; } @@ -57,7 +87,11 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont state.joinState = 'loading'; state.errorMessage = null; - const join = await api.joinSession({ code: sessionCode, nickname }); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const requestCode = normalizedRequestedCode || fallbackCode; + + const join = await api.joinSession({ code: requestCode, nickname }); if (!join.ok) { state.joinState = 'error'; state.errorMessage = 'Join fejlede. Tjek kode eller nickname og prøv igen.'; @@ -65,14 +99,26 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont } state.joinState = 'success'; - return hydrateLobby(sessionCode); + state.sessionCode = normalizeCode(join.data.session.code || requestCode); + + sessionContextStore.set({ + sessionCode: state.sessionCode, + playerToken: join.data.player.session_token, + nickname: join.data.player.nickname + }); + + return hydrateLobby(state.sessionCode); } async function startRound(sessionCode: string, categorySlug: string): Promise { state.startRoundState = 'loading'; state.errorMessage = null; - const start = await api.startRound(sessionCode, { category_slug: categorySlug }); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const codeToUse = normalizedRequestedCode || fallbackCode; + + const start = await api.startRound(codeToUse, { category_slug: categorySlug }); if (!start.ok) { state.startRoundState = 'error'; state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.'; @@ -80,7 +126,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont } state.startRoundState = 'success'; - return hydrateLobby(sessionCode); + return hydrateLobby(codeToUse); } return { diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index abaeebd..ef1e004 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -1,5 +1,9 @@ import { describe, expect, it, vi } from 'vitest'; -import { createVerticalSliceController } from '../src/spa/vertical-slice'; +import { + createVerticalSliceController, + type SessionContext, + type SessionContextStore +} from '../src/spa/vertical-slice'; import type { ApiClient } from '../src/api/client'; function makeApiMock(overrides?: Partial): ApiClient { @@ -58,6 +62,16 @@ function makeApiMock(overrides?: Partial): ApiClient { return { ...base, ...overrides }; } +function makeSessionContextStore(initial: SessionContext | null = null): SessionContextStore { + let value = initial; + return { + get: vi.fn(() => value), + set: vi.fn((next: SessionContext) => { + value = next; + }) + }; +} + describe('vertical slice controller: lobby -> join -> start round', () => { it('tracks loading and success state for join + start flow', async () => { const api = makeApiMock(); @@ -80,6 +94,36 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(postStart.startRoundState).toBe('success'); }); + it('persists session context after join and syncs normalized session code', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore(); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby('abcd12', 'Maja'); + + expect(sessionContextStore.set).toHaveBeenCalledWith({ + sessionCode: 'ABCD12', + playerToken: 'token-1', + nickname: 'Maja' + }); + expect(controller.getState().sessionCode).toBe('ABCD12'); + }); + + it('uses stored session code as fallback for join + hydrate flow when input code is empty', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore({ + sessionCode: 'wxyz99', + playerToken: 'token-old', + nickname: 'Maja' + }); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby(' ', 'Maja'); + + expect(api.joinSession).toHaveBeenCalledWith({ code: 'WXYZ99', nickname: 'Maja' }); + expect(api.getSession).toHaveBeenCalledWith('ABCD12'); + }); + it('surfaces a friendly error when join fails', async () => { const api = makeApiMock({ joinSession: vi.fn().mockResolvedValue({