Phase 2: Data Layer Migration - React hooks for API and Settings Context #134
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
- Create src/hooks/api.ts with useFetchFeed, useFetchItem, useFetchUser hooks - Implements React Query based data fetching with abort signal support - Handles poll type stories with poll option fetching - Includes TypeScript interfaces for Story, User, Comment, PollResult - Create src/contexts/SettingsContext.tsx with SettingsProvider and useSettings hook - Converts all settings from original SettingsService - Implements theme detection logic with system color scheme preference - Maintains localStorage persistence for all settings - Provides toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing methods Co-Authored-By: Cindy Huang <cindy.huang@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.
Phase 2: Data Layer Migration - React hooks for API and Settings Context
Summary
This PR adds React equivalents of the Angular HackerNewsAPIService and SettingsService as part of the migration to React.
New files:
src/hooks/api.ts- React Query hooks (useFetchFeed,useFetchItem,useFetchUser) that replace the Angular HackerNewsAPIService. Implements request cancellation via React Query's abort signal.src/contexts/SettingsContext.tsx- React Context withSettingsProvideranduseSettingshook that replaces the Angular SettingsService. Includes theme detection, localStorage persistence, and system color scheme preference handling.Review & Testing Checklist for Human
https://node-hnapi.herokuapp.comuseFetchItem- The original Angular code fetches poll options via sequential RxJS subscriptions; the React version usesPromise.allwhich waits for all options before returning. Verify this behavior change is acceptable.darkColorSchemeMedia.matches@tanstack/react-querywhich isn't installed yet. Will need to test when React app infrastructure is in place.Recommended test plan: Once React infrastructure is set up, create a simple test component that uses each hook and verify data fetching works correctly, especially for poll-type stories.
Notes
Link to Devin run: https://app.devin.ai/sessions/3c769e7889e0455696358bc5bf6a2a06
Requested by: Cindy Huang (cindy.huang@cognition.ai) / @cindyyhuang