From 4a85f437cfa7a61bebd341c9a509abccbd64745b Mon Sep 17 00:00:00 2001
From: Mqdd <ahmadmiqdad27@gmail.com>
Date: Wed, 18 Feb 2026 17:26:59 +0700
Subject: <MIqdad> fix pagination

---
 src/lib/product/components/ProductSearch.jsx | 74 ++++++++++++++++++++++++----
 src/pages/searchkey/[slug].jsx               | 16 +++---
 2 files changed, 73 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index c73c7036..3e667966 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -44,7 +44,7 @@ const ProductSearch = ({
   const { page = 1 } = query;
   const [q, setQ] = useState(query?.q || '*');
   const [search, setSearch] = useState(query?.q || '*');
-  const [limit, setLimit] = useState(router.query?.limit || 30);
+  const [limit, setLimit] = useState(parseInt(router.query?.limit) || 30);
   const [orderBy, setOrderBy] = useState(router.query?.orderBy);
   const [finalQuery, setFinalQuery] = useState({});
   const [queryFinal, setQueryFinal] = useState({});
@@ -86,6 +86,21 @@ const ProductSearch = ({
     }
   }, [router.isReady, router.pathname, router.query?.orderBy, prefixUrl]);
 
+  // 🔹 Sync limit state with router.query
+  useEffect(() => {
+    if (!router.isReady) return;
+    const newLimit = parseInt(router.query?.limit) || 30;
+    setLimit(newLimit);
+  }, [router.query?.limit, router.isReady]);
+
+  // 🔹 Sync orderBy state with router.query
+  useEffect(() => {
+    if (!router.isReady) return;
+    if (router.query?.orderBy) {
+      setOrderBy(router.query.orderBy);
+    }
+  }, [router.query?.orderBy, router.isReady]);
+
   const dataIdCategories = [];
   useEffect(() => {
     if (prefixUrl.includes('category')) {
@@ -180,20 +195,55 @@ const ProductSearch = ({
         }
       };
       fetchCategoryData();
+    } else if (query?.from === 'searchkey' && query?.ids) {
+      const newQuery = {
+        ids: query.ids,
+        from: 'searchkey',
+        page: router.query.page ? router.query.page : 1,
+        category: router.query.category ? router.query.category : '',
+        priceFrom: router.query.priceFrom ? router.query.priceFrom : '',
+        priceTo: router.query.priceTo ? router.query.priceTo : '',
+        limit: router.query.limit ? router.query.limit : '',
+        orderBy: router.query.orderBy ? router.query.orderBy : '',
+      };
+      setFinalQuery(newQuery);
     }
-  }, [dataCategoriesProduct, dataLob]);
+  }, [dataCategoriesProduct, dataLob, query?.from, query?.ids, router.query]);
 
   useEffect(() => {
     if (
       prefixUrl.includes('category') ||
       prefixUrl.includes('lob') ||
+      query?.from === 'searchkey' ||
       router.asPath.includes('penawaran')
     ) {
-      setQueryFinal({ ...finalQuery, q, limit, orderBy });
+      setQueryFinal({
+        ...finalQuery,
+        q,
+        limit,
+        orderBy,
+        page: router.query.page || 1,
+      });
     } else {
-      setQueryFinal({ ...query, q, limit, orderBy });
+      setQueryFinal({
+        ...query,
+        q,
+        limit,
+        orderBy,
+        page: router.query.page || 1,
+      });
     }
-  }, [prefixUrl, dataCategoriesProduct, query, finalQuery]);
+  }, [
+    prefixUrl,
+    dataCategoriesProduct,
+    query,
+    finalQuery,
+    router.query,
+    router.query.page,
+    limit,
+    orderBy,
+    q,
+  ]);
 
   const { productSearch } = useProductSearch({
     query: queryFinal,
@@ -339,6 +389,7 @@ const ProductSearch = ({
     let params = {
       ...router.query,
       limit: e.target.value,
+      page: 1, // Reset to page 1 when limit changes
     };
     params = _.pickBy(params, _.identity);
     params = toQuery(params);
@@ -541,8 +592,10 @@ const ProductSearch = ({
 
           <Pagination
             pageCount={pageCount}
-            currentPage={parseInt(page)}
-            url={`${prefixUrl}?${toQuery(_.omit(query, ['page', 'fq']))}`}
+            currentPage={
+              router.query.page ? parseInt(router.query.page, 10) : 1
+            }
+            url={`${prefixUrl}?${toQuery(_.omit(router.query, ['page', 'ids', 'from']))}`}
             className='mt-6 mb-2'
           />
 
@@ -729,9 +782,10 @@ const ProductSearch = ({
 
               <Pagination
                 pageCount={pageCount}
-                currentPage={parseInt(page)}
-                url={`${prefixUrl}?${toQuery(_.omit(query, ['page', 'fq']))}`}
-                // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+                currentPage={
+                  router.query.page ? parseInt(router.query.page, 10) : 1
+                }
+                url={`${prefixUrl}?${toQuery(_.omit(router.query, ['page', 'ids', 'from']))}`}
                 className='!justify-end'
               />
             </div>
diff --git a/src/pages/searchkey/[slug].jsx b/src/pages/searchkey/[slug].jsx
index b0fc9ab8..2fa3cf8d 100644
--- a/src/pages/searchkey/[slug].jsx
+++ b/src/pages/searchkey/[slug].jsx
@@ -8,11 +8,11 @@ import { capitalizeEachWord } from '../../utils/capializeFIrstWord';
 // ✅ Breadcrumb = default export
 import Breadcrumb from '@/lib/category/components/Breadcrumb';
 
-const BasicLayout = dynamic(() =>
-  import('@/core/components/layouts/BasicLayout')
+const BasicLayout = dynamic(
+  () => import('@/core/components/layouts/BasicLayout'),
 );
-const ProductSearch = dynamic(() =>
-  import('@/lib/product/components/ProductSearch')
+const ProductSearch = dynamic(
+  () => import('@/lib/product/components/ProductSearch'),
 );
 
 export default function KeywordPage() {
@@ -33,7 +33,7 @@ export default function KeywordPage() {
   const getSearchKeyData = async (slug) => {
     try {
       const res = await axios(
-        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/searchkey?url=${slug}&from=searchkey`
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/searchkey?url=${slug}&from=searchkey`,
       );
 
       setResult(res?.data?.response?.docs?.[0] || null);
@@ -52,7 +52,7 @@ export default function KeywordPage() {
   useEffect(() => {
     if (!result) return;
 
-    // product search
+    // product search - keep ids for API, add from marker for ProductSearch
     const ids = result.product_ids_is || [];
     setQuery({
       ids: ids.join(','),
@@ -90,7 +90,9 @@ export default function KeywordPage() {
       )}
 
       {/* ✅ Product result */}
-      {query && <ProductSearch query={query} prefixUrl={route.asPath} />}
+      {query && (
+        <ProductSearch query={query} prefixUrl={`/searchkey/${slugRaw}`} />
+      )}
     </BasicLayout>
   );
 }
-- 
cgit v1.2.3