feat: scaffold React foundation for Angular-to-React migration#260
feat: scaffold React foundation for Angular-to-React migration#260devin-ai-integration[bot] wants to merge 2 commits into
Conversation
…laceholder components - Scaffold react-app/ with Vite react-ts template - Install react-router-dom, sass, vite-plugin-pwa - Port TypeScript models: Story, Comment, User, Settings, PollResult - Create hackerNewsApi service with async/await (replaces RxJS) - Create formatCommentCount utility (replaces Angular pipe) - Add placeholder stubs for pages and components so parallel sessions can merge without import errors Co-Authored-By: Matthew Guerra <matthew.guerra@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}
| points: number; | ||
| user: string; | ||
| time: number; | ||
| time_ago: number; |
There was a problem hiding this comment.
🟡 Story.time_ago typed as number but the API returns a string
The HN API returns time_ago as a human-readable string (e.g. "3 hours ago"). The Comment model at react-app/src/models/comment.ts:6 correctly types it as string, but Story.time_ago is typed as number. Any component that renders story.time_ago with number-specific formatting, or any code that performs arithmetic on it, will behave incorrectly. This is a pre-existing bug copied from the Angular model (src/app/shared/models/story.ts:11).
| time_ago: number; | |
| time_ago: string; |
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Acknowledged — the original Angular model at src/app/shared/models/story.ts:12 also has time_ago: number. This is a pre-existing bug from the Angular source that was intentionally preserved for parity during the migration. A follow-up PR can correct it to string to match the API response.
| @@ -0,0 +1,8 @@ | |||
| export interface User { | |||
| id: string; | |||
| crated_time: number; | |||
There was a problem hiding this comment.
🟡 User.crated_time is a typo for created_time, causing field to be undefined at runtime
The field crated_time at react-app/src/models/user.ts:3 is a typo for created_time, which is the actual field name returned by the node-hnapi. When an API response is cast to User, the real created_time value exists on the runtime object but TypeScript only exposes crated_time (which is undefined). Any code accessing user.crated_time will get undefined. This is a pre-existing bug copied from src/app/shared/models/user.ts:3.
| crated_time: number; | |
| created_time: number; |
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Acknowledged — crated_time matches the original Angular model at src/app/shared/models/user.ts:3. This typo was intentionally preserved for migration parity. A follow-up PR can correct it to created_time.
Co-Authored-By: Matthew Guerra <matthew.guerra@cognition.ai>
1 participant
Summary
Sets up the React foundation in
react-app/that other parallel migration sessions will build upon. This PR includes:react-tstemplate withreact-router-dom,sass, andvite-plugin-pwainstalledStory,Comment,User,Settings,PollResult, plusFeedTypetype aliashackerNewsApi.tsreplacing RxJS Observables withasync/awaitfetch calls (fetchFeed,fetchItemContent,fetchPollContent,fetchUser)formatCommentCount(ported from Angular pipe)FeedPage,ItemDetailsPage,UserPage) and components (Header,Footer,Settings,FeedItem,Comment,Loader,ErrorMessage) so parallel sessions can merge without import errorsAdditionally fixed a bug caught by Devin Review:
FeedTypewas incorrectly defined as feed endpoint categories ('news' | 'newest' | ...) instead of API item types ('poll' | 'story' | 'job'), which would have made thestory.type === 'poll'check infetchItemContentunreachable from TypeScript's perspective.Review & Testing Checklist for Human
cd react-app && npm install && npx tsc --noEmitcompiles without errorssrc/app/shared/models/cd react-app && npm run devto confirm the Vite dev server startsNotes
FeedTypewas corrected to'poll' | 'story' | 'job'to match the original Angular source atsrc/app/shared/models/feed-type.type.tsand ensurefetchItemContent's poll-handling logic works correctlyUser.crated_timeandStory.time_ago: numberpreserve pre-existing bugs from the original Angular models for migration parity — can be corrected in a follow-up PRLink to Devin session: https://app.devin.ai/sessions/3202893d19f64915a522e06cc821ca1a
Requested by: @matthewguerra-cog
Devin Review