feat: Implement Phases 1-4 of Angular to React 18 Migration #136
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
Phase 1: Project Setup and Foundation - Initialize React 18 project with TypeScript using create-react-app - Install core dependencies (react-router-dom, @tanstack/react-query) - Configure project structure with components, hooks, services, types, utils folders - Migrate Prettier configuration from Angular project Phase 2: Core Infrastructure - Create type definitions for Story, Comment, User, and Settings - Implement useHackerNewsAPI hook for data fetching - Implement useSettings hook with Context API for settings management - Setup React Query provider with default options Phase 3: Component Migration - Create presentational components: Item, Comment - Create container components: Feed, ItemDetails, User - Create layout components: Header, Footer, Settings - Implement theme support (Default, Night, AMOLED Black) - Add CSS styles for all components Phase 4: Routing and Navigation - Setup React Router v6 with lazy loading for ItemDetails and User - Configure routes matching Angular app structure - Implement navigation with active link highlighting 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.
feat: Implement Phases 1-4 of Angular to React 18 Migration
Summary
This PR adds a new React 18 application (
angular-hn-react/) that mirrors the functionality of the existing Angular Hacker News PWA. The migration covers the first four phases: project setup, core infrastructure, component migration, and routing.Phase 1 - Project Setup: Created React project with TypeScript using create-react-app, installed react-router-dom and @tanstack/react-query, configured folder structure and Prettier settings.
Phase 2 - Core Infrastructure: Created TypeScript type definitions for Story, Comment, User, and Settings. Implemented
useHackerNewsAPIhook for data fetching from the node-hnapi.herokuapp.com API. ImplementeduseSettingshook with React Context for theme/font/spacing management with localStorage persistence.Phase 3 - Component Migration: Migrated all 9 Angular components to React functional components:
Phase 4 - Routing: Configured React Router v6 with lazy loading for ItemDetails and User components. Routes match the Angular app structure (news, newest, show, ask, jobs feeds + item/user detail pages).
Review & Testing Checklist for Human
https://node-hnapi.herokuapp.com/. Load the app and confirm stories appear on the feed pagesRecommended test plan:
cd angular-hn-react && npm install && npm startNotes
angular-hn-react/directory alongside the existing Angular codedangerouslySetInnerHTMLfor rendering comment/user HTML content from the API (same as Angular app)Link to Devin run: https://app.devin.ai/sessions/5ddb8d2903334f31b690d2f3cea45bf3
Requested by: Satwik Bebortha (satwik.bebortha@cognition.ai) / @satwik-cog