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

3 files changed, 49 insertions, 52 deletions

diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 3f13f56c..9cd3d4ba 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -43,11 +43,12 @@ export default async function handler(req, res) {
     page = 1,
     brand = '',
     category = '',
+    price_from = 0,
+    price_to = 0
   } = req.query;
 
   let limit = 30;
   let offset = (page - 1) * limit;
-
   let parameter = [
     `facet.query=${q}`,
     'facet=true',
@@ -58,7 +59,8 @@ export default async function handler(req, res) {
     'facet.field=category_name_str',
     `start=${offset}`,
     `rows=${limit}`,
-    'sort=product_rating desc'
+    'sort=product_rating desc',
+    `fq=price_discount:[${price_from == 0 ? '*' : price_from} TO ${price_to == 0 ? '*' : price_to}]`
   ];
 
   if (brand) parameter.push(`fq=brand:${brand}`);
diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 8a7b7684..5d93bf4b 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -5,7 +5,7 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 import Link from "../../components/Link";
 import { createSlug } from "../../helpers/slug";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Spinner from "../../components/Spinner";
 import Layout from "../../components/Layout";
 
@@ -22,12 +22,13 @@ export default function Brands({ initialManufactures }) {
   const alpha = Array.from(Array(26)).map((e, i) => i + 65);
   const alphabets = alpha.map((x) => String.fromCharCode(x));
 
-  const getMoreManufactures = useCallback(async () => {
+  const getMoreManufactures = async () => {
     const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
+    console.log(manufactures, manufactures.length);
     const result = await apiOdoo('GET', `/api/v1/manufacture?limit=30&offset=${manufactures.length}&name=${name}`);
     setHasMoreManufacture(manufactures.length + 30 < result.manufacture_total)
     setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
-  }, [manufactureStartwith]);
+  };
 
   const filterManufactureStartWith = (character) => {
     setManufactures([]);
@@ -40,7 +41,7 @@ export default function Brands({ initialManufactures }) {
 
   useEffect(() => {
     getMoreManufactures();
-  }, [getMoreManufactures]);
+  }, [manufactureStartwith]);
 
   return (
     <>
@@ -48,9 +49,9 @@ export default function Brands({ initialManufactures }) {
       <Layout>
         <div className="p-4">
           <h1>Semua Brand di Indoteknik</h1>
-          <div className="flex overflow-x-auto gap-x-4 py-2">
+          <div className="flex overflow-x-auto gap-x-2 py-2">
             {alphabets.map((alphabet, index) => (
-              <button key={index} className={"p-2 py-1 border bg-white border-gray-300 rounded" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+              <button key={index} className={"p-2 py-1 border bg-white border-gray-300 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
                 {alphabet}
               </button>
             ))}
@@ -59,7 +60,7 @@ export default function Brands({ initialManufactures }) {
             dataLength={manufactures.length}
             next={getMoreManufactures}
             hasMore={hasMoreManufacture}
-            className="grid grid-cols-3 gap-4 mt-6 !overflow-x-hidden"
+            className="grid grid-cols-4 gap-4 mt-6 !overflow-x-hidden"
             loader={
               <div className="flex justify-center items-center border border-gray-300 p-2 rounded h-14">
                 <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>
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>