Implement pagination on the services list using the shared Pagination component
Description
src/app/services/page.tsx fetches /api/v1/services and renders every service in one unbounded <ul>, with no paging and a hand-rolled Loading… string. The repo already ships src/components/Pagination.tsx (currently unused anywhere) plus src/components/EmptyState.tsx and src/components/Spinner.tsx. This issue adds server-driven pagination and wires those primitives in.
Requirements and context
- Repository scope:
Agentpay-Org/Agentpay-frontend only.
- Add
page/pageCount state and request ?page=…&limit=…; render Pagination below the list (it self-hides when pageCount <= 1).
- Replace the
Loading… text with Spinner and the empty branch with EmptyState including a "New service" action.
- Make each service row a
<Link> to /services/${encodeURIComponent(serviceId)} (it is currently non-clickable plain text).
- Preserve the
role="alert" error path and the New service header button.
Suggested execution
- Fork the repo and create a branch
git checkout -b feature/services-06-list-pagination- Implement changes
- Write code in:
src/app/services/page.tsx.
- Write comprehensive tests in: create
src/app/services/page.test.tsx — mock apiClient, assert Pagination appears only with multiple pages, page change refetches, empty state renders, and rows link.
- Add documentation: note the list paging behaviour in
README.md.
- Validate the
aria-live page indicator inside Pagination announces changes.
- Test and commit
Test and commit
- Run
npm run lint, npm run typecheck, npm test, and npm run build.
- Cover edge cases: single page, last page (Next disabled), and an out-of-range page request.
- Include the
npm test output and a note on the assumed pagination contract.
Example commit message
feat(services): paginate list and reuse Pagination/EmptyState/Spinner with tests
Guidelines
- Minimum 95 percent test coverage for the changed page.
- Clear, reviewer-focused documentation.
- Timeframe: 96 hours.
Community & contribution rewards
- 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
- ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.
Implement pagination on the services list using the shared Pagination component
Description
src/app/services/page.tsxfetches/api/v1/servicesand renders every service in one unbounded<ul>, with no paging and a hand-rolledLoading…string. The repo already shipssrc/components/Pagination.tsx(currently unused anywhere) plussrc/components/EmptyState.tsxandsrc/components/Spinner.tsx. This issue adds server-driven pagination and wires those primitives in.Requirements and context
Agentpay-Org/Agentpay-frontendonly.page/pageCountstate and request?page=…&limit=…; renderPaginationbelow the list (it self-hides whenpageCount <= 1).Loading…text withSpinnerand the empty branch withEmptyStateincluding a "New service" action.<Link>to/services/${encodeURIComponent(serviceId)}(it is currently non-clickable plain text).role="alert"error path and theNew serviceheader button.Suggested execution
git checkout -b feature/services-06-list-paginationsrc/app/services/page.tsx.src/app/services/page.test.tsx— mock apiClient, assert Pagination appears only with multiple pages, page change refetches, empty state renders, and rows link.README.md.aria-livepage indicator inside Pagination announces changes.Test and commit
npm run lint,npm run typecheck,npm test, andnpm run build.npm testoutput and a note on the assumed pagination contract.Example commit message
feat(services): paginate list and reuse Pagination/EmptyState/Spinner with testsGuidelines
Community & contribution rewards