Migrate Angular 9 Hacker News client to React 18 #146
Conversation
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
This commit completes the full migration from Angular 9 to React 18: Phase 1: Project Setup and Build System - Replaced Angular CLI with Vite for faster builds - Updated package.json with React 18 dependencies - Added TypeScript configuration for React/Vite Phase 2: Data Models and Types - Migrated Story, User, Comment, and Settings interfaces - Created centralized models/index.ts Phase 3: Service Layer Migration - Converted HackerNewsAPIService to useHackerNewsAPI hook - Converted SettingsService to SettingsContext with Provider - Implemented localStorage persistence for settings - Added system dark mode preference detection Phase 4: Component Migration - Migrated all Angular components to React functional components - ItemComponent, FeedComponent, ItemDetailsComponent - CommentComponent with collapse functionality - UserComponent, HeaderComponent, FooterComponent - SettingsComponent with theme, font, and spacing controls - LoaderComponent and ErrorMessageComponent Phase 5: Routing Migration - Replaced Angular Router with React Router v6 - Implemented lazy loading with React.lazy() and Suspense - Set up routes for feeds, item details, and user profiles Phase 6: Template Migration - Converted all Angular templates to JSX - Replaced *ngFor with .map() - Replaced *ngIf with conditional rendering - Replaced [routerLink] with Link components Phase 7: PWA Setup - Added PWA manifest for installability - Copied assets to public directory for Vite - Set up service worker registration for production Co-Authored-By: Satwik Bebortha <satwik.bebortha@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:
|
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.
Migrate Angular 9 Hacker News client to React 18
Summary
This PR completes a full migration of the Hacker News PWA client from Angular 9 to React 18. The migration includes:
Build System: Replaced Angular CLI with Vite for faster development and builds. Updated TypeScript configuration for React/JSX support.
Service Layer: Converted
HackerNewsAPIServiceto a customuseHackerNewsAPIhook using async/await instead of RxJS Observables. ConvertedSettingsServiceto React Context (SettingsContext) with localStorage persistence and system dark mode detection.Components: Migrated all Angular components to React functional components:
Routing: Replaced Angular Router with React Router v6. Implemented lazy loading using
React.lazy()andSuspensefor item details and user routes.Styling: Preserved SCSS styles with theme support (default, night, amoledblack). Migrated theme mixin system.
Review & Testing Checklist for Human
This is a complete framework rewrite with significant risk. Please verify:
/news/1,/newest/1,/show/1,/ask/1,/jobs/1and paginationRecommended test plan:
npm install && npm run devNotes
Link to Devin run: https://app.devin.ai/sessions/85edcbd223a64437937f4d1e6a8b5754
Requested by: Satwik Bebortha (satwik.bebortha@cognition.ai) / @satwik-cog