Migrate `usePagination` hook from JavaScript to TypeScript

[Lakes41]

Difficulty: Intermediate
Type: refactor

Background

The codebase is ~95% TypeScript per the repo's language breakdown, and every other hook/module lives in .ts/.tsx. lib/hooks/usePagination.js is the one exception: it's plain JavaScript with a hand-maintained, separate lib/hooks/usePagination.d.ts declaration file. This hook is actively used by app/admin/members/page.tsx to paginate the filtered member list.

Problem

Maintaining a .js implementation alongside a manually written .d.ts is error-prone — the two can silently drift out of sync (e.g., a new return field added to the hook but not to the type declaration, or vice versa), and it breaks the project's "everything is TypeScript" convention, making the hook harder to refactor safely with full type inference.

Expected Outcome

lib/hooks/usePagination.js and lib/hooks/usePagination.d.ts are replaced by a single lib/hooks/usePagination.ts file with inline types, behaviorally identical to today, and all existing call sites and tests continue to work unmodified (aside from import path, which stays the same).

Suggested Implementation

1. Create lib/hooks/usePagination.ts, porting the logic from usePagination.js and merging in the type signatures currently declared in usePagination.d.ts (generic item type, pageSize: number, return shape with currentPage, totalPages, paginatedItems, nextPage, prevPage, setPage, setCurrentPage).
2. Make the hook generic (usePagination<T>(items: T[], pageSize: number)) so consumers get typed paginatedItems.
3. Delete usePagination.js and usePagination.d.ts.
4. Update the import in app/admin/members/page.tsx if the file extension/module resolution requires it (it shouldn't, since imports omit extensions).
5. Add/port a unit test file (test/use-pagination.test.ts) covering boundary conditions: empty array, pageSize of 0 or negative (should not throw), setPage clamping, nextPage/prevPage at boundaries.

Acceptance Criteria

• lib/hooks/usePagination.js and lib/hooks/usePagination.d.ts no longer exist.
• lib/hooks/usePagination.ts exports a generically typed usePagination<T>.
• app/admin/members/page.tsx compiles and behaves identically (page navigation, filtered counts).
• New unit tests cover empty lists, single-page lists, and page-boundary navigation.
• npm run typecheck, npm run lint, and npm test all pass.

Likely Affected Files/Directories

• lib/hooks/usePagination.js (removed)
• lib/hooks/usePagination.d.ts (removed)
• lib/hooks/usePagination.ts (new)
• app/admin/members/page.tsx
• test/ (new test file)

---

[pbuesaquillo]

Hi! I would like to work on this issue. I have a strong foundation in strongly-typed programming and experience working with TypeScript and React hooks. I will migrate the usePagination hook to TypeScript, adding proper type definitions and interfaces for its parameters and return values. I can submit a PR within 24–48 hours.

[grantfox-oss]

🦊 GrantFox — @pbuesaquillo has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #295)
2. Your PR will be reviewed by the Adamantine-guild maintainers

Good luck! Track your progress on GrantFox.

[pbuesaquillo]

Resolved via #343