Task Description
In this homework, you will create a Pagination component and add logic to it and filters for the rendering products dynamically.
1. Create a Pagination component:
- This component should accept the current page and call a callback, to simulate page switching.
- For the task without
* you can skip ... and show all page numbers or just the current page number and two arrows: back and forward
- On the 1st page button
Back should be disabled, same as button Forward on the last page
- On page switching, the next bunch of products should be shown. Let's say, you render 8 products on the page out of all 50 products. So on the 1st page should be shown products from 0 to 7, on page 2 - products from 8 to 15, ...
2. Add filtration and sorting logic:
- On clicking the category button, only products from this category should be shown.
- Could be selected more than 1 category.
- On selection of the sorting strategy, products should be sorted by price or date
creationAt
- Interaction with filter and sorter should reset pagination and move a user to the 1st page
- Interaction with pagination should not change or break sorting and filtration.
Advance Task Description (1*)
1. Update the pagination component:
- Add
... to pages. Design. One neighbor pages to the active page should be shown. The first and last page should be should always. Use cases:
2. Add searching logic:
- Only products with text from the search bar should be shown by entering the field or clicking the magnifying glass button.
- Search should work through all products, not only these, on the current page.
- The search must be case-independent: text
awesome, Awesome, or even AwEsoME should show product with the word Awesome in the title.
- Search should not break the filtering or sorting logic.
- Search should reset pagination and move a user to the 1st page
Acceptance Criteria for 1
Acceptance Criteria for 1*
Task Description
In this homework, you will create a Pagination component and add logic to it and filters for the rendering products dynamically.
1. Create a
Paginationcomponent:*you can skip...and show all page numbers or just the current page number and two arrows: back and forwardBackshould be disabled, same as buttonForwardon the last page2. Add filtration and sorting logic:
creationAtAdvance Task Description (1*)
1. Update the pagination component:
...to pages. Design. One neighbor pages to the active page should be shown. The first and last page should be should always. Use cases:2. Add searching logic:
awesome,Awesome, or evenAwEsoMEshould show product with the wordAwesomein the title.Acceptance Criteria for
1...) is added and works correctlyBackshould be disabled, same as buttonForwardon the last pageAcceptance Criteria for
1*...is implemented according to design.