Skip to content

Add search, affiliate filtering, and pagination to athletes page#412

Open
zacjones93 wants to merge 1 commit intomainfrom
claude/paginate-athletes-table-2WgJO
Open

Add search, affiliate filtering, and pagination to athletes page#412
zacjones93 wants to merge 1 commit intomainfrom
claude/paginate-athletes-table-2WgJO

Conversation

@zacjones93
Copy link
Copy Markdown
Contributor

@zacjones93 zacjones93 commented Apr 19, 2026

Summary

Enhanced the organizer athletes page with comprehensive filtering, search, and pagination capabilities. All state is URL-backed via search parameters, making views shareable and bookmarkable.

Key Changes

Athletes Page (athletes.tsx)

  • Free-text search: Added search input that filters athletes by name, email, guest name, and team name (via ?q= URL param)
  • Affiliate filtering: New dropdown filter to show athletes by affiliate or explicitly filter for those without an affiliate (via ?affiliate= URL param)
  • Client-side pagination: Implemented pagination with configurable page sizes (25, 50, 100, 200, 500 rows; default 100)
    • Page state tracked via ?page= and ?pageSize= URL params
    • All filter/sort/search operations reset to page 1 for consistency
    • Pagination controls display total filtered count and current range
  • Dynamic affiliate options: Affiliate dropdown populated from unique affiliate names in the athlete data
  • Updated table rendering: Changed from sortedAthleteRows to paginatedAthleteRows for both mobile card and desktop table views

Pagination Component (pagination.tsx)

  • Added itemLabel prop to customize the item type displayed in pagination text (e.g., "athletes" vs "workouts")
  • Added params prop to support dynamic route parameters (required for routes like /compete/organizer/$competitionId/athletes)
  • Updated documentation to clarify that basePath can use "." for current route navigation

Workouts Page (workouts/index.tsx)

  • Updated pagination component usage to pass itemLabel="workouts" for consistency

Documentation (lat.md/organizer-dashboard.md)

  • Updated athletes section to document new search, affiliate filter, and pagination features
  • Noted that all state is URL-backed for shareability

Implementation Details

  • Search query normalization (trim + lowercase) for case-insensitive matching
  • Affiliate filter uses sentinel value "__none__" to distinguish "no affiliate" from "all affiliates"
  • Pagination slice computed after all filtering and sorting to ensure accurate counts
  • Page clamping prevents invalid page numbers when filters reduce result set
  • All navigation handlers reset pagination to page 1 when filters/search/sort change

https://claude.ai/code/session_01P9xYkbn33qpk6qmz5C39s4


Summary by cubic

Add search, affiliate filtering, and client-side pagination to the organizer athletes page to improve navigation and performance on large lists. All filter, sort, search, and pagination state is URL-backed, so views are shareable.

  • New Features

    • Athletes: free-text search (?q=), affiliate filter (with a “None” option), and pagination (25/50/100/200/500; default 100) with page and pageSize in the URL. Filters/search/sort reset to page 1. Affiliate options are derived from data. Mobile/desktop render paginated rows. CSV exports the full filtered+sorted list.
    • Pagination component: added itemLabel and params to support custom labels and dynamic routes.
    • Workouts: pass itemLabel="workouts".
    • Docs: updated organizer dashboard page with the new capabilities.
  • Migration

    • If you use the shared Pagination on dynamic routes, pass params (e.g., { competitionId }) and you can use "." for basePath to stay on the current route.
    • Optionally pass itemLabel to customize the displayed noun (e.g., "athletes", "workouts").

Written for commit 3ba5314. Summary will update on new commits.

…ffiliate filter

Hundreds of registrations made the athletes tab slow to render. Paginate
client-side (default 100, configurable 25/50/100/200/500) while keeping
filtering and CSV export operating on the full filtered list. Add a
free-text search over name/email/team and an Affiliate dropdown with an
explicit "None" option. All filter, search, sort, and pagination state is
held in URL search params so views are shareable and bookmarkable.

- apps/wodsmith-start/src/components/pagination.tsx: add optional
  itemLabel and params props so the shared Pagination component works on
  dynamic routes and with arbitrary item nouns.
- apps/wodsmith-start/src/routes/_protected/workouts/index.tsx: pass
  itemLabel="workouts" to preserve existing copy.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 19, 2026

Warning

Rate limit exceeded

@zacjones93 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 37 minutes and 53 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 37 minutes and 53 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: aa2764a0-8d0e-417e-8a8a-fc1e88486035

📥 Commits

Reviewing files that changed from the base of the PR and between 917e2ec and 3ba5314.

📒 Files selected for processing (4)
  • apps/wodsmith-start/src/components/pagination.tsx
  • apps/wodsmith-start/src/routes/_protected/workouts/index.tsx
  • apps/wodsmith-start/src/routes/compete/organizer/$competitionId/athletes.tsx
  • lat.md/organizer-dashboard.md
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/paginate-athletes-table-2WgJO

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 4 files

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.

2 participants