feat: Migrate CommentComponent from Angular to React#175
feat: Migrate CommentComponent from Angular to React#175devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
Conversation
- Create Comment.types.ts with Comment interface and CommentProps - Create Comment.tsx with useState hook, React Router Link, recursive rendering - Create Comment.module.scss with migrated styles (removed :host >>> selector, inlined SCSS variables) Co-Authored-By: Jenna Mansueto <jenna.mansueto@cognition.ai>
🤖 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:
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| dangerouslySetInnerHTML={{ __html: comment.content }} | ||
| /> | ||
| <ul className={styles.subtree}> | ||
| {comment.comments.map((subComment) => ( |
There was a problem hiding this comment.
🔴 comment.comments.map() crashes if comments is undefined/null from API
Calling .map() directly on comment.comments at line 36 will throw a TypeError at runtime if the API returns a comment object where comments is undefined or null.
Root Cause
The data comes from an external API (node-hnapi.herokuapp.com), and the TypeScript interface at src/components/Comment/Comment.types.ts:9 declares comments: Comment[] as always present, but this provides no runtime guarantee. If the API ever returns a comment without a comments field (or with null), the call to comment.comments.map(...) will throw:
TypeError: Cannot read properties of undefined (reading 'map')
Notably, the original Angular implementation at src/app/item-details/comment/comment.component.html:11 uses *ngFor="let subComment of comment.comments", which silently handles null/undefined by simply not iterating. The React port loses this safety.
Impact: A single comment with a missing comments field will crash the entire comment tree (and potentially the whole page if there's no error boundary), since React will propagate the error up.
| {comment.comments.map((subComment) => ( | |
| {(comment.comments || []).map((subComment) => ( |
Was this helpful? React with 👍 or 👎 to provide feedback.
feat: Migrate CommentComponent from Angular to React
Summary
Adds a new React version of the Angular
CommentComponentundersrc/components/Comment/. Three files are introduced:Commentinterface andCommentPropstype (mirrors the AngularCommentmodel)useStatefor collapse/expand,react-router-dom<Link>for user routing,dangerouslySetInnerHTMLfor comment content, and recursive self-rendering for nested comments:host >>>removed and SCSS media variables inlinedThe original Angular component files are left untouched.
Review & Testing Checklist for Human
a { ... }selector at the top ofComment.module.scss(lines 4–9) is not scoped by CSS Modules (only class selectors get hashed). This will bleed into global styles and should likely be removed or nested inside a scoped class.comment.comments:comment.comments.map(...)inComment.tsxwill throw ifcommentsisundefinedornull. Angular's*ngForsilently handles this. Consider adding a guard (comment.comments?.map(...)or a fallback).dangerouslySetInnerHTMLusage: Direct port of Angular's[innerHTML]binding. Verify upstream API data is sanitized, or consider adding a sanitization step.$mobile-onlyand$tablet-onlyare redefined inline rather than imported from the shared_media.scsspartial. If those shared values ever change, this file will diverge. Consider updating the import path instead.react,react-router-dom, and CSS Module support are assumed available but may not be in the project'spackage.jsonor build config. This component has not been rendered or tested — confirm it compiles and renders correctly when integrated.Suggested test plan: Install React dependencies if missing, import this component into a test harness or existing page, and render it with sample nested comment data (including a deleted comment and deeply nested replies). Verify collapse/expand, user links, and style scoping.
Notes