From be4dac443438a6eaf63f34d6a93cdc00c469bbec Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Wed, 23 Nov 2022 10:57:58 +0700
Subject: Filter by price from and price to, optimize code component filter,
 fix style brand

---
 src/components/Filter.js | 83 ++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 14 deletions(-)

(limited to 'src/components/Filter.js')

diff --git a/src/components/Filter.js b/src/components/Filter.js
index cb8fd626..a07beff3 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -1,28 +1,78 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import CloseIcon from "../icons/close.svg";
 
 const Filter = ({ 
-  selectedBrand,
-  onChangeBrand,
-  selectedCategory,
-  onChangeCategory,
-  brands,
-  categories,
-  isActiveFilter, 
+  isActive,
   closeFilter,
-  onSubmit
+  defaultRoute,
+  defaultPriceFrom,
+  defaultPriceTo,
+  defaultCategory,
+  defaultBrand,
+  searchResults
 }) => {
+  const router = useRouter();
+
+  const [priceFrom, setPriceFrom] = useState(defaultPriceFrom);
+  const [priceTo, setPriceTo] = useState(defaultPriceTo);
+  const [selectedCategory, setSelectedCategory] = useState(defaultCategory);
+  const [selectedBrand, setSelectedBrand] = useState(defaultBrand);
+  const [categories, setCategories] = useState([]);
+  const [brands, setBrands] = useState([]);
+
+  const filterRoute = () => {
+    let filterRoute = defaultRoute;
+    if (selectedBrand) filterRoute += `&brand=${selectedBrand}`;
+    if (selectedCategory) filterRoute += `&category=${selectedCategory}`;
+    if (priceFrom > 0) filterRoute += `&price_from=${priceFrom}`;
+    if (priceTo > 0) filterRoute += `&price_to=${priceTo}`;
+    return filterRoute;
+  }
+
+  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]);
+
+  const submit = (e) => {
+    e.preventDefault();
+    closeFilter();
+    router.push(filterRoute(), undefined, { scroll: false });
+  }
+
+  const reset = () => {
+    setSelectedBrand('');
+    setSelectedCategory('');
+    setPriceFrom(0);
+    setPriceTo(0);
+  }
+
   return (
-    <div className={`fixed w-full z-[60] py-8 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActiveFilter ? 'bottom-0' : 'bottom-[-100%]'}`}>
+    <div className={`fixed w-full z-[60] py-8 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
       <div className="flex justify-between items-center mb-5">
         <h2 className="text-xl font-semibold">Filter Produk</h2>
         <button onClick={closeFilter}>
           <CloseIcon className="w-7" />
         </button>
       </div>
-      <form className="flex flex-col gap-y-4" onSubmit={onSubmit}>
+      <form className="flex flex-col gap-y-4" onSubmit={submit}>
         <div>
           <label>Kategori</label>
-          <select className="form-input mt-2" value={selectedCategory} onChange={onChangeCategory}>
+          <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
             <option value="">Pilih kategori...</option>
             {categories?.map((category, index) => (
               <option key={index} value={category}>{category}</option>
@@ -31,7 +81,7 @@ const Filter = ({
         </div>
         <div>
           <label>Brand</label>
-          <select className="form-input mt-2" value={selectedBrand} onChange={onChangeBrand}>
+          <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
             <option value="">Pilih brand...</option>
             {brands?.map((brand, index) => (
               <option key={index} value={brand}>{brand}</option>
@@ -41,14 +91,19 @@ const Filter = ({
         <div>
           <label>Harga</label>
           <div className="flex gap-x-4 mt-2 items-center">
-            <input className="form-input"/>
+            <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
             <span>-</span>
-            <input className="form-input"/>
+            <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
           </div>
         </div>
         <button type="submit" className="btn-yellow font-semibold mt-4 w-full">
           Terapkan Filter
         </button>
+        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 ? (
+          <button type="button" className="btn-light font-semibold w-full" onClick={reset}>
+            Reset Filter
+          </button>
+        ) : ''}
       </form>
     </div>
   )
-- 
cgit v1.2.3