no message

1 files changed, 13 insertions, 4 deletions

diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index b04d2715..a2f05cfa 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Filter from "../../../components/Filter";
 import Header from "../../../components/Header";
 import Layout from "../../../components/Layout";
@@ -58,6 +58,7 @@ export default function BrandDetail({
   const productFound = searchResults.response.numFound;
 
   const [activeFilter, setActiveFilter] = useState(false);
+  const [filterCount, setFilterCount] = useState(0);
 
   const route = () => {
     let route = `/shop/brands/${slug}`;
@@ -68,6 +69,14 @@ export default function BrandDetail({
     return route;
   }
 
+  useEffect(() => {
+    let calculateFilterCount = 0;
+    if (category) calculateFilterCount++;
+    if (price_from || price_to) calculateFilterCount++;
+    if (order_by) calculateFilterCount++;
+    setFilterCount(calculateFilterCount);
+  }, [category, price_from, price_to, order_by]);
+
   return (
     <>
       <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} />
@@ -85,9 +94,6 @@ export default function BrandDetail({
       />
       <Layout>
         <div className="p-4">
-          <button className="btn-light py-2 flex items-center gap-x-2 mb-2" onClick={() => setActiveFilter(true)}>
-            <FilterIcon className="w-4 h-4" /> <span>Filter</span>
-          </button>
           <h1 className="mb-2">Produk</h1>
           <div className="text-caption-1 mb-4">
             {productFound > 0 ? (
@@ -106,6 +112,9 @@ export default function BrandDetail({
               </>
             ) : '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 {filterCount > 0 ? `(${filterCount})` : ''}</span>
+          </button>
           <div className="grid grid-cols-2 gap-3">
             {searchResults.response.products.map((product) => (
               <ProductCard key={product.id} data={product} />