Develop a Reusable Paginator Component

[prasadhonrao]

Description:

We need to develop a reusable Paginator Component that can be used across various pages in the application which require pagination support (e.g., Bootcamps list, Users list, Reviews list, etc.). The paginator should be highly customizable and support different use cases throughout the app.

---

Tasks:

1. Create the Paginator Component:

   • The component should accept props such as:
     • currentPage: the current active page number.
     • totalPages: the total number of pages available.
     • onPageChange: a callback to handle page changes.
     • pageSize: (optional) the number of items per page (default to 10).
     • showFirstLastButtons: (optional) boolean to show/hide first and last buttons.

2. Styling:

   • Ensure the paginator is responsive for mobile and desktop views.
   • Apply consistent styling using the existing UI framework (e.g., Bootstrap, React-Bootstrap).

3. Functionality:

   • Ensure the paginator supports basic functionality:
     • Go to the next page.
     • Go to the previous page.
     • Jump to the first and last page (if applicable).
   • Handle edge cases such as:
     • When there's only one page.
     • When currentPage is 1 (disable previous).
     • When currentPage equals totalPages (disable next).

4. Testing:

   • Add unit tests to ensure the paginator behaves correctly in various scenarios.
   • Write tests for edge cases (e.g., only one page, invalid page number input).
   • Ensure that the component works seamlessly with the app's state management and API requests.

---

Acceptance Criteria:

• [ ] The Paginator component is reusable and customizable across different parts of the application.
• [ ] The component follows best practices and is styled consistently with the app’s theme.
• [ ] Unit tests cover common use cases and edge cases.
• [ ] Proper documentation is available for developers to implement this component.

[AkankshShigwan]

@prasadhonrao I checked react bootstrap pagination but I think its bit complicated to make as component. found one react pagination, https://www.npmjs.com/package/react-paginate also trying to understand this pagination