feature: Phase 2C — React user profile feature

[vibhaseshadri-cognition]

Summary

Phase 2C of the Angular → React migration: ports UserComponent to react/src/features/user/ as UserProfile. Builds on the Phase 1 foundation (PR #713) and stays strictly inside react/src/features/user/; wiring into AppRoutes is left for Phase 3.

Behaviour mirrors UserComponent: read :id from the route, reset state and call hackerNewsApi.fetchUser(id) on mount / id change, errorMessage = 'Could not load user ' + id + '.' on failure, goBack → navigate(-1). A cancelled flag in the effect cleanup guards against stale responses when the id changes mid-request (the Angular version had no such guard). user.about is rendered via dangerouslySetInnerHTML, matching [innerHTML].

Angular's :host >>> pre { white-space: pre-wrap } has no React equivalent, so the component is wrapped in <div class="user"> and the rule is emitted as .user pre.

Angular → React mapping

Angular file	React file(s)
src/app/user/user.component.ts	react/src/features/user/User.tsx (UserProfile, also default export), react/src/features/user/index.ts
src/app/user/user.component.html	react/src/features/user/User.tsx (JSX)
src/app/user/user.component.scss	react/src/features/user/User.scss
src/app/user/user.component.spec.ts	react/src/features/user/User.test.tsx

Tests (User.test.tsx, 10 tests)

• Loading state (Loader) while the request is pending, no .profile
• Error state: ErrorMessage with Could not load user a., no Loader / profile
• Success: .name, .right (123 ★), .age (Created …), mobile title-block (Profile: a)
• about rendered as HTML (<b>, <pre>) inside .other-details p
• .other-details absent when about is '' and when about is undefined
• Back button click → navigate(-1)
• Refetch when :id changes (/user/a → /user/b), Loader shown in between, new profile rendered
• fetchUser called exactly once with the exact id
• Stale response guard: response for a arriving after navigating to b is ignored

Coverage for src/features/user: 100% lines / statements / functions, 92.9% branches. Whole React suite: 10 files, 48 tests passing. npm run format:check, npm run lint (only the pre-existing react-refresh warning), npm run build all pass.

Screenshot

Rendered with UserProfile temporarily wired into /user/:id locally (not committed) and the API response mocked, since node-hnapi.herokuapp.com/user/:id currently returns 404.

Notes

• No react/package.json changes. npm run test:coverage needs @vitest/coverage-v8, which is not in the Phase 1 lockfile; it was installed locally with --no-save for verification only.
• Deviation: none in behaviour. The back-button arrow border styling comes from the global _themes.scss (Phase 3 wiring), so it appears unstyled in the mobile screenshot.

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/dcc94e31ae494da69e215afed906d55d
Open in Devin Desktop: https://app.devin.ai/desktop/session/dcc94e31ae494da69e215afed906d55d?variant=devin
Requested by: @vibhaseshadri-cognition

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring