fix(frontend): restore session context behavior in vertical slice
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
Reference in New Issue
Block a user