From 5786bd52bfc098d144dd77332c32edabd7cec251 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Wed, 16 Nov 2022 11:54:22 +0700
Subject: Create pagination component

---
 src/pages/api/shop/search.js |  1 +
 src/pages/shop/search.js     | 40 ++++++++++++++++++++++------------------
 2 files changed, 23 insertions(+), 18 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 3c3a1766..72db04fd 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -56,6 +56,7 @@ export default async function handler(req, res) {
     'facet.field=category_name_str',
     `start=${offset}`,
     `rows=${limit}`,
+    'sort=product_rating desc'
   ].join('&');
   
   let result = await axios(process.env.SOLR_HOST + '/solr/products/select?' + parameter);
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 6e6839be..92f1bf5a 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -1,19 +1,20 @@
 import axios from "axios";
-import Link from "next/link";
-import { useEffect, useState } from "react";
 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(`http://${context.req.headers.host}/api/shop/search?q=${q}&page=${page}`);
+  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&page=${page}`);
   searchResults = searchResults.data;
-  return { props: { searchResults, q } };
+  return { props: { searchResults, q, page } };
 }
 
-export default function ShopSearch({ searchResults, q, page = 1 }) {
-  const pageTotal = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
-
+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`} />
@@ -21,23 +22,26 @@ export default function ShopSearch({ searchResults, q, page = 1 }) {
         <div className="p-4">
           <h1 className="mb-1">Produk</h1>
           <div className="text-xs mb-4">
-            Menampilkan&nbsp;
-            {searchResults.responseHeader.params.start + 1}-{searchResults.responseHeader.params.start + searchResults.responseHeader.params.rows}
-            &nbsp;dari&nbsp;
-            {searchResults.response.numFound}
-            &nbsp;produk untuk pencarian {q}
+            {productFound > 0 ? (
+              <>
+                Menampilkan&nbsp;
+                {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="flex justify-center gap-x-1 mt-4">
-            {[...Array(pageTotal)].map((v, i) => (
-              <Link href={`/shop/search?q=${q}&page=${i+1}`} key={i} className={"p-1 px-2 rounded ease-linear duration-150 " + (page == (i + 1) ? "bg-yellow-900 text-white" : "bg-gray-100 hover:bg-gray-300 text-gray-900")}>
-                {i + 1}
-              </Link>
-            ))}
+          
+          <div className="mt-4">
+            <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={`/shop/search?q=${q}`} />
           </div>
         </div>
       </main>
-- 
cgit v1.2.3