Skip to content

feat(web): display user routines - #75

Merged
rd-code-23 merged 1 commit into
mainfrom
feature/routine-list-ui
Aug 28, 2026
Merged

rd-code-23 merged 1 commit into
mainfrom
feature/routine-list-ui

Conversation

@rd-code-23

Copy link
Copy Markdown
Owner

What changed

  • Connected the protected routines page to the existing GET /routines endpoint.
  • Added a feature-scoped API fetcher that validates responses with the shared routine contract.
  • Added TanStack Query caching, request cancellation, and explicit retry behavior.
  • Added registered-user loading, error, empty, and populated states.
  • Added an intentional guest placeholder without calling the authenticated endpoint.
  • Added responsive routine cards showing descriptions, exercise counts, and scheduled days.
  • Added a general local-development /api proxy convention.

How the data flow works

When a registered user opens /routines, RegisteredUserRoutines mounts and calls useRoutines(). TanStack Query invokes fetchRoutines(), which requests /api/routines with the session cookie and validates the JSON response using routineListResponseSchema.

The query's AbortSignal is forwarded to the browser's fetch call. If the query becomes obsolete, TanStack Query can cancel the underlying request rather than only discarding its eventual result. Automatic retries are disabled because the page provides a clear, user-controlled retry action.

Guests never mount RegisteredUserRoutines, so they do not send a request to an endpoint that requires an authenticated account.

Why the frontend uses /api/routines

The React page itself uses /routines. Using that same path for the development API proxy caused browser refreshes to be forwarded to Express, which displayed raw JSON instead of the React application.

The frontend therefore requests /api/routines. Vite's general /api proxy removes that frontend-only prefix and forwards /routines to Express on port 3000:

React page:       /routines
Frontend request: /api/routines
Backend receives: /routines

The general rule also supports future requests such as /api/exercises without adding one Vite proxy entry per backend resource.

Component organization

The page uses small, focused components instead of one large conditional block:

  • RoutinesLanding composes the page.
  • RegisteredUserRoutines selects the query state with early returns.
  • RoutineList renders the collection.
  • RoutineCard renders one routine.
  • Dedicated components represent guest, loading, error, and empty states.

These components remain colocated because they currently belong only to this page. They can move into separate files when reuse or additional complexity justifies it.

Visual direction

This PR establishes functional, responsive scaffolding for the routine list. Final routine styling will continue to follow the approved desktop and mobile references while retaining GoForLift's dark theme and red accent.

Validation

  • pnpm lint
  • pnpm typecheck
  • pnpm test — 105 tests passed across contracts, API, and web
  • pnpm build
  • Prettier check on all seven changed files

@rd-code-23
rd-code-23 merged commit df6ac06 into main Aug 28, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant