refactor: add reusable pagination hook and refactor components#1089
refactor: add reusable pagination hook and refactor components#1089
Conversation
dmortal
requested review from
hukid,
jeffredodd,
krisxcrash and
serikjensen
as code owners
There was a problem hiding this comment.
Pull request overview
This PR introduces a reusable usePagination hook to eliminate duplicated pagination logic across multiple components. The hook centralizes pagination state management (currentPage, itemsPerPage) and provides a getPaginationProps helper that extracts metadata from API response headers and returns all necessary props for the PaginationControl component.
Changes:
- Added
usePaginationhook with comprehensive test coverage - Refactored 5 components (LocationsList, ContractorList, PaymentsList, EmployeeList, PayrollConfiguration) to use the new hook
- Eliminated ~50 lines of duplicated pagination state and handler logic
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/usePagination/usePagination.ts | New reusable hook managing pagination state and providing getPaginationProps helper |
| src/hooks/usePagination/usePagination.test.ts | Comprehensive test suite covering all hook functionality |
| src/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.ts | Refactored to use usePagination hook, removing manual state management |
| src/components/Employee/EmployeeList/EmployeeList.tsx | Replaced useState-based pagination with usePagination hook |
| src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx | Added pagination prop to presentation component |
| src/components/Contractor/Payments/PaymentsList/PaymentsList.tsx | Integrated usePagination hook and passed props to presentation |
| src/components/Contractor/ContractorList/useContractorList.ts | Simplified by using usePagination instead of manual state |
| src/components/Company/Locations/LocationsList/LocationsList.tsx | Refactored to use usePagination hook |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| itemsPerPage, | ||
| getPaginationProps, | ||
| } | ||
| } |
There was a problem hiding this comment.
Add an index.ts file that exports the hook and its types to follow the pattern established by other hooks in this directory (useForkRef, useOverflowDetection). This would allow imports like 'from @/hooks/usePagination' instead of 'from @/hooks/usePagination/usePagination'.
4 participants
Summary
This PR introduces a reusable
usePaginationhook that centralizes pagination state management and extracts pagination metadata from API response headers. Previously, pagination logic was duplicated across multiple components with the same patterns for page navigation, items-per-page control, and metadata extraction.Changes
usePaginationhook that manages pagination state and provides agetPaginationPropshelperLocationsListContractorListPaymentsListEmployeeListPayrollConfigurationTesting
Manual testing:
Run unit tests:
npm run test -- --run src/hooks/usePagination/usePagination.test.ts