From ee4297280c1305c7e03bedd4df63ccf136c28c6c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 24 Jan 2023 15:54:48 +0700
Subject: Merapihkan struktur folder

---
 src/components/elements/Filter.js | 176 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 176 insertions(+)
 create mode 100644 src/components/elements/Filter.js

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

diff --git a/src/components/elements/Filter.js b/src/components/elements/Filter.js
new file mode 100644
index 00000000..f2051ba8
--- /dev/null
+++ b/src/components/elements/Filter.js
@@ -0,0 +1,176 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import BottomPopup from "./BottomPopup";
+
+const Filter = ({ 
+  isActive,
+  closeFilter,
+  defaultRoute,
+  defaultPriceFrom,
+  defaultPriceTo,
+  defaultCategory,
+  defaultBrand,
+  defaultOrderBy,
+  searchResults,
+  disableFilter = []
+}) => {
+  const router = useRouter();
+
+  const [priceFrom, setPriceFrom] = useState(defaultPriceFrom);
+  const [priceTo, setPriceTo] = useState(defaultPriceTo);
+  const [orderBy, setOrderBy] = useState(defaultOrderBy);
+  const [selectedCategory, setSelectedCategory] = useState(defaultCategory);
+  const [selectedBrand, setSelectedBrand] = useState(defaultBrand);
+  const [categories, setCategories] = useState([]);
+  const [brands, setBrands] = useState([]);
+
+  const filterRoute = () => {
+    let filterRoute = [];
+    let filterRoutePrefix = '?';
+    if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`);
+    if (selectedCategory) filterRoute.push(`category=${selectedCategory}`);
+    if (priceFrom) filterRoute.push(`price_from=${priceFrom}`);
+    if (priceTo) filterRoute.push(`price_to=${priceTo}`);
+    if (orderBy) filterRoute.push(`order_by=${orderBy}`);
+
+    if (defaultRoute.includes('?')) filterRoutePrefix = '&';
+    if (filterRoute.length > 0) {
+      filterRoute = filterRoutePrefix + filterRoute.join('&');
+    } else {
+      filterRoute = '';
+    }
+
+    return defaultRoute + 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('');
+    setPriceTo('');
+    setOrderBy('');
+  }
+
+  const changeOrderBy = (value) => {
+    if (orderBy == value) {
+      setOrderBy('');
+    } else {
+      setOrderBy(value);
+    }
+  }
+
+  const sortOptions = [
+    {
+      name: 'Harga Terendah',
+      value: 'price-asc',
+    }, 
+    {
+      name: 'Harga Tertinggi',
+      value: 'price-desc',
+    },
+    {
+      name: 'Populer',
+      value: 'popular',
+    },
+    {
+      name: 'Ready Stock',
+      value: 'stock',
+    },
+  ];
+
+  return (
+    <>
+      <BottomPopup active={isActive} closePopup={closeFilter} title="Filter Produk">
+        <form className="flex flex-col gap-y-4" onSubmit={submit}>
+          {(selectedBrand || selectedCategory || priceFrom || priceTo || orderBy) && (
+            <button type="button" className="text-yellow_r-11 font-semibold ml-auto" onClick={reset}>
+              Reset Filter
+            </button>
+          )}
+
+          {!disableFilter.includes('orderBy') && (
+            <div>
+              <label>Urutkan</label>
+              <div className="flex gap-2 mt-2 overflow-x-auto w-full">
+              {sortOptions.map((sortOption, index) => (
+                <button 
+                  key={index}
+                  type="button" 
+                  className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == sortOption.value ? ' border-yellow_r-10 bg-yellow_r-3 text-yellow_r-11' : '')} 
+                  onClick={() => changeOrderBy(sortOption.value)}
+                >
+                  {sortOption.name}
+                </button>
+              ))}
+              </div>
+            </div>
+          )}
+
+          {!disableFilter.includes('category') && (
+            <div>
+              <label>Kategori</label>
+              <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>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {!disableFilter.includes('brand') && (
+            <div>
+              <label>Brand</label>
+              <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>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {!disableFilter.includes('price') && (
+            <div>
+              <label>Harga</label>
+              <div className="flex gap-x-4 mt-2 items-center">
+                <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
+                <span>&mdash;</span>
+                <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
+              </div>
+            </div>
+          )}
+          <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
+            Terapkan Filter
+          </button>
+        </form>
+      </BottomPopup>
+    </>
+  )
+};
+
+export default Filter;
\ No newline at end of file
-- 
cgit v1.2.3