Filter search by brand, category, price

1 files changed, 57 insertions, 10 deletions

diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 21a4ccd9..f41adf3e 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -4,30 +4,77 @@ import Layout from "../../components/Layout";
 import Pagination from "../../components/Pagination";
 import ProductCard from "../../components/ProductCard";
 import FilterIcon from "../../icons/filter.svg";
+import { useEffect, useState } from "react";
+import Filter from "../../components/Filter";
+import { useRouter } from "next/router";
 
 export async function getServerSideProps(context) {
-  const { q, page = 1 } = context.query;
-  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&page=${page}`);
+  const { q, page = 1,  brand = '', category = '' } = context.query;
+  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&page=${page}&brand=${brand}&category=${category}`);
   searchResults = searchResults.data;
-  return { props: { searchResults, q, page } };
+  return { props: { searchResults, q, page, brand, category } };
 }
 
-export default function ShopSearch({ searchResults, q, page }) {
+export default function ShopSearch({ searchResults, q, page, brand, category }) {
+  const router = useRouter();
+
   const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
   const productStart = searchResults.responseHeader.params.start;
   const productRows = searchResults.responseHeader.params.rows;
   const productFound = searchResults.response.numFound;
+
+  const [activeFilter, setActiveFilter] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState(category);
+  const [selectedBrand, setSelectedBrand] = useState(brand);
+  const [categories, setCategories] = useState([]);
+  const [brands, setBrands] = useState([]);
+
+  const filterSubmit = (e) => {
+    e.preventDefault();
+    setActiveFilter(false);
+    let filterRoute = `/shop/search?q=${q}`;
+    if (selectedBrand) filterRoute += `&brand=${selectedBrand}`;
+    if (selectedCategory) filterRoute += `&category=${selectedCategory}`;
+    router.push(filterRoute, undefined, { scroll: false });
+  }
+
+  useEffect(() => {
+    const filterCategory = searchResults.facet_counts.facet_fields.category_name_str.filter((category, index) => {
+      if (index % 2 == 0) {
+        const productCountInCategory = searchResults.facet_counts.facet_fields.category_name_str[index + 1];
+        if (productCountInCategory > 0) return category;
+      }
+    });
+    setCategories(filterCategory);
+
+    const filterBrand = searchResults.facet_counts.facet_fields.brand_str.filter((brand, index) => {
+      if (index % 2 == 0) {
+        const productCountInBrand = searchResults.facet_counts.facet_fields.brand_str[index + 1];
+        if (productCountInBrand > 0) return brand;
+      }
+    });
+    setBrands(filterBrand);
+  }, [searchResults]);
   return (
     <>
       <Header title={`Jual ${q} - Indoteknik`} />
+      <Filter 
+        selectedBrand={selectedBrand}
+        onChangeBrand={(e) => setSelectedBrand(e.target.value)}
+        selectedCategory={selectedCategory}
+        onChangeCategory={(e) => setSelectedCategory(e.target.value)}
+        brands={brands}
+        categories={categories}
+        isActiveFilter={activeFilter} 
+        closeFilter={() => setActiveFilter(false)} 
+        onSubmit={filterSubmit}
+      />
       <Layout>
         <div className="p-4">
-          <div className="flex justify-between items-center gap-x-2 mb-1">
-            <h1>Produk</h1>
-            <button className="btn-light py-1 flex items-center gap-x-2">
-              <FilterIcon className="w-4 h-4" /> <span>Filter</span>
-            </button>
-          </div>
+          <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>Produk</h1>
           <div className="text-sm mb-4">
             {productFound > 0 ? (
               <>