40227-vm/frontend/docs/user-progress-integration.md
2026-06-12 10:56:13 +02:00

1.9 KiB

User Progress Frontend Integration

Purpose

User progress follows the frontend three-layer architecture for sign language learned-progress. (The daily Zone check-in also persists in user_progress server-side, but the frontend reads it through the dedicated /api/zone_checkins slice — see zone-checkin-integration.md — not through this generic client.)

View -> Business Logic -> API/Data Access -> Backend

Files

View layer:

  • frontend/src/components/frameworks/SignLanguage.tsx

  • frontend/src/components/sign-language/SignLanguageProgressPanel.tsx

  • frontend/src/components/sign-language/SignLanguageVideoModal.tsx Business logic layer:

  • frontend/src/business/dashboard/hooks.ts

  • frontend/src/business/dashboard/selectors.ts

  • frontend/src/business/sign-language/hooks.ts

  • frontend/src/business/sign-language/selectors.ts

  • frontend/src/business/user-progress/hooks.ts

  • frontend/src/business/user-progress/mappers.ts

  • frontend/src/business/user-progress/types.ts

API/data access layer:

  • frontend/src/shared/api/userProgress.ts
  • frontend/src/shared/types/userProgress.ts

Constants:

  • frontend/src/shared/constants/userProgress.ts

Behavior

  • Learned sign IDs load from GET /api/user_progress?progress_type=sign_learned.
  • Marking a sign learned uses POST /api/user_progress.
  • Unmarking a sign uses DELETE /api/user_progress/by-item.
  • The sign language page combines user progress with backend content catalog records in useSignLanguagePage.
  • Views render explicit backend errors from React Query state.
  • User progress ownership is derived by the backend from the authenticated session.

Other module progress types should reuse this API only when the data is truly current-user progress. Aggregate director reporting should use separate backend summary endpoints.