refactor : replace manual useState/useEffect fetching with useQuery in companyDetailPage#321
Conversation
…n CompanyDetailPage
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughCompanyDetailPage refactors data loading from manual state management and useEffect to ChangesMigrate CompanyDetailPage to React Query
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
client/src/module/student/companies/CompanyDetailPage.tsx (1)
97-108: ⚡ Quick winUse
placeholderData: keepPreviousDatato keep previous reviews visible when sort changes.The reviews query doesn't use
placeholderData, so changingsortBysetsreviewsLoadingto true, which blanks the entire page viaLoadingScreeneven though the company data is already loaded. This pattern is already established in the codebase (e.g.,JobBrowsePage.tsx,DsaTopicsPage.tsx). Addimport { keepPreviousData } from "@tanstack/react-query"and setplaceholderData: keepPreviousDataon the reviews query to keep previous results visible during the sort transition.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@client/src/module/student/companies/CompanyDetailPage.tsx` around lines 97 - 108, The reviews query (useQuery that returns reviewsData/reviewsLoading and uses queryKey [...queryKeys.companies.reviews(slug!), sortBy]) should keep previous results when sortBy changes: import keepPreviousData from "`@tanstack/react-query`" and pass placeholderData: keepPreviousData in the useQuery options so the previous reviews remain visible while the new sort fetches; keep the existing enabled, queryKey, and queryFn intact and only add the placeholderData option.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@client/src/module/student/companies/CompanyDetailPage.tsx`:
- Around line 91-108: Both queries currently ignore errors so API failures are
treated like empty/not-found states; update the two useQuery calls that fetch
company and reviews to also destructure isError and error (e.g., companyError,
companyIsError and reviewsError, reviewsIsError), then change the render logic
to show an explicit error message or error component when either companyIsError
or reviewsIsError is true (using the respective error object for details)
instead of falling back to company === undefined or reviews === [] — ensure the
check for "company not found" only runs when not companyIsError and company is
undefined, and keep loading logic (companyLoading || reviewsLoading) intact.
---
Nitpick comments:
In `@client/src/module/student/companies/CompanyDetailPage.tsx`:
- Around line 97-108: The reviews query (useQuery that returns
reviewsData/reviewsLoading and uses queryKey
[...queryKeys.companies.reviews(slug!), sortBy]) should keep previous results
when sortBy changes: import keepPreviousData from "`@tanstack/react-query`" and
pass placeholderData: keepPreviousData in the useQuery options so the previous
reviews remain visible while the new sort fetches; keep the existing enabled,
queryKey, and queryFn intact and only add the placeholderData option.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ad1737d2-bb24-4dbe-b460-f03126f2c40c
📒 Files selected for processing (1)
client/src/module/student/companies/CompanyDetailPage.tsx
|
hey @Sachinchaurasiya360 , Please review and merge the PR or lemme know if anything needs to be changed. #GSSOC'26 |
Summary
Refactors the data-fetching architecture in
CompanyDetailPage.tsxby replacing manual async loopsuseStateanduseEffectwith React QueryuseQueryhooks.This fixes redundant boilerplate code, adds instant client-side caching, and enables automatic background data revalidation when students navigate back to previously viewed companies.
Changes Made
company,reviews, andloadingstates managed byuseState.useEffectblock that handled sequentialPromise.allnetwork requests on component mount.useQueryhook for company detail metadata using standard project query keys.useQueryhook for reviews tracking thesortBystate variable natively.refreshReviewsto utilize the nativerefetch()functionality provided by React Query.Reference Implementation Checked
JobBrowsePageandYCCompanyDetailPageto maintain layout syntax, naming schemes, and config parameters uniformly.Closes #131
Summary by CodeRabbit