Se crea directorio Utils con index

src/Utils/filterHelper.jsx → src/Utils/index.jsx

@@ -1,4 +1,4 @@
-const priceFilter = (cost) => {
+export const priceFilter = (cost) => {
   return (product) => {
     switch (cost) {
       case 1:

src/components/Products/FilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import "./products.scss";
 
 const optionsData = {

src/components/Products/ProductsList.jsx

@@ -3,21 +3,22 @@ import { usePagination } from "../../hooks/index";
 import { ProductsContext } from "../../providers/index";
 import Product from "./Product";
 import FilterPanel from "./FilterPanel";
+import { priceFilter } from "../../utils/index";
 import "./products.scss";
 
 const ITEMS_PER_PAGE = 16;
 
 const ProductsList = () => {
   const { products, setProductResponse } = useContext(ProductsContext);
 
-  const [filter, setFilter] = useState(0);
-
   useEffect(() => {
     if (!products) return;
   }, [products]);
 
+  const [filteredProducts, setProducts] = useState(products);
+
   const { next, prev, currentData, currentAmount } = usePagination(
-    products,
+    filteredProducts,
     ITEMS_PER_PAGE
   );
 
@@ -31,10 +32,10 @@ const ProductsList = () => {
   };
 
   const handleFilter = (event) => {
-    console.log(event.target.value);
+    setProducts(products.filter(priceFilter(event.target.value)));
   };
 
-  if (products.length) {
+  if (filteredProducts.length) {
     return (
       <>
         <FilterPanel
@@ -60,6 +61,10 @@ const ProductsList = () => {
       </>
     );
   }
-  return <div></div>;
+  return (
+    <div className="empty">
+      <h1>No hay productos</h1>
+    </div>
+  );
 };
 export default ProductsList;

src/components/Products/products.scss

@@ -166,3 +166,7 @@
   border-radius: 100px;
   height: 19px;
 }
+.empty {
+  display: flex;
+  justify-content: center;
+}

src/services/productsService.jsx

@@ -1,4 +1,4 @@
-import * as API from "../Utils/API";
+import * as API from "../utils/API";
 
 const headers = {
   "Content-Type": "application/json",

src/services/userService.jsx

@@ -1,4 +1,4 @@
-import * as API from "../Utils/API";
+import * as API from "../utils/API";
 
 const headers = {
   "Content-Type": "application/json",