perf(products): fix search behavior on the next page

fixes #87
202306-NEA-DZ-FEW · Nov 12, 2023 · 24ece57 · 24ece57
1 parent 310517c
commit 24ece57
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/src/components/ProductFiltering/Pagination.jsx b/src/components/ProductFiltering/Pagination.jsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { BiLeftArrow, BiRightArrow } from "react-icons/bi";
 
 function Pagination({ page, pageSize, totalItems, queryParams, totalPages }) {
   const router = useRouter();
@@ -34,18 +35,18 @@ function Pagination({ page, pageSize, totalItems, queryParams, totalPages }) {
           disabled={!hasPrev}
           onClick={() => handleChangePage("prev")}
         >
-          Previous
+          <BiLeftArrow /> Previous
         </button>
         <button
           className='btn btn-sm normal-case font-normal tracking-wide'
           disabled={!hasNext}
           onClick={() => handleChangePage("next")}
         >
-          Next
+          Next <BiRightArrow />
         </button>
       </div>
       <div>
-        <p className='font-light text-sm tracking-wide'>
+        <p className='font-normal opacity-50 text-sm tracking-wide'>
           page: {page} of {totalPages}
         </p>
       </div>

diff --git a/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap b/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap
@@ -12,19 +12,55 @@ exports[`renders correctly 1`] = `
       disabled={true}
       onClick={[Function]}
     >
-      Previous
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.464 2.114a.998.998 0 0 0-1.033.063l-13 9a1.003 1.003 0 0 0 0 1.645l13 9A1 1 0 0 0 19 21V3a1 1 0 0 0-.536-.886zM17 19.091 6.757 12 17 4.909v14.182z"
+        />
+      </svg>
+       Previous
     </button>
     <button
       className="btn btn-sm normal-case font-normal tracking-wide"
       disabled={true}
       onClick={[Function]}
     >
-      Next
+      Next 
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.536 21.886a1.004 1.004 0 0 0 1.033-.064l13-9a1 1 0 0 0 0-1.644l-13-9A.998.998 0 0 0 5 3v18a1 1 0 0 0 .536.886zM7 4.909 17.243 12 7 19.091V4.909z"
+        />
+      </svg>
     </button>
   </div>
   <div>
     <p
-      className="font-light text-sm tracking-wide"
+      className="font-normal opacity-50 text-sm tracking-wide"
     >
       page: 
       1

diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx
@@ -13,6 +13,7 @@ function SearchBar({ t, queryParams }) {
     const newQueryParams = { ...queryParams };
     if (query) {
       newQueryParams.search = query;
+      delete newQueryParams.page;
     } else {
       delete newQueryParams.search;
     }

diff --git a/src/lib/fetchCollectionWithQuery.js b/src/lib/fetchCollectionWithQuery.js
@@ -55,23 +55,21 @@ export async function fetchCollectionWithQuery(
     q = query(q, startAfter(startAfterDoc));
   }
 
-  if (!queryParams.search) {
-    q = query(q, limit(pageSize));
-  }
+  q = query(q, limit(pageSize));
 
   try {
     const querySnapshot = await getDocs(q);
     let totalItems = 0;
 
     //get all items count
-    totalItems = (await getDocs(collectionRef)).size;
-
-    //get only filtred items count
     if (Object.entries(queryParams).length !== 0 && !queryParams.page) {
       totalItems = (await getDocs(q)).size;
+    } else {
+      totalItems = (await getDocs(collectionRef)).size;
     }
 
     const totalPages = Math.ceil(totalItems / pageSize);
+
     console.log({ totalPages, totalItems });
     const items = [];