refactor(#126): move bounty filtering and sorting to server-side query#157
Conversation
|
@chiemezie1 is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
@chiemezie1 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughReplaced client-side filtering/sorting/pagination in the bounty listing with server-driven queries. Introduced local UI state (search/type/status/sort/page), debounced search, constructed a paginated Changes
Sequence Diagram(s)sequenceDiagram
participant User as User (Browser)
participant Page as app/bounty/page.tsx
participant Hook as useBounties
participant API as GraphQL Server
User->>Page: type search / change filters / change page / change sort
Page->>Page: debounce search, build BountyQueryInput (page, limit, search, type, status, sort)
Page->>Hook: call useBounties(queryParams)
Hook->>API: GraphQL bounties(queryParams)
API-->>Hook: paginated results (data, pagination: currentPage,totalPages,totalResults)
Hook-->>Page: return paginated data
Page->>User: render results, pagination controls, loading/error/empty states
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/bounty/page.tsx`:
- Line 42: The component initializes pagination state with const [page, setPage]
= useState(1) but never advances it (all setPage calls reset to 1), so
server-side pagination (20 rows) prevents accessing subsequent pages; update the
component to pass page into the paginated hook (the hook in
hooks/use-bounties.ts that exposes paginated data) and implement proper controls
that call setPage(nextPage) / setPage(prevPage) (and not always setPage(1)) —
add Next/Previous (or page number) handlers that update page, wire those
handlers to the UI regions referenced around the existing page control code
(where setPage is currently used/reset) and ensure the paginated hook parameters
reflect the current page so rows beyond page 1 become reachable.
- Around line 98-124: The client-side reward/org filtering is only operating on
the paginated slice (allBounties) causing wrong counts and disappearing options;
remove the in-component filtering (filteredBounties) and instead extend the
backend query shape (BountyQueryInput in lib/query/bounty-queries.ts) and the
data hook (useBounties) to accept rewardMin/rewardMax and organizationIds
(array) parameters, then pass selectedOrgs and rewardRange from the page (where
allBounties, organizations, selectedOrgs, rewardRange are used) into useBounties
so filtering and faceting (organizations list) happen server-side and reflect
global results rather than the current page.
- Around line 67-74: The page currently treats types as multi-select
(selectedTypes/setSelectedTypes) but sends only selectedTypes[0] to the backend
(BountyQueryInput.type), causing dropped selections; change the UI and state to
a single-select flow: replace selectedTypes/setSelectedTypes with a single
selectedType state, update any components that set or read selectedTypes (the
selection handlers referenced around the other occurrences) to use selectedType,
and send selectedType (as BountyType) in the query object instead of
selectedTypes[0]; ensure references to selectedTypes in the file (including the
blocks around lines 126-129 and 135-140) are updated to the new single-select
symbol so the GraphQL backend (which expects a singular type) receives the
correct value.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 09575c85-aa38-4d3f-b4e5-ed890b7e296f
📒 Files selected for processing (1)
app/bounty/page.tsx
There was a problem hiding this comment.
Hi @chiemezie1 , good initiative on moving filtering and sorting to the server side,
The critical issue is that pagination controls are completely missing. page is initialized to 1 and only ever reset to 1, so with limit: 20, users can never see bounties beyond the first page. The result count (filteredBounties.length) also misleadingly shows the client-filtered count of the current page slice rather than the total matching results from the server.
Please address the following:
Change the type filter from multi-select to single-select. The backend only supports one type, so only selectedTypes[0] is sent and the rest are silently dropped.
Move reward range and organization filtering to the server side, or clearly document them as known limitations. Right now they only filter the 20-item page slice, which causes false empty states and disappearing filter options when matching bounties exist on other pages.
Fix the CodeRabbit corrections mentioned above and resolve any merge conflicts and CI failure in this PR .
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/bounty/page.tsx (1)
214-218: Use radio semantics for the now-single-select type filter.Only one
BountyTypecan be active, but Lines 214-218 still render independent checkboxes. Screen readers will announce these as multi-select toggles, which doesn't match the behavior. A radio group or singleSelectwould expose the constraint correctly. Please verify the keyboard and screen-reader flow after swapping the control.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/bounty/page.tsx` around lines 214 - 218, The UI uses Checkbox components for a single-select filter (rendered in the map that uses selectedType and toggleType), which misleads assistive tech; replace the Checkbox at the site where id={`type-${type.value}`} is rendered with a radio-style control (either a Radio component or a single Select) so the semantics reflect single selection, wire its checked/selected state to selectedType, call toggleType(type.value) (or a renamed onChange handler) to update selection, and ensure the group has appropriate role/aria-labeling (radio group semantics) and keyboard navigation; verify keyboard and screen-reader flow after the swap.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/bounty/page.tsx`:
- Around line 109-115: clearFilters currently sets status back to
BountyStatus.Open which leaves out completed/cancelled bounties; either change
the reset to a true "all" value (e.g., setStatusFilter("all") or a
BountyStatus.All enum) and update any filter-check logic that treats OPEN as the
no-filter baseline (references: clearFilters, setStatusFilter,
BountyStatus.Open), or if OPEN is intentional keep the code but change the
UI/action copy from "Clear filters" to "Reset to defaults" so it accurately
reflects that completed/cancelled items remain excluded; make the corresponding
change where the status baseline is evaluated (the code that checks OPEN as no
active filters) so behavior and wording remain consistent.
- Around line 63-84: The bug is that queryParams uses debouncedSearchQuery so
clearing the textbox empties searchQuery immediately but the backend filter
lingers until useDebounce updates; update the query construction to drop the
search filter immediately when searchQuery is an empty string (e.g. use a
conditional like ...(searchQuery === "" ? {} : debouncedSearchQuery && { search:
debouncedSearchQuery })) so that clearing the input removes the search param
right away; reference the variables useDebounce, debouncedSearchQuery,
searchQuery and the queryParams object (and keep getSortParams unchanged).
---
Nitpick comments:
In `@app/bounty/page.tsx`:
- Around line 214-218: The UI uses Checkbox components for a single-select
filter (rendered in the map that uses selectedType and toggleType), which
misleads assistive tech; replace the Checkbox at the site where
id={`type-${type.value}`} is rendered with a radio-style control (either a Radio
component or a single Select) so the semantics reflect single selection, wire
its checked/selected state to selectedType, call toggleType(type.value) (or a
renamed onChange handler) to update selection, and ensure the group has
appropriate role/aria-labeling (radio group semantics) and keyboard navigation;
verify keyboard and screen-reader flow after the swap.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ca10c3b8-24df-4d93-bdd1-f22510f00faa
📒 Files selected for processing (1)
app/bounty/page.tsx
|
Hi @Benjtalkshow, thanks again for the review. I’ve pushed updates to address your feedback:
|
- Drop search filter immediately on clear instead of waiting for debounce - Reset statusFilter to "all" in clearFilters (was resetting to OPEN) - Align filter-active baseline check with the new "all" default - Memoize queryParams to stabilize the useBounties query key - Hoist BOUNTY_TYPES, STATUSES, and getSortParams to module scope Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 participants
Title: refactor(#126): move bounty filtering and sorting to server-side GraphQL
Summary
This PR moves bounty filtering and sorting logic from client-side processing in app/bounty/page.tsx to server-driven query variables, improving scalability and consistency as bounty volume grows.
What Changed
Scope of This Push
Only task-related code was pushed:
Validation Performed
Notes
Issue
Summary by CodeRabbit
New Features
Chores