diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index 6c13e1f..a93e60d 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -1,11 +1,13 @@ import type { ApiClient } from '../api/client'; import type { SessionDetailResponse } from '../api/types'; +import { createSessionContextStore, type SessionContext, type SessionContextStore } from './session-context-store'; export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; export interface VerticalSliceState { sessionCode: string; session: SessionDetailResponse | null; + context: SessionContext | null; joinState: AsyncState; startRoundState: AsyncState; loadingSession: boolean; @@ -19,10 +21,14 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } -export function createVerticalSliceController(api: ApiClient): VerticalSliceController { +export function createVerticalSliceController( + api: ApiClient, + sessionContextStore: SessionContextStore = createSessionContextStore() +): VerticalSliceController { const state: VerticalSliceState = { sessionCode: '', session: null, + context: sessionContextStore.get(), joinState: 'idle', startRoundState: 'idle', loadingSession: false, @@ -31,11 +37,31 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont const normalizeCode = (value: string): string => value.trim().toUpperCase(); + function syncContext(): void { + state.context = sessionContextStore.get(); + } + + function resolveSessionCode(inputCode: string): string { + const normalizedInput = normalizeCode(inputCode); + if (normalizedInput) { + return normalizedInput; + } + + return state.context?.sessionCode ?? ''; + } + async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - state.sessionCode = normalizeCode(sessionCode); + const resolvedCode = resolveSessionCode(sessionCode); + if (!resolvedCode) { + state.loadingSession = false; + state.errorMessage = 'Session-kode mangler.'; + return { ...state }; + } + + state.sessionCode = resolvedCode; const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -45,6 +71,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont } state.session = result.data; + syncContext(); return { ...state }; } @@ -59,15 +86,29 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont return { ...state }; } + sessionContextStore.set({ + sessionCode: join.data.session.code, + playerId: join.data.player.id, + token: join.data.player.session_token + }); + syncContext(); + state.joinState = 'success'; - return hydrateLobby(sessionCode); + return hydrateLobby(join.data.session.code); } async function startRound(sessionCode: string, categorySlug: string): Promise { state.startRoundState = 'loading'; state.errorMessage = null; - const start = await api.startRound(sessionCode, { category_slug: categorySlug }); + const resolvedCode = resolveSessionCode(sessionCode); + if (!resolvedCode) { + state.startRoundState = 'error'; + state.errorMessage = 'Session-kode mangler.'; + return { ...state }; + } + + const start = await api.startRound(resolvedCode, { category_slug: categorySlug }); if (!start.ok) { state.startRoundState = 'error'; state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.'; @@ -75,7 +116,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont } state.startRoundState = 'success'; - return hydrateLobby(sessionCode); + return hydrateLobby(resolvedCode); } return { diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index cbc368a..ae81175 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -1,5 +1,6 @@ import { describe, expect, it, vi } from 'vitest'; import { createVerticalSliceController } from '../src/spa/vertical-slice'; +import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store'; import type { ApiClient } from '../src/api/client'; function makeApiMock(overrides?: Partial): ApiClient { @@ -58,10 +59,24 @@ function makeApiMock(overrides?: Partial): ApiClient { return { ...base, ...overrides }; } +function makeMemoryStorage(): StorageLike { + const memory = new Map(); + return { + getItem: (key: string) => memory.get(key) ?? null, + setItem: (key: string, value: string) => { + memory.set(key, value); + }, + removeItem: (key: string) => { + memory.delete(key); + } + }; +} + describe('vertical slice controller: lobby -> join -> start round', () => { - it('tracks loading and success state for join + start flow', async () => { + it('tracks loading and success state for join + start flow and stores session context', async () => { const api = makeApiMock(); - const controller = createVerticalSliceController(api); + const store = createSessionContextStore(makeMemoryStorage()); + const controller = createVerticalSliceController(api, store); const beforeJoinPromise = controller.joinLobby('abcd12', 'Maja'); expect(controller.getState().joinState).toBe('loading'); @@ -70,13 +85,15 @@ describe('vertical slice controller: lobby -> join -> start round', () => { const postJoin = controller.getState(); expect(postJoin.joinState).toBe('success'); expect(postJoin.session?.session.code).toBe('ABCD12'); + expect(postJoin.context).toEqual({ sessionCode: 'ABCD12', playerId: 9, token: 'token-1' }); - const beforeStartPromise = controller.startRound('abcd12', 'history'); + const beforeStartPromise = controller.startRound('', 'history'); expect(controller.getState().startRoundState).toBe('loading'); await beforeStartPromise; const postStart = controller.getState(); expect(postStart.startRoundState).toBe('success'); + expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); }); it('surfaces a friendly error when join fails', async () => { @@ -112,4 +129,15 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(state.startRoundState).toBe('error'); expect(state.errorMessage).toContain('Kunne ikke starte runden'); }); + + it('returns explicit error when hydrate has no session code in input or context', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api); + + await controller.hydrateLobby(' '); + + const state = controller.getState(); + expect(state.errorMessage).toContain('Session-kode mangler'); + expect(api.getSession).not.toHaveBeenCalled(); + }); });