Skip to content

React migration: Full component implementation#326

Open
devanshi-gpta wants to merge 1 commit into
devin/1781112571-react-migration-scaffoldingfrom
devin/1781291455-react-migration-implementation
Open

React migration: Full component implementation#326
devanshi-gpta wants to merge 1 commit into
devin/1781112571-react-migration-scaffoldingfrom
devin/1781291455-react-migration-implementation

Conversation

@devanshi-gpta

@devanshi-gpta devanshi-gpta commented Jun 12, 2026

Copy link
Copy Markdown

Summary

Implements all components, services, and configuration for the Angular → React migration on top of the scaffolding from PR #322. This completes the 17 planned child-session tasks in a single PR.

Architecture:

  • models/types.ts — TypeScript interfaces (Story, Comment, User, PollResult, Settings) + FeedType/Theme union types replacing Angular classes
  • api/hn-api.tsfetch-based API layer (fetchFeed, fetchItemContent, fetchUser) replacing HackerNewsAPIService + RxJS Observables; polls are fetched with Promise.all
  • context/SettingsContext.tsx + useSettings.ts — React Context replacing Angular's SettingsService; persists theme, openLinkInNewTab, titleFontSize, listSpacing to localStorage; respects prefers-color-scheme: dark media query
  • App.tsxBrowserRouter + Routes matching the Angular route config: /:feedType/:page, /item/:id, /user/:id with Navigate redirect from / to /news/1

Components ported 1:1 from Angular:
Header, Footer, SettingsPanel, Feed, FeedItem, Comment (recursive), ItemDetails (with poll support), UserProfile, Loader, ErrorMessage

Styles: All SCSS ported including the theme mixin system (default/night/AMOLED black), media queries, and component-specific styles.

PWA: vite-plugin-pwa configured with autoUpdate, manifest icons, and Workbox NetworkFirst runtime caching for the HN API.

tsc -b, eslint, and vite build all pass clean.

Link to Devin session: https://app.devin.ai/sessions/a1e65eb5f0104fdb81ade88690b7fff8
Requested by: @devanshi-gpta


Devin Review

Status Commit
⚪ Not started

Run Devin Review

Open in Devin Review (Staging)

…s, and PWA

Implements the complete Angular → React migration:
- TypeScript interfaces for all models (Story, Comment, User, PollResult, Settings)
- API service using native fetch (replaces Angular HttpClient + RxJS)
- Settings context with React Context + localStorage persistence
- All SCSS styles ported with theming (default, night, AMOLED black)
- Components: Header, Footer, SettingsPanel, Feed, FeedItem, Comment,
  ItemDetails, UserProfile, Loader, ErrorMessage
- React Router v6 with all feed routes, item details, user profiles
- PWA configuration via vite-plugin-pwa with workbox runtime caching
- Utility functions (formatComment pipe replacement)

Co-Authored-By: Devanshi Gupta <devanshi.gupta@cognition.ai>
@devin-ai-integration

Copy link
Copy Markdown

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

1 participant