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