From 4a6acd79c182bd21b99753ba765642f0ee9ba6f1 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:21:31 +0000 Subject: [PATCH 1/2] feat(frontend): add robust session context store for SPA --- frontend/src/spa/session-context-store.ts | 123 +++++++++++++++++++ frontend/tests/session-context-store.test.ts | 56 +++++++++ 2 files changed, 179 insertions(+) create mode 100644 frontend/src/spa/session-context-store.ts create mode 100644 frontend/tests/session-context-store.test.ts diff --git a/frontend/src/spa/session-context-store.ts b/frontend/src/spa/session-context-store.ts new file mode 100644 index 0000000..b92f5be --- /dev/null +++ b/frontend/src/spa/session-context-store.ts @@ -0,0 +1,123 @@ +export interface SessionContext { + sessionCode: string; + playerId: number; + token: string; +} + +export interface SessionContextInput { + sessionCode: string; + playerId: number; + token: string; +} + +export interface SessionContextStore { + get(): SessionContext | null; + set(input: SessionContextInput): SessionContext; + clear(): void; +} + +export interface StorageLike { + getItem(key: string): string | null; + setItem(key: string, value: string): void; + removeItem(key: string): void; +} + +const DEFAULT_STORAGE_KEY = 'wpp.session-context'; + +function normalizeSessionCode(value: string): string { + return value.trim().toUpperCase(); +} + +function normalizeToken(value: string): string { + return value.trim(); +} + +function toContext(input: SessionContextInput): SessionContext { + const sessionCode = normalizeSessionCode(input.sessionCode); + const token = normalizeToken(input.token); + + if (!sessionCode) { + throw new Error('sessionCode is required'); + } + if (!Number.isInteger(input.playerId) || input.playerId <= 0) { + throw new Error('playerId must be a positive integer'); + } + if (!token) { + throw new Error('token is required'); + } + + return { + sessionCode, + playerId: input.playerId, + token + }; +} + +function safeParse(raw: string): SessionContext | null { + try { + const data = JSON.parse(raw) as Partial; + if (typeof data.sessionCode !== 'string' || typeof data.playerId !== 'number' || typeof data.token !== 'string') { + return null; + } + return toContext({ + sessionCode: data.sessionCode, + playerId: data.playerId, + token: data.token + }); + } catch { + return null; + } +} + +export function createSessionContextStore(storage?: StorageLike, storageKey = DEFAULT_STORAGE_KEY): SessionContextStore { + let current: SessionContext | null = null; + + function getFromStorage(): SessionContext | null { + if (!storage) { + return null; + } + + const raw = storage.getItem(storageKey); + if (!raw) { + return null; + } + + const parsed = safeParse(raw); + if (!parsed) { + storage.removeItem(storageKey); + return null; + } + + return parsed; + } + + return { + get(): SessionContext | null { + if (current) { + return { ...current }; + } + + const fromStorage = getFromStorage(); + if (fromStorage) { + current = fromStorage; + return { ...current }; + } + + return null; + }, + set(input: SessionContextInput): SessionContext { + const normalized = toContext(input); + current = normalized; + if (storage) { + storage.setItem(storageKey, JSON.stringify(normalized)); + } + return { ...normalized }; + }, + clear(): void { + current = null; + if (storage) { + storage.removeItem(storageKey); + } + } + }; +} diff --git a/frontend/tests/session-context-store.test.ts b/frontend/tests/session-context-store.test.ts new file mode 100644 index 0000000..f27fe93 --- /dev/null +++ b/frontend/tests/session-context-store.test.ts @@ -0,0 +1,56 @@ +import { describe, expect, it } from 'vitest'; +import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store'; + +function makeMemoryStorage(seed?: Record): StorageLike { + const memory = new Map(Object.entries(seed ?? {})); + return { + getItem: (key: string) => memory.get(key) ?? null, + setItem: (key: string, value: string) => { + memory.set(key, value); + }, + removeItem: (key: string) => { + memory.delete(key); + } + }; +} + +describe('session context store', () => { + it('normalizes and persists sessionCode/playerId/token', () => { + const storage = makeMemoryStorage(); + const store = createSessionContextStore(storage, 'ctx'); + + const value = store.set({ sessionCode: ' abcd12 ', playerId: 12, token: ' token-1 ' }); + expect(value).toEqual({ sessionCode: 'ABCD12', playerId: 12, token: 'token-1' }); + + expect(store.get()).toEqual({ sessionCode: 'ABCD12', playerId: 12, token: 'token-1' }); + expect(storage.getItem('ctx')).toBe('{"sessionCode":"ABCD12","playerId":12,"token":"token-1"}'); + }); + + it('loads from storage and clears invalid payloads', () => { + const storage = makeMemoryStorage({ ctx: '{"sessionCode":"","playerId":0,"token":""}' }); + const store = createSessionContextStore(storage, 'ctx'); + + expect(store.get()).toBeNull(); + expect(storage.getItem('ctx')).toBeNull(); + }); + + it('supports clear()', () => { + const storage = makeMemoryStorage(); + const store = createSessionContextStore(storage, 'ctx'); + + store.set({ sessionCode: 'ABCD12', playerId: 3, token: 'token-3' }); + store.clear(); + + expect(store.get()).toBeNull(); + expect(storage.getItem('ctx')).toBeNull(); + }); + + it('rejects invalid context writes', () => { + const store = createSessionContextStore(); + expect(() => store.set({ sessionCode: '', playerId: 1, token: 'token-1' })).toThrow('sessionCode is required'); + expect(() => store.set({ sessionCode: 'ABCD12', playerId: 0, token: 'token-1' })).toThrow( + 'playerId must be a positive integer' + ); + expect(() => store.set({ sessionCode: 'ABCD12', playerId: 2, token: ' ' })).toThrow('token is required'); + }); +}); -- 2.39.5 From 07a8c9568d85a550f5617096a995cd7d4dbe8f21 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:21:50 +0000 Subject: [PATCH 2/2] feat(frontend): wire SPA flow to session context store --- frontend/src/spa/vertical-slice.ts | 51 ++++++++++++++++++++++++--- frontend/tests/vertical-slice.test.ts | 34 ++++++++++++++++-- 2 files changed, 77 insertions(+), 8 deletions(-) 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(); + }); }); -- 2.39.5