From f256fae48a032c7624a4cde0cdd23dbf2d19b4fb Mon Sep 17 00:00:00 2001 From: Daniel Martinez Date: Sun, 6 Sep 2020 23:01:22 -0500 Subject: [PATCH] Se crea filterPanel y se ajustan estilos del panel --- src/{api => Utils}/API.jsx | 0 src/Utils/filterHelper.jsx | 18 ++++++++++++ src/components/Products/FilterPanel.jsx | 36 ++++++++++++++++++++++++ src/components/Products/ProductsList.jsx | 25 +++++++++++++--- src/components/Products/products.scss | 29 +++++++++++++++++-- src/hooks/usePagination.jsx | 8 +++++- src/services/productsService.jsx | 2 +- src/services/userService.jsx | 2 +- 8 files changed, 110 insertions(+), 10 deletions(-) rename src/{api => Utils}/API.jsx (100%) create mode 100644 src/Utils/filterHelper.jsx create mode 100644 src/components/Products/FilterPanel.jsx diff --git a/src/api/API.jsx b/src/Utils/API.jsx similarity index 100% rename from src/api/API.jsx rename to src/Utils/API.jsx diff --git a/src/Utils/filterHelper.jsx b/src/Utils/filterHelper.jsx new file mode 100644 index 0000000..a1596d6 --- /dev/null +++ b/src/Utils/filterHelper.jsx @@ -0,0 +1,18 @@ +const priceFilter = (cost) => { + return (product) => { + switch (cost) { + case 1: + return product.cost <= 200; + case 2: + return product.cost > 200 && product.cost <= 500; + case 3: + return product.cost > 500 && product.cost <= 1000; + case 4: + return product.cost > 1001 && product.cost <= 2000; + case 5: + return product.cost > 2000; + default: + return product; + } + }; +}; diff --git a/src/components/Products/FilterPanel.jsx b/src/components/Products/FilterPanel.jsx new file mode 100644 index 0000000..2e96975 --- /dev/null +++ b/src/components/Products/FilterPanel.jsx @@ -0,0 +1,36 @@ +import React, { useState } from "react"; +import "./products.scss"; + +const optionsData = { + price: { + 0: "Any price", + 1: "0 - 200 coins", + 2: "201 - 500 coins", + 3: "501 - 1000 coins", + 4: "1001 - 2000 coins", + 5: "+ 2000 coins", + }, +}; + +const FilterPanel = ({ currentAmount, totalAmount, onFilter }) => { + return ( + <> +
+
+ Showing {currentAmount} of {totalAmount} products +
+
Filter by:
+ +
+ + ); +}; +export default FilterPanel; diff --git a/src/components/Products/ProductsList.jsx b/src/components/Products/ProductsList.jsx index d9740d9..8d49cea 100644 --- a/src/components/Products/ProductsList.jsx +++ b/src/components/Products/ProductsList.jsx @@ -1,17 +1,25 @@ -import React, { useEffect, useContext } from "react"; +import React, { useEffect, useContext, useState } from "react"; import { usePagination } from "../../hooks/index"; -import Product from "./Product"; import { ProductsContext } from "../../providers/index"; +import Product from "./Product"; +import FilterPanel from "./FilterPanel"; 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 { next, prev, currentData } = usePagination(products, 16); + const { next, prev, currentData, currentAmount } = usePagination( + products, + ITEMS_PER_PAGE + ); const onPrev = () => { prev(); @@ -22,9 +30,18 @@ const ProductsList = () => { window.scrollTo(0, 0); }; - if (products.length > 0) { + const handleFilter = (event) => { + console.log(event.target.value); + }; + + if (products.length) { return ( <> +
{currentData().map((item, key) => { return ( diff --git a/src/components/Products/products.scss b/src/components/Products/products.scss index c0bb641..065af39 100644 --- a/src/components/Products/products.scss +++ b/src/components/Products/products.scss @@ -1,5 +1,6 @@ -.cards { - margin: 0 40px; +.cards, +.filter-container { + margin: 10px 40px; display: flex; flex-wrap: wrap; justify-content: center; @@ -8,7 +9,7 @@ } } .card { - margin: 30px; + margin: 15px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); background-color: #fff; width: 250px; @@ -143,3 +144,25 @@ font-weight: bold; border: none; } + +.pagination-info, +.filter { + font-family: "Raleway", sans-serif; + text-transform: uppercase; + font-size: 15px; + letter-spacing: 2px; + font-weight: 1000; + color: #292727; +} + +.filter { + margin-left: 70px; + margin-right: 10px; +} +.filter-select { + padding-left: 5px; + outline: none; + border: none; + border-radius: 100px; + height: 19px; +} diff --git a/src/hooks/usePagination.jsx b/src/hooks/usePagination.jsx index dd3513b..5c2737f 100644 --- a/src/hooks/usePagination.jsx +++ b/src/hooks/usePagination.jsx @@ -23,6 +23,12 @@ const usePagination = (data, itemsPerPage) => { return data.slice(begin, end); }; - return { next, prev, jump, currentData, currentPage, maxPage }; + const currentAmount = () => { + const accumulate = itemsPerPage * (currentPage - 1); + const current = currentData().length; + return accumulate + current; + }; + + return { next, prev, jump, currentData, currentAmount, currentPage, maxPage }; }; export default usePagination; diff --git a/src/services/productsService.jsx b/src/services/productsService.jsx index 3ab7050..bd06572 100644 --- a/src/services/productsService.jsx +++ b/src/services/productsService.jsx @@ -1,4 +1,4 @@ -import * as API from "../api/API"; +import * as API from "../Utils/API"; const headers = { "Content-Type": "application/json", diff --git a/src/services/userService.jsx b/src/services/userService.jsx index 04f5771..b0fd942 100644 --- a/src/services/userService.jsx +++ b/src/services/userService.jsx @@ -1,4 +1,4 @@ -import * as API from "../api/API"; +import * as API from "../Utils/API"; const headers = { "Content-Type": "application/json",