Skip to content

feat: Set up React project foundation and migrate type definitions#152

Open
devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
devin/1769562021-react-migration-foundation
Open

feat: Set up React project foundation and migrate type definitions#152
devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
devin/1769562021-react-migration-foundation

Conversation

@devin-ai-integration
Copy link

Summary

This PR establishes the React project foundation for migrating the Angular Hacker News PWA to React. It creates a new react-app/ directory containing a Vite-based React + TypeScript project with all necessary type definitions and utility functions migrated from the Angular codebase.

Key changes:

  • Initialized React + TypeScript project with Vite and strict TypeScript configuration
  • Installed core dependencies: react-router-dom v6, sass, vitest, and testing-library
  • Created folder structure: components/, contexts/, hooks/, models/, utils/, pages/
  • Migrated type definitions from Angular classes to TypeScript interfaces (Story, Comment, Settings, User, FeedType, PollResult)
  • Created utility functions replacing Angular pipes: date/time formatting, comment count formatting, URL validation
  • Added 25 unit tests for all utility functions

Review & Testing Checklist for Human

  • Verify time_ago type in Story interface: The Angular story.ts has time_ago: number but I used time_ago: string to match the comment.ts pattern. Check which is correct for the HN API response.
  • Verify User model field name: The Angular code has a typo crated_time - I corrected it to created_time. Confirm the actual API field name.
  • Confirm FeedType values: I defined FeedType = 'news' | 'newest' | 'show' | 'ask' | 'jobs' per the task requirements, separate from ItemType = 'poll' | 'story' | 'job' from the original Angular code. Verify this distinction is correct.

Recommended test plan:

  1. cd react-app && npm install
  2. npm run lint - should pass with no errors
  3. npm run build - should compile successfully
  4. npm test - should pass all 25 tests
  5. npm run dev - should start dev server on port 3000

Notes

This is Phase 1 of the Angular to React migration, focusing on foundation setup without requiring Angular component knowledge. The type definitions are pure TypeScript interfaces with no framework dependencies.

Link to Devin run: https://app.devin.ai/sessions/13388063be854a3aa8b82a1eeec96dc7
Requested by: Jack Meigel (@cogjack)

- Initialize React + TypeScript project with Vite
- Configure TypeScript strict mode
- Install core dependencies (react-router-dom v6, sass, vitest, testing-library)
- Set up folder structure (components, contexts, hooks, models, utils, pages)
- Migrate type definitions from Angular:
  - story.ts: Story interface with all properties
  - comment.ts: Comment interface with recursive structure
  - settings.ts: Settings interface for app preferences
  - user.ts: User interface for HN user profiles
  - feed-type.ts: FeedType and ItemType union types
  - poll-result.ts: PollResult interface
- Create utility functions:
  - date.ts: formatTimeAgo, formatDate, formatDateTime
  - comments.ts: formatCommentCount, formatCommentCountAbbreviated
  - url.ts: hasUrl, extractDomain, isValidUrl, getHackerNewsItemUrl, getHackerNewsUserUrl
- Add unit tests for all utility functions (25 tests passing)

Co-Authored-By: Jack  Meigel <jack.meigel@cognition.ai>
@devin-ai-integration
Copy link
Author

🤖 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 and CI 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.

0 participants