feature: PR 6/8 — React ItemDetails, recursive Comment and poll rendering - #703
Open
devin-ai-integration[bot] wants to merge 1 commit into
Open
Conversation
Co-Authored-By: Paul Abboud <abboudpaul112@gmail.com>
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
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.
Summary
PR 6 of the Angular→React migration: the item page. The PR 4
ItemDetailsplaceholder becomes a real port ofitem-details.component.*(still lazy-loaded), plus a recursiveCommentport. Nothing undersrc/app/changes.Points worth knowing:
Storygainedcontent?andtext?. The Angular template readsitem.content(the post body) anditem.text(drives thehead-marginclass) but the AngularStoryclass 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 sendscontentand nottext, sohead-marginnever applies in practice — same as in Angular.points / poll_votes_count * 100 + '%'unguarded, which yieldsNaN%when the total is 0/undefined; React falls back to0%.Commentbinds the realhiddenattribute rather than conditionally rendering, matching Angular's[hidden]="collapse"— collapsing a deep thread and re-expanding it preserves each child's own collapse state.dangerouslySetInnerHTMLis 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.[-]/[+]collapse toggle were mouse-onlyspan (click)handlers in Angular; they now carryrole="button",tabIndex={0}and Enter/Space handling.Location.back()→useNavigate()(-1).Comment.scssneeded the only non-mechanical SCSS change in the migration so far: Angular's:host >>>block became a.commentscoped block, with the component root carryingclassName="comment".titleclass (theNavLinkclassName callback was dropping it when inactive).Verification
npm run typecheck:reactandnpx vite buildpass, with theItemDetailslazy chunk (JS + CSS) still emitted. Console clean.Deep comment tree:
Collapsed comment (subtree hidden but still mounted):
Live poll
126809— bars proportional to 73/49/179 points (24.25% / 16.28% / 59.47%):Devin-Org: engineering
Link to Devin session: https://app.devin.ai/sessions/e6419ebe67ff4f749fe1573a8e26cd07
Requested by: @abboudp
Devin Review