Filter by price from and price to, optimize code component filter, fix style brand

1 files changed, 37 insertions, 43 deletions

diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index f41adf3e..29c5b106 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -4,18 +4,33 @@ 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 { useState } from "react";
 import Filter from "../../components/Filter";
 import { useRouter } from "next/router";
 
 export async function getServerSideProps(context) {
-  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}`);
+  const { 
+    q, 
+    page = 1, 
+    brand = '', 
+    category = '',
+    price_from = '0',
+    price_to = '0'
+  } = context.query;
+
+  let urlParameter = [
+    `page=${page}`,
+    `brand=${brand}`,
+    `category=${category}`,
+    `price_from=${price_from}`,
+    `price_to=${price_to}`,
+  ].join('&');
+  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&${urlParameter}`);
   searchResults = searchResults.data;
-  return { props: { searchResults, q, page, brand, category } };
+  return { props: { searchResults, q, page, brand, category, price_from, price_to } };
 }
 
-export default function ShopSearch({ searchResults, q, page, brand, category }) {
+export default function ShopSearch({ searchResults, q, page, brand, category, price_from, price_to }) {
   const router = useRouter();
 
   const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
@@ -23,51 +38,30 @@ export default function ShopSearch({ searchResults, q, page, brand, category })
   const productRows = searchResults.responseHeader.params.rows;
   const productFound = searchResults.response.numFound;
 
+  // Variable for <Filter/> props state
   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 });
+  const route = () => {
+    let route = `/shop/search?q=${q}`;
+    if (brand) route += `&brand=${brand}`;
+    if (category) route += `&category=${category}`;
+    if (price_from > 0) route += `&price_from=${price_from}`;
+    if (price_to > 0) route += `&price_to=${price_to}`;
+    return route;
   }
 
-  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}
+        defaultRoute={`/shop/search?q=${q}`}
+        isActive={activeFilter}
+        closeFilter={() => setActiveFilter(false)}
+        defaultPriceFrom={price_from}
+        defaultPriceTo={price_to}
+        defaultBrand={brand}
+        defaultCategory={category}
+        searchResults={searchResults}
       />
       <Layout>
         <div className="p-4">
@@ -99,7 +93,7 @@ export default function ShopSearch({ searchResults, q, page, brand, category })
           </div>
           
           <div className="mt-4">
-            <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={`/shop/search?q=${q}`} />
+            <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} />
           </div>
         </div>
       </Layout>