Repository navigation
feat(web): display user routines - #75
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
GET /routinesendpoint./apiproxy convention.How the data flow works
When a registered user opens
/routines,RegisteredUserRoutinesmounts and callsuseRoutines(). TanStack Query invokesfetchRoutines(), which requests/api/routineswith the session cookie and validates the JSON response usingroutineListResponseSchema.The query's
AbortSignalis forwarded to the browser'sfetchcall. 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/routinesThe 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/apiproxy removes that frontend-only prefix and forwards/routinesto Express on port 3000:The general rule also supports future requests such as
/api/exerciseswithout adding one Vite proxy entry per backend resource.Component organization
The page uses small, focused components instead of one large conditional block:
RoutinesLandingcomposes the page.RegisteredUserRoutinesselects the query state with early returns.RoutineListrenders the collection.RoutineCardrenders one routine.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 lintpnpm typecheckpnpm test— 105 tests passed across contracts, API, and webpnpm build