Se agrega navegacion y se abstrae filter panel

src/App.jsx

@@ -1,17 +1,20 @@
 import React from "react";
 import Banner from "./components/Banner/Banner";
 import UserPanel from "./components/User/UserPanel";
-import ProductsList from "./components/Products/ProductsList";
 import UserProvider from "./providers/UserProvider";
 import ProductsProvider from "./providers/ProductsProvider";
+import HistoryProvider from "./providers/HistoryProvider";
+import Navigation from "./components/User/Navigation";
 
 function App() {
   return (
     <UserProvider>
       <ProductsProvider>
-        <UserPanel />
-        <Banner />
-        <ProductsList />
+        <HistoryProvider>
+          <UserPanel />
+          <Banner />
+          <Navigation />
+        </HistoryProvider>
       </ProductsProvider>
     </UserProvider>
   );

src/components/Products/FilterPanel.jsx → src/components/FilterPanel/FilterPanel.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./products.scss";
+import "./filter.scss";
 
 const optionsData = {
   price: {

src/components/Products/ProductsList.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useContext, useState } from "react";
 import { usePagination } from "../../hooks/index";
 import { ProductsContext } from "../../providers/index";
 import Product from "./Product";
-import FilterPanel from "./FilterPanel";
+import FilterPanel from "../FilterPanel/FilterPanel";
 import { priceFilter } from "../../utils/index";
 import "./products.scss";
 

src/components/ProductsHistory/ListHistory.jsx → src/components/ProductsHistory/ProductsHistory.jsx

@@ -1,15 +1,15 @@
 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 FilterPanel from "../FilterPanel/FilterPanel";
 import { priceFilter } from "../../utils/index";
-import "./products.scss";
+import { HistoryContext } from "../../providers/index";
+import "./history.scss";
 
 const ITEMS_PER_PAGE = 16;
 
-const ListHistory = () => {
-  const { products, setProductResponse } = useContext(ProductsContext);
+const ProductsHistory = () => {
+  const { products } = useContext(HistoryContext);
 
   const [filteredProducts, setProducts] = useState([]);
 
@@ -38,9 +38,7 @@ const ListHistory = () => {
         />
         <div className="cards">
           {currentData().map((item, key) => {
-            return (
-              <RedeemedProduct item={item} key={key} />
-            );
+            return <RedeemedProduct item={item} key={key} />;
           })}
         </div>
         <div className="container-pagination">
@@ -60,4 +58,4 @@ const ListHistory = () => {
     </div>
   );
 };
-export default ListHistory;
+export default ProductsHistory;

src/components/ProductsHistory/RedeemedProduct.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-
-import "./products.scss";
+import "./history.scss";
 
 const Product = ({
   item: {

src/components/User/Navigation.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import ProductsList from "../Products/ProductsList";
+import ProductsHistory from "../ProductsHistory/ProductsHistory";
+
+const Navigation = () => {
+  return (
+    <>
+      <Switch>
+        <Route exact path="/" component={ProductsList} />
+        <Route exact path="/history" component={ProductsHistory} />
+      </Switch>
+    </>
+  );
+};
+
+export default Navigation;

src/components/User/UserPanel.jsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useContext } from "react";
+import { NavLink } from "react-router-dom";
 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 { routes } from "../../routes";
+
 import "./user.scss";
 
 const UserPanel = () => {
@@ -21,21 +22,35 @@ const UserPanel = () => {
   };
 
   const { name, points } = user;
+
+  const links = routes.map((route, key) => {
+    return (
+      <li key={key}>
+        <NavLink
+          className="nav-item"
+          to={route.path}
+          activeClassName="selected-nav"
+        >
+          {route.linkname}
+        </NavLink>
+      </li>
+    );
+  });
   return (
     <>
-    <Switch>
-      <Route exact path="/" component={ProductsList} />
-      <Route exact path="/" component={ProductsList} />
-
-    </Switch>
-      {coinsModal && (
-        <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
-      )}
-      <div className="user-panel">
-        <div>{name}</div>
-        <div className="coins-user">
-          <img src={coin} onClick={openCoinsModal} alt="Coins" />
-          <span className="points">{points}</span>
+      <div className="profile">
+        {coinsModal && (
+          <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
+        )}
+        <div className="navigation">
+          <ul className="options">{links}</ul>
+        </div>
+        <div className="user-panel">
+          <div>{name}</div>
+          <div className="coins-user">
+            <img src={coin} onClick={openCoinsModal} alt="Coins" />
+            <span className="points">{points}</span>
+          </div>
         </div>
       </div>
     </>

src/providers/HistoryProvider.jsx

@@ -6,7 +6,7 @@ export const HistoryContext = React.createContext();
 const HistoryProvider = ({ children }) => {
   const [products, setProducts] = useState({});
 
-  const [productResponse, setProductResponse] = useState({});
+  const [productResponse, setProductResponse] = useState([]);
 
   useEffect(() => {
     getHistory().then((products) => {

src/providers/ProductsProvider.jsx

@@ -6,7 +6,7 @@ export const ProductsContext = React.createContext();
 const ProductsProvider = ({ children }) => {
   const [products, setProducts] = useState({});
 
-  const [productResponse, setProductResponse] = useState({});
+  const [productResponse, setProductResponse] = useState([]);
 
   useEffect(() => {
     getProducts().then((products) => {

src/providers/index.jsx

@@ -1,4 +1,5 @@
 import { ProductsContext } from "./ProductsProvider";
 import { UserContext } from "./UserProvider";
+import { HistoryContext } from "./HistoryProvider";
 
-export { ProductsContext, UserContext };
+export { ProductsContext, UserContext, HistoryContext };