[Task 5] React hooks

[vladyslav-yermolin-moc]

• Main repository - https://github.com/MastersAcademy/fe-react-2024
• Design - https://www.figma.com/file/mRAOMdJiAsD8fHSVnYwUl9/React-web-page
• Branch name - task/05-hooks

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

• Mentor is added to pr
• AC copied to pr description
• Link to deployed version is added to pr
• Simple Pagination component (without ...) is added and works correctly
• On the 1st page button Back should be disabled, same as button Forward on the last page
• Interaction with pagination should not change or break sorting and filtration.
• Category filter (multi-select) is added and works correctly
• Sorting input (single select) is added and works correctly
• Interaction with filter and sorter should reset pagination and move a user to the 1st page

Acceptance Criteria for 1*

• Pagination component with ... is implemented according to design.
• Search input works correctly