fix(frontend): restore session context behavior in vertical slice
All checks were successful
CI / test-and-quality (push) Successful in 2m19s
CI / test-and-quality (pull_request) Successful in 2m20s

This commit is contained in:
2026-03-01 12:50:29 +00:00
parent 53d7e1770c
commit ff6dc35754
2 changed files with 98 additions and 8 deletions

View File

@@ -3,6 +3,17 @@ import type { SessionDetailResponse } from '../api/types';
export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; 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 { export interface VerticalSliceState {
sessionCode: string; sessionCode: string;
session: SessionDetailResponse | null; session: SessionDetailResponse | null;
@@ -19,9 +30,19 @@ export interface VerticalSliceController {
startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState>; startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState>;
} }
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 = { const state: VerticalSliceState = {
sessionCode: '', sessionCode: persistedContext?.sessionCode ?? '',
session: null, session: null,
joinState: 'idle', joinState: 'idle',
startRoundState: 'idle', startRoundState: 'idle',
@@ -34,7 +55,10 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
async function hydrateLobby(sessionCode: string): Promise<VerticalSliceState> { async function hydrateLobby(sessionCode: string): Promise<VerticalSliceState> {
state.loadingSession = true; state.loadingSession = true;
state.errorMessage = null; 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); const result = await api.getSession(state.sessionCode);
state.loadingSession = false; state.loadingSession = false;
@@ -45,6 +69,12 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
} }
state.session = result.data; state.session = result.data;
state.sessionCode = normalizeCode(result.data.session.code);
if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) {
sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode });
}
return { ...state }; return { ...state };
} }
@@ -52,7 +82,11 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
state.joinState = 'loading'; state.joinState = 'loading';
state.errorMessage = null; 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) { if (!join.ok) {
state.joinState = 'error'; state.joinState = 'error';
state.errorMessage = 'Join fejlede. Tjek kode eller nickname og prøv igen.'; state.errorMessage = 'Join fejlede. Tjek kode eller nickname og prøv igen.';
@@ -60,14 +94,26 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
} }
state.joinState = 'success'; 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<VerticalSliceState> { async function startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState> {
state.startRoundState = 'loading'; state.startRoundState = 'loading';
state.errorMessage = null; 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) { if (!start.ok) {
state.startRoundState = 'error'; state.startRoundState = 'error';
state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.'; state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.';
@@ -75,7 +121,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
} }
state.startRoundState = 'success'; state.startRoundState = 'success';
return hydrateLobby(sessionCode); return hydrateLobby(codeToUse);
} }
return { return {

View File

@@ -1,5 +1,9 @@
import { describe, expect, it, vi } from 'vitest'; 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'; import type { ApiClient } from '../src/api/client';
function makeApiMock(overrides?: Partial<ApiClient>): ApiClient { function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
@@ -58,6 +62,16 @@ function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
return { ...base, ...overrides }; 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', () => { 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', async () => {
const api = makeApiMock(); const api = makeApiMock();
@@ -79,6 +93,36 @@ describe('vertical slice controller: lobby -> join -> start round', () => {
expect(postStart.startRoundState).toBe('success'); 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 () => { it('surfaces a friendly error when join fails', async () => {
const api = makeApiMock({ const api = makeApiMock({
joinSession: vi.fn().mockResolvedValue({ joinSession: vi.fn().mockResolvedValue({