From b7a98fbaa9bd2c8d9fafbe3090bc2c0a8a09dde5 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Fri, 16 Dec 2022 15:39:02 +0700
Subject: no message

---
 src/pages/shop/search.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'src/pages/shop/search.js')

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) => (
-- 
cgit v1.2.3