You are implementing search/filter functionalities for an online shop application for your client. A colleague of yours has already implemented some of the functionalities requested by the client, but he is currently on holidays. You have to help finish the remaining functionalities, so the team meets the deadline.
The missing functionalities include:
- Checkbox fields that allow users to display or hide specific columns in the table of products.
- Filter fields that allow users to set a range on the items prices.
- Users should be able to see the filtered or searched products in the table.
- Filtering should work when only one filter is applied (partial filtering) or both:
- If the user provides only the "price from" (minimum), the product price should be within the [priceFrom, infinity] range.
- If the user provides the "price to" (maximum) only, the product price should be within the [0, priceTo] range.
- If the user provides both prices (minimum and maximum), the product price should be within the [priceFrom, priceTo] range.
- If the user provides negative price filters, then all rules above still apply - no products are expected to have negative price (e.g. priceFrom:-50, priceTo:-10 will return no results). The same applies to
0
filters - if the user applies [0, 0] filters, no products are expected to have price equal to zero (priceFrom:0, priceTo: 0).
This react application was generated using Create React App. It has all the standard setups.
Follow these steps if you are using zip/git mode (i.e. not available inside Devskiller in-browser IDE):
npm install
– install dependenciesnpm test
– run all tests (this will be used to evaluate your solutions)npm start
– run the project locally
Your task is to:
- Make sure that products are imported from the
products.json
inside/src/assets/
folder, which will be used for the search/filter functionalities. - Put the imported data in the
products
array in theSearch
component. - Implement the toggle functionality by adding a handler to the checkbox change in the
ToggleColumns
component. - Pass a columns object to the
ProductList
and reflect the change in the checkbox appropriately (by displaying or hiding the column). - Pass the filtered products to the
ProductList
component, so they get displayed in the table. - Show each item from the passed prop in the table inside the
ProductList
component. - Pass the
priceFrom
and thepriceTo
attributes to theFilterForm
component as props. - Implement the change input and submit the form handlers to the
FilterForm
component. - Change the filtered products that are displayed in the
ProductList
, so that it only contains the products with a price within the specified range.
Note that you're not allowed to change names or signatures of functions passed to components as properties.
For more details, please run the task on the Devskiller platform and see the failing tests.