diff options
Diffstat (limited to 'src2/pages/shop/search.js')
| -rw-r--r-- | src2/pages/shop/search.js | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/src2/pages/shop/search.js b/src2/pages/shop/search.js new file mode 100644 index 00000000..4152bd43 --- /dev/null +++ b/src2/pages/shop/search.js @@ -0,0 +1,125 @@ +import axios from "axios"; +import Header from "@/components/layouts/Header"; +import Layout from "@/components/layouts/Layout"; +import Pagination from "@/components/elements/Pagination"; +import ProductCard from "@/components/products/ProductCard"; +import FilterIcon from "@/icons/filter.svg"; +import { useEffect, useState } from "react"; +import Filter from "@/components/elements/Filter"; +import Footer from "@/components/layouts/Footer"; + +export async function getServerSideProps(context) { + const { + q = '*', + page = 1, + brand = '', + category = '', + price_from = '', + price_to = '', + order_by = '', + } = context.query; + + let urlParameter = [ + `page=${page}`, + `brand=${brand}`, + `category=${category}`, + `price_from=${price_from}`, + `price_to=${price_to}`, + `order_by=${order_by}` + ].join('&'); + let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&${urlParameter}`); + searchResults = searchResults.data; + return { props: { searchResults, q, page, brand, category, price_from, price_to, order_by } }; +} + +export default function ShopSearch({ + searchResults, + q, + page, + brand, + category, + price_from, + price_to, + order_by +}) { + 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; + + // Variable for <Filter/> props state + const [activeFilter, setActiveFilter] = useState(false); + const [filterCount, setFilterCount] = useState(0); + + const route = () => { + let route = `/shop/search?q=${q}`; + if (brand) route += `&brand=${brand}`; + if (category) route += `&category=${category}`; + if (price_from) route += `&price_from=${price_from}`; + if (price_to) route += `&price_to=${price_to}`; + if (order_by) route += `&order_by=${order_by}`; + return route; + } + + useEffect(() => { + let calculateFilterCount = 0; + if (brand) calculateFilterCount++; + if (category) calculateFilterCount++; + if (price_from || price_to) calculateFilterCount++; + if (order_by) calculateFilterCount++; + setFilterCount(calculateFilterCount); + }, [brand, category, price_from, price_to, order_by]); + + return ( + <> + <Header title={`Jual ${q} - Indoteknik`} /> + <Filter + defaultRoute={`/shop/search?q=${q}`} + isActive={activeFilter} + closeFilter={() => setActiveFilter(false)} + defaultPriceFrom={price_from} + defaultPriceTo={price_to} + defaultBrand={brand} + defaultCategory={category} + defaultOrderBy={order_by} + searchResults={searchResults} + /> + <Layout> + <div className="p-4"> + <h1 className="mb-2">Produk</h1> + <div className="text-caption-1 mb-4"> + {productFound > 0 ? ( + <> + Menampilkan + {pageCount > 1 ? ( + <> + {productStart + 1}-{ + (productStart + productRows) > productFound ? productFound : productStart + productRows + } + dari + </> + ) : ''} + {searchResults.response.numFound} + produk { q != '*' && (<>untuk pencarian <span className="font-semibold">{q}</span></>) } + </> + ) : 'Mungkin yang anda cari'} + </div> + <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}> + <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span> + </button> + <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={route()} /> + </div> + </div> + + <Footer /> + </Layout> + </> + ) +}
\ No newline at end of file |