1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
import axios from "axios";
import Header from "../../components/Header";
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 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}`);
searchResults = searchResults.data;
return { props: { searchResults, q, page, brand, category } };
}
export default function ShopSearch({ searchResults, q, page, brand, category }) {
const router = useRouter();
const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
const productStart = searchResults.responseHeader.params.start;
const productRows = searchResults.responseHeader.params.rows;
const productFound = searchResults.response.numFound;
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 });
}
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}
/>
<Layout>
<div className="p-4">
<button className="btn-light py-2 flex items-center gap-x-2 mb-2" onClick={() => setActiveFilter(true)}>
<FilterIcon className="w-4 h-4" /> <span>Filter</span>
</button>
<h1>Produk</h1>
<div className="text-sm mb-4">
{productFound > 0 ? (
<>
Menampilkan
{pageCount > 1 ? (
<>
{productStart + 1}-{
(productStart + productRows) > productFound ? productFound : productStart + productRows
}
dari
</>
) : ''}
{searchResults.response.numFound}
produk untuk pencarian <span className="font-semibold">{q}</span>
</>
) : 'Mungkin yang anda cari'}
</div>
<div className="grid grid-cols-2 gap-3">
{searchResults.response.products.map((product) => (
<ProductCard key={product.id} data={product} />
))}
</div>
<div className="mt-4">
<Pagination pageCount={pageCount} currentPage={parseInt(page)} url={`/shop/search?q=${q}`} />
</div>
</div>
</Layout>
</>
)
}
|
