feat: add search and sort filter for contributors#674
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
Bot
added
gssoc:approved
level:intermediate
quality:clean
type:accessibility
labels
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @Ayush2006385 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
|
Warning Review limit reached
More reviews will be available in 38 minutes and 49 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe Contributors page now supports real-time client-side search by username and sorting by contribution count. Two local state variables drive filtering and sorting logic, which computes a derived filtered list rendered below new MUI form controls and a results count. ChangesContributor Search and Sort Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (3 warnings)
✅ Passed checks (2 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.
🧹 Nitpick comments (2)
src/pages/Contributors/Contributors.tsx (2)
55-61: ⚡ Quick winConsider memoizing the filtered list.
The filtered list is recomputed on every render. For better performance, wrap this computation in
useMemowith dependencies oncontributors,search, andsortOrder.♻️ Proposed optimization
+import { useEffect, useState, useMemo } from "react"; + ... - const filtered = contributors - .filter((c) => c.login.toLowerCase().includes(search.toLowerCase())) - .sort((a, b) => - sortOrder === "desc" - ? b.contributions - a.contributions - : a.contributions - b.contributions - ); + const filtered = useMemo( + () => + contributors + .filter((c) => c.login.toLowerCase().includes(search.toLowerCase())) + .sort((a, b) => + sortOrder === "desc" + ? b.contributions - a.contributions + : a.contributions - b.contributions + ), + [contributors, search, sortOrder] + );🤖 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 `@src/pages/Contributors/Contributors.tsx` around lines 55 - 61, Wrap the computation that builds the filtered list in a useMemo to avoid recalculation on every render: replace the direct assignment to the filtered variable with a useMemo that returns the filtered-and-sorted array and depends on contributors, search, and sortOrder; keep the same filter and sort logic (referencing contributors, search, sortOrder, and the filtered variable name) so the memoized value updates only when those inputs change.
115-164: 💤 Low valueSignificant styling refactor not mentioned in PR description.
The contributor card styling was completely refactored from className-based to sx-based inline styles. While the implementation looks correct, this change was not mentioned in the PR objectives or description. Consider documenting this refactor in the PR description for reviewer clarity.
Changes include:
- Migration from className props to sx props
- Removal of
outlineColorfrom hover state- Addition of explicit
borderColorchange in hover🤖 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 `@src/pages/Contributors/Contributors.tsx` around lines 115 - 164, The PR changed contributor card styling from className-based to MUI sx props but the PR description doesn't mention this refactor; update the PR description to explicitly state the styling migration in Contributors (the Card/Link/Avatar/Button JSX), note that className props were replaced with sx usage, that outlineColor was removed from the hover state and borderColor was added on hover, and include a brief rationale or QA notes so reviewers know this was intentional and what to check.
🤖 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.
Nitpick comments:
In `@src/pages/Contributors/Contributors.tsx`:
- Around line 55-61: Wrap the computation that builds the filtered list in a
useMemo to avoid recalculation on every render: replace the direct assignment to
the filtered variable with a useMemo that returns the filtered-and-sorted array
and depends on contributors, search, and sortOrder; keep the same filter and
sort logic (referencing contributors, search, sortOrder, and the filtered
variable name) so the memoized value updates only when those inputs change.
- Around line 115-164: The PR changed contributor card styling from
className-based to MUI sx props but the PR description doesn't mention this
refactor; update the PR description to explicitly state the styling migration in
Contributors (the Card/Link/Avatar/Button JSX), note that className props were
replaced with sx usage, that outlineColor was removed from the hover state and
borderColor was added on hover, and include a brief rationale or QA notes so
reviewers know this was intentional and what to check.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fe7298e1-e60c-4343-b6fd-04c5354e344a
📒 Files selected for processing (1)
src/pages/Contributors/Contributors.tsx
1 participant
🔎 Feature Request: Contributor Search & Filter
Changes Implemented:
🎨 Styling Refactor
sxprops.borderColorparameters for layout uniformity.