From 34ce37c22722c9d08c1336399782f09fbe06f5a0 Mon Sep 17 00:00:00 2001
From: Daniel Martinez <danielmartinezdm@hotmail.com>
Date: Mon, 7 Sep 2020 08:14:38 -0500
Subject: [PATCH] Componentes para historial de productos

---
 .../ProductsHistory/ListHistory.jsx           | 63 +++++++++++++++++++
 .../ProductsHistory/RedeemedProduct.jsx       | 23 +++++++
 src/components/ProductsHistory/history.scss   |  0
 src/components/User/UserPanel.jsx             |  8 ++-
 src/routes.jsx                                |  2 +-
 5 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ProductsHistory/ListHistory.jsx
 create mode 100644 src/components/ProductsHistory/RedeemedProduct.jsx
 create mode 100644 src/components/ProductsHistory/history.scss

diff --git a/src/components/ProductsHistory/ListHistory.jsx b/src/components/ProductsHistory/ListHistory.jsx
new file mode 100644
index 0000000..8db7fe8
--- /dev/null
+++ b/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;
diff --git a/src/components/ProductsHistory/RedeemedProduct.jsx b/src/components/ProductsHistory/RedeemedProduct.jsx
new file mode 100644
index 0000000..0327bc0
--- /dev/null
+++ b/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;
diff --git a/src/components/ProductsHistory/history.scss b/src/components/ProductsHistory/history.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/User/UserPanel.jsx b/src/components/User/UserPanel.jsx
index 898fdc9..2d7be0f 100644
--- a/src/components/User/UserPanel.jsx
+++ b/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} />
       )}
diff --git a/src/routes.jsx b/src/routes.jsx
index c0d7a98..d7f1d28 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -1,6 +1,6 @@
 export const routes = [
   {
-    path: "/home",
+    path: "/",
     linkname: "Home",
   },
   {