Componentes para historial de productos

src/components/ProductsHistory/ListHistory.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useContext, useState } from "react";
+import { usePagination } from "../../hooks/index";
+import { ProductsContext } from "../../providers/index";
+import RedeemedProduct from "./RedeemedProduct";
+import FilterPanel from "./FilterPanel";
+import { priceFilter } from "../../utils/index";
+import "./products.scss";
+
+const ITEMS_PER_PAGE = 16;
+
+const ListHistory = () => {
+  const { products, setProductResponse } = useContext(ProductsContext);
+
+  const [filteredProducts, setProducts] = useState([]);
+
+  useEffect(() => {
+    if (!products) return;
+    setProducts(products);
+  }, [products]);
+
+  const { next, prev, currentData, currentAmount, jump } = usePagination(
+    filteredProducts,
+    ITEMS_PER_PAGE
+  );
+
+  const handleFilter = (event) => {
+    setProducts(products.filter(priceFilter(event.target.value)));
+    jump(1);
+  };
+
+  if (filteredProducts.length) {
+    return (
+      <>
+        <FilterPanel
+          currentAmount={currentAmount()}
+          totalAmount={filteredProducts.length}
+          onFilter={handleFilter}
+        />
+        <div className="cards">
+          {currentData().map((item, key) => {
+            return (
+              <RedeemedProduct item={item} key={key} />
+            );
+          })}
+        </div>
+        <div className="container-pagination">
+          <div className="pagination">
+            <ul>
+              <button onClick={() => prev()}>Previous</button>
+              <button onClick={() => next()}>Next</button>
+            </ul>
+          </div>
+        </div>
+      </>
+    );
+  }
+  return (
+    <div className="empty">
+      <h1>No hay productos canjeados</h1>
+    </div>
+  );
+};
+export default ListHistory;

src/components/ProductsHistory/RedeemedProduct.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import "./products.scss";
+
+const Product = ({
+  item: {
+    name,
+    category,
+    cost,
+    img: { url },
+  },
+}) => {
+  return (
+    <div className="card">
+      <div className="img" style={{ backgroundImage: `url("${url}")` }}></div>
+      <div className="info">
+        <span className="category">{category}</span>
+        <h3 className="title">{name}</h3>
+      </div>
+    </div>
+  );
+};
+export default Product;

src/components/User/UserPanel.jsx

@@ -3,7 +3,8 @@ import { coin } from "../../assets/index";
 import { UserContext } from "../../providers/UserProvider";
 import { CoinsModal } from "../Modals/index";
 import { useModal } from "../../hooks/index";
-
+import { Switch, Route } from "react-router-dom";
+import ProductsList from "../Products/ProductsList";
 import "./user.scss";
 
 const UserPanel = () => {
@@ -22,6 +23,11 @@ const UserPanel = () => {
   const { name, points } = user;
   return (
     <>
+    <Switch>
+      <Route exact path="/" component={ProductsList} />
+      <Route exact path="/" component={ProductsList} />
+
+    </Switch>
       {coinsModal && (
         <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
       )}

src/routes.jsx

@@ -1,6 +1,6 @@
 export const routes = [
   {
-    path: "/home",
+    path: "/",
     linkname: "Home",
   },
   {