Skip to content

feature: port item details, recursive comments and polls to React (Phase 2c) - #574

Open
vibhaseshadri-cognition wants to merge 1 commit into
devin/1785951605-react-phase1-scaffoldfrom
devin/1786020222-react-phase2c-item-details
Open

feature: port item details, recursive comments and polls to React (Phase 2c)#574
vibhaseshadri-cognition wants to merge 1 commit into
devin/1785951605-react-phase1-scaffoldfrom
devin/1786020222-react-phase2c-item-details

Conversation

@vibhaseshadri-cognition

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

Copy link
Copy Markdown

Summary

Phase 2c of the Angular → React migration: ports ItemDetailsComponent and the recursive CommentComponent into web/. Angular sources in src/ are untouched; this only fills in the ItemDetailsPage placeholder and adds web/src/item-details/**.

  • pages/ItemDetailsPage.tsxuseParams().idfetchItemContent(Number(id)), <Loader /> while pending, <ErrorMessage message="Could not load item comments." /> on rejection, window.scrollTo(0, 0) on mount, both header variants (.mobile.item-header / .laptop), poll bars, .subject via dangerouslySetInnerHTML, back button via useNavigate()(-1) (Angular Location.back()), and the comment list. The effect is keyed on id with a cancelled flag so a late response for a previous id can't overwrite state.
  • item-details/Comment.tsx — recursion over comment.comments, useState collapse per comment rendering [-]/[+] and toggling .meta-collapse plus the hidden attribute (same as Angular's [hidden], so children stay mounted), deleted branch rendering [deleted] | Comment Deleted.
  • routerLinkActive="active" is preserved by using NavLink (react-router v6 appends active to a string className).

Two things worth flagging in the SCSS port, since it's not byte-for-byte verbatim:

  • Angular's per-component style encapsulation doesn't exist here, so the bare element selectors (p, a, ul, li) from item-details.component.scss are nested under .item, and comment.component.scss's :host >>> a becomes .comment-list a. .main-content stays top-level (identical to the rule the feed component already declares). Rendered results are unchanged; nothing leaks into other pages.
  • The laptop header's [class.head-margin]="item.text" is keyed on item.content here. Story has no text field (and the node-hnapi item payload returns content), so the Angular condition was dead at runtime; content is the field the template meant. Net effect: text posts get the intended 15px header margin.

Tests: 18 new Vitest/RTL cases (ItemDetailsPage.test.tsx, Comment.test.tsx) covering loading/error, both header variants, openLinkInNewTab target/rel, self-linking titles, job postings, poll bar widths (30/40 → 75%), nested comments, independent collapse of parent vs. child, deleted comments, back navigation and refetch on id change.

npm run lint, npm test (45 passed) and npm run build all pass in web/.

Link to Devin session: https://app.devin.ai/sessions/c6d479ade59146b0a3279b219add9b40
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)

…t (Phase 2c)

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