Skip to content

feat: Add React Query hooks for HackerNews API migration (Phase 1)#167

Open
devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
devin/1771014524-react-query-hooks
Open

feat: Add React Query hooks for HackerNews API migration (Phase 1)#167
devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
devin/1771014524-react-query-hooks

Conversation

@devin-ai-integration
Copy link

feat: Add React Query hooks for HackerNews API (Phase 1)

Summary

Converts the Angular HackerNewsAPIService to custom React hooks using TanStack Query (@tanstack/react-query) as part of the Angular-to-React migration. This is Phase 1 — hooks only, no wiring to components yet.

New files (all under src/hooks/):

  • types.ts — TypeScript interfaces mirroring the existing Angular models (Story, User, PollResult, Comment, FeedType)
  • useFeed.ts — fetches feed listings by type and page
  • useItem.ts — fetches an item; includes poll aggregation logic (fetches poll options via Promise.all and sums poll_votes_count)
  • useUser.ts — fetches user profiles
  • usePollResults.ts — fetches individual poll result items
  • index.ts — barrel export

RxJS Observables and lazyFetch are replaced with async/await + React Query's useQuery. Poll logic from the Angular service is preserved: for poll-type stories, poll options are fetched in parallel using story.id + i for i in 1..poll.length.

Review & Testing Checklist for Human

  • @tanstack/react-query is NOT installedpackage.json was not modified. Confirm this is acceptable for Phase 1, or whether the dependency should be added now so the files at least compile
  • Poll ID arithmetic in useItem.ts (lines 26-27): verify story.id + i for i in 1..numberOfPollOptions matches the original Angular behavior and API expectations
  • BASE_URL is hardcoded in each hook file — decide if this should be extracted to a shared constant before later phases build on top of this
  • No unit tests — consider whether tests should be added in this phase or deferred

Notes

  • The crated_time typo in the User interface is intentionally preserved from the original Angular model (src/app/shared/models/user.ts)
  • Story.time_ago is typed number (matching the original Angular class) while Comment.time_ago is string — this discrepancy exists in the original codebase
  • These hooks cannot be tested end-to-end until React and React Query are installed in a later phase

Requested by: @eashansinha
Link to Devin run: https://app.devin.ai/sessions/a63f2fb87f504e82991177c18bdcadc8

Create src/hooks/ with custom React hooks replacing Angular HackerNewsAPIService:
- useFeed(feedType, page): fetches feed listings
- useItem(id): fetches item with poll aggregation logic
- useUser(id): fetches user profiles
- usePollResults(id): fetches individual poll results
- TypeScript interfaces for Story, User, PollResult, Comment, FeedType

Co-Authored-By: Eashan Sinha <eashan.sinha@codeium.com>
@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