Skip to content

feature: PR 6/8 — React ItemDetails, recursive Comment and poll rendering - #703

Open
devin-ai-integration[bot] wants to merge 1 commit into
devin/react-migration-05-feedfrom
devin/react-migration-06-item-details
Open

feature: PR 6/8 — React ItemDetails, recursive Comment and poll rendering#703
devin-ai-integration[bot] wants to merge 1 commit into
devin/react-migration-05-feedfrom
devin/react-migration-06-item-details

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Aug 26, 2026

Copy link
Copy Markdown

Summary

PR 6 of the Angular→React migration: the item page. The PR 4 ItemDetails placeholder becomes a real port of item-details.component.* (still lazy-loaded), plus a recursive Comment port. Nothing under src/app/ changes.

Points worth knowing:

  • Story gained content? and text?. The Angular template reads item.content (the post body) and item.text (drives the head-margin class) but the Angular Story class declares neither, so strict TS rejected both reads. Both are added as optional to the React model only; verified against a live ask item, the API sends content and not text, so head-margin never applies in practice — same as in Angular.
  • Poll bar width is guarded. Angular computed points / poll_votes_count * 100 + '%' unguarded, which yields NaN% when the total is 0/undefined; React falls back to 0%.
  • Collapse keeps the subtree mounted. Comment binds the real hidden attribute rather than conditionally rendering, matching Angular's [hidden]="collapse" — collapsing a deep thread and re-expanding it preserves each child's own collapse state.
  • dangerouslySetInnerHTML is used for the post body and comment/poll content. This is parity with Angular's [innerHTML] on API-supplied pre-rendered HTML, not a new sink.
  • Accessibility fix: the back button and the [-]/[+] collapse toggle were mouse-only span (click) handlers in Angular; they now carry role="button", tabIndex={0} and Enter/Space handling. Location.back()useNavigate()(-1).
  • Comment.scss needed the only non-mechanical SCSS change in the migration so far: Angular's :host >>> block became a .comment scoped block, with the component root carrying className="comment".
  • Follow-up to PR 5: internal title links now keep their title class (the NavLink className callback was dropping it when inactive).

Verification

npm run typecheck:react and npx vite build pass, with the ItemDetails lazy chunk (JS + CSS) still emitted. Console clean.

Deep comment tree:

item details with comment tree

Collapsed comment (subtree hidden but still mounted):

collapsed comment

Live poll 126809 — bars proportional to 73/49/179 points (24.25% / 16.28% / 59.47%):

poll results

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/e6419ebe67ff4f749fe1573a8e26cd07
Requested by: @abboudp


Devin Review

Status Commit
⚪ Not started

Run Devin Review

Devin Review (Staging)

Co-Authored-By: Paul Abboud <abboudpaul112@gmail.com>
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 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.

0 participants