diff options
Diffstat (limited to 'src/components/elements/Filter.js')
| -rw-r--r-- | src/components/elements/Filter.js | 176 |
1 files changed, 0 insertions, 176 deletions
diff --git a/src/components/elements/Filter.js b/src/components/elements/Filter.js deleted file mode 100644 index f2051ba8..00000000 --- a/src/components/elements/Filter.js +++ /dev/null @@ -1,176 +0,0 @@ -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>—</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 |