src/pages/shop/search.js


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

import axios from "axios";
import Header from "../../components/Header";
import Pagination from "../../components/Pagination";
import ProductCard from "../../components/ProductCard";

export async function getServerSideProps(context) {
  const { q, page = 1 } = context.query;
  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&page=${page}`);
  searchResults = searchResults.data;
  return { props: { searchResults, q, page } };
}

export default function ShopSearch({ searchResults, q, page }) {
  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;
  return (
    <>
      <Header title={`Jual ${q} - Indoteknik`} />
      <main>
        <div className="p-4">
          <h1 className="mb-1">Produk</h1>
          <div className="text-sm mb-4">
            {productFound > 0 ? (
              <>
                Menampilkan&nbsp;
                {pageCount > 1 ? (
                  <>
                    {productStart + 1}-{
                      (productStart + productRows) > productFound ? productFound : productStart + productRows
                    }
                    &nbsp;dari&nbsp;
                  </>
                ) : ''}
                {searchResults.response.numFound}
                &nbsp;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>
      </main>
    </>
  )
}