Filter search by brand, category, price

4 files changed, 70 insertions, 18 deletions

diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 72db04fd..3f13f56c 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -40,7 +40,9 @@ const productResponseMap = (products) => {
 export default async function handler(req, res) {
   const { 
     q, 
-    page = 1 
+    page = 1,
+    brand = '',
+    category = '',
   } = req.query;
 
   let limit = 30;
@@ -57,9 +59,12 @@ export default async function handler(req, res) {
     `start=${offset}`,
     `rows=${limit}`,
     'sort=product_rating desc'
-  ].join('&');
+  ];
+
+  if (brand) parameter.push(`fq=brand:${brand}`);
+  if (category) parameter.push(`fq=category_name:${category}`);
   
-  let result = await axios(process.env.SOLR_HOST + '/solr/products/select?' + parameter);
+  let result = await axios(process.env.SOLR_HOST + '/solr/products/select?' + parameter.join('&'));
   try {
     result.data.response.products = productResponseMap(result.data.response.docs);
     result.data.responseHeader.params.start = parseInt(result.data.responseHeader.params.start);
diff --git a/src/pages/login.js b/src/pages/login.js
index cff2e0cd..cb299afa 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -65,14 +65,14 @@ export default function Login() {
         <form onSubmit={login} className="w-full">
           <input 
             type="text"
-            className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
+            className="form-input bg-gray-100 mt-4" 
             placeholder="johndoe@gmail.com"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
           <input 
             type="password"
-            className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
+            className="form-input bg-gray-100 mt-4" 
             placeholder="••••••••"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
diff --git a/src/pages/register.js b/src/pages/register.js
index ff6aa1d8..41bd7c75 100644
--- a/src/pages/register.js
+++ b/src/pages/register.js
@@ -63,21 +63,21 @@ export default function Login() {
         <form onSubmit={register} className="w-full">
           <input 
             type="text"
-            className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
+            className="form-input bg-gray-100 mt-4" 
             placeholder="johndoe@gmail.com"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
           <input 
             type="text"
-            className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
+            className="form-input bg-gray-100 mt-4" 
             placeholder="John Doe"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
           <input 
             type="password"
-            className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
+            className="form-input bg-gray-100 mt-4" 
             placeholder="••••••••"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
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 ? (
               <>