diff options
Diffstat (limited to 'src/pages/shop/search.js')
| -rw-r--r-- | src/pages/shop/search.js | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js index 404685d1..a0a916fc 100644 --- a/src/pages/shop/search.js +++ b/src/pages/shop/search.js @@ -4,7 +4,7 @@ import Layout from "../../components/Layout"; import Pagination from "../../components/Pagination"; import ProductCard from "../../components/ProductCard"; import FilterIcon from "../../icons/filter.svg"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Filter from "../../components/Filter"; export async function getServerSideProps(context) { @@ -48,6 +48,7 @@ export default function ShopSearch({ // Variable for <Filter/> props state const [activeFilter, setActiveFilter] = useState(false); + const [filterCount, setFilterCount] = useState(0); const route = () => { let route = `/shop/search?q=${q}`; @@ -59,6 +60,15 @@ export default function ShopSearch({ return route; } + useEffect(() => { + let calculateFilterCount = 0; + if (brand) calculateFilterCount++; + if (category) calculateFilterCount++; + if (price_from || price_to) calculateFilterCount++; + if (order_by) calculateFilterCount++; + setFilterCount(calculateFilterCount); + }, [brand, category, price_from, price_to, order_by]); + return ( <> <Header title={`Jual ${q} - Indoteknik`} /> @@ -94,7 +104,7 @@ export default function ShopSearch({ ) : 'Mungkin yang anda cari'} </div> <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}> - <FilterIcon className="w-4 h-4" /> <span>Filter</span> + <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span> </button> <div className="grid grid-cols-2 gap-3"> {searchResults.response.products.map((product) => ( |