Skip to content

React migration phase 2d: user profile page - #571

Open
vibhaseshadri-cognition wants to merge 1 commit into
devin/1785951605-react-phase1-scaffoldfrom
devin/1786020218-react-user-page
Open

React migration phase 2d: user profile page#571
vibhaseshadri-cognition wants to merge 1 commit into
devin/1785951605-react-phase1-scaffoldfrom
devin/1786020218-react-user-page

Conversation

@vibhaseshadri-cognition

@vibhaseshadri-cognition vibhaseshadri-cognition commented Aug 6, 2026

Copy link
Copy Markdown

Summary

Ports the Angular UserComponent (src/app/user/*) to React, replacing the web/src/pages/UserPage.tsx placeholder. DOM structure, class names and copy are kept identical to the Angular template.

Behaviour mapping:

  • route.params.subscribe(...)useEffect keyed on useParams().id, re-fetching (and clearing user/errorMessage) when the id changes, with a cancelled flag so a stale response can't overwrite newer state.
  • rendering follows the Angular *ngIf chain exactly: !user && !errorMessage<Loader />, !user && errorMessage !== ''<ErrorMessage message={Could not load user ${id}.} />, otherwise the .profile markup.
  • [innerHTML]="user.about"dangerouslySetInnerHTML, only rendered when about is set.
  • Location.back()useNavigate()(-1) on the .back-button span.

web/src/user/user.scss is the component SCSS verbatim with imports repointed at web/src/styles/; the Angular-only :host >>> pre deep selector becomes .profile pre (same effect, about HTML is rendered inside .profile).

Tests (web/src/user/UserPage.test.tsx) cover the loader→profile transition, the full profile markup, a user without about, the error state, and the back button (asserted via real MemoryRouter history, not a mocked useNavigate).

npm run lint, npm test (32 passing) and npm run build all pass. Base branch is the phase 1 branch, not master.

Rendered locally against a stubbed API response:

user profile page

Link to Devin session: https://app.devin.ai/sessions/a13b52a5d39c4bea9eef18845250b691
Requested by: @vibhaseshadri-cognition


Devin Review

Status Commit
⚪ Not started

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

Open in Devin Review (Staging)

Co-Authored-By: Vibha  Seshadri <vibha.seshadri@cognition.ai>
@devin-ai-integration

Copy link
Copy Markdown

🤖 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

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