feat: migrate ItemComponent to React 19 (step 1 of Angular → React migration)#162
Open
devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
Open
Conversation
- Initialize React 19 + TypeScript + Vite project in react-upgrade/ - Migrate Item component from Angular to React functional component - Port TypeScript models: Story, Comment, FeedType, PollResult, Settings - Convert Angular comment pipe to formatComments utility - Add react-router-dom for Link support - Replicate header, layout, and item styling from Angular app - Wire up HN PWA API to demonstrate working Item component Co-Authored-By: Matthew Guerra <matthew.guerra@cognition.ai>
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
First step of the Angular → React 19 migration. Adds a new
react-upgrade/folder (Vite + React 19 + TypeScript) containing the migrated ItemComponent — the leaf component that renders individual Hacker News stories.What's migrated:
ItemComponent→src/components/Item/Item.tsx(React functional component with props)Story,Comment,FeedType,PollResult,Settings(converted from Angular classes to interfaces)CommentPipe→formatCommentsutility functionWhat's NOT migrated yet: Settings service/context, themes (night/amoled), remaining components (Feed, ItemDetails, Comment, User, Header, Footer), Service Worker/PWA support, routing for sub-pages.
No existing Angular code was modified.
Review & Testing Checklist for Human
time_agois typed asnumberin the original AngularStoryclass but the API actually returns a string — the ReactStoryinterface keptstringonComment.time_agobutnumberonStory.time_ago. Verify this inconsistency is acceptable or should be normalizedcd react-upgrade && npm install && npm run dev, openhttp://localhost:5173, confirm stories load with titles, points, authors, time, and comment countsNotes