pagination code done but not reflecting products on UI(have to fix it)

Author: murtazatankiwala456

src/app/constants.js

@@ -0,0 +1 @@
+export const ITEMS_PER_PAGE = 6;

src/features/product/components/ProductList.js

@@ -16,6 +16,7 @@ import {
   PlusIcon,
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
+import { ITEMS_PER_PAGE } from "../../../app/constants";
 
 const sortOptions = [
   { name: "Best Rating", sort: "rating", current: false },
@@ -66,6 +67,7 @@ export default function ProductList() {
   const dispatch = useDispatch();
   const [filter, setFilter] = useState({});
   const [sort, setSort] = useState({});
+  const [page, setPage] = useState(1);
 
   const handleFilter = (e, section, option) => {
     console.log(e.target.checked);
@@ -95,10 +97,15 @@ export default function ProductList() {
     console.log(sort);
     setSort(sort);
   };
+  const handlePage = (page) => {
+    console.log({ page });
+    setPage(page);
+  };
   // making API call when dispatch or when filter is applied in a one go....
   useEffect(() => {
-    dispatch(fetchProductsByFiltersAsync({ filter, sort }));
-  }, [dispatch, filter, sort]);
+    const pagination = { _page: page, _per_page: ITEMS_PER_PAGE };
+    dispatch(fetchProductsByFiltersAsync({ filter, sort, pagination }));
+  }, [dispatch, filter, sort, page]);
 
   return (
     <div className="bg-white">
@@ -201,7 +208,7 @@ export default function ProductList() {
 
           {/* section of product and filters ends */}
 
-          <Pagination />
+          <Pagination page={page} setPage={setPage} handlePage={handlePage} />
         </main>
       </div>
     </div>
@@ -430,7 +437,7 @@ function ProductGrid({ products }) {
   );
 }
 
-function Pagination() {
+function Pagination({ page, setPage, handlePage, totalItems = 30 }) {
   return (
     <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
       <div className="flex flex-1 justify-between sm:hidden">
@@ -450,9 +457,15 @@ function Pagination() {
       <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
         <div>
           <p className="text-sm text-gray-700">
-            Showing <span className="font-medium">1</span> to{" "}
-            <span className="font-medium">10</span> of{" "}
-            <span className="font-medium">97</span> results
+            Showing
+            {/* (3-1) * 6 + 1 =13 */}
+            <span className="font-medium">
+              {(page - 1) * ITEMS_PER_PAGE + 1}
+            </span>{" "}
+            {/* 3 * 6 = 18 */}
+            to <span className="font-medium">
+              {page * ITEMS_PER_PAGE}{" "}
+            </span> of <span className="font-medium">{totalItems}</span> results
           </p>
         </div>
         <div>
@@ -468,19 +481,22 @@ function Pagination() {
               <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
             </a>
             {/* Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" */}
-            <a
-              href="#"
-              aria-current="page"
-              className="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              1
-            </a>
-            <a
-              href="#"
-              className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              2
-            </a>
+            {Array.from({ length: Math.ceil(totalItems / ITEMS_PER_PAGE) }).map(
+              //extracting all the indexes of array
+              (el, index) => (
+                <div
+                  onClick={() => handlePage(index + 1)}
+                  aria-current="page"
+                  className={`relative z-10 inline-flex items-center ${
+                    index + 1 === page
+                      ? "bg-indigo-600 text-white"
+                      : "text-gray-400 "
+                  }  px-4 py-2 text-sm font-semibold cursor-pointer  focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600`}
+                >
+                  {index + 1}
+                </div>
+              )
+            )}
 
             <a
               href="#"

src/features/product/productAPI.js

@@ -6,7 +6,7 @@ export function fetchAllProducts() {
     resolve({ data });
   });
 }
-export function fetchProductsByFilters(filter, sort) {
+export function fetchProductsByFilters(filter, sort, pagination) {
   // filter ={"brand":"Essence"}
   // TODO:we will on server  support mutilple value
 
@@ -28,6 +28,7 @@ export function fetchProductsByFilters(filter, sort) {
   // in server side:-
   // filter ={"category":["frangrances","furniture"]}
   // sort={_sort:"price", order="desc"}
+  // sort={_page:3, _per_page=6}
   let queryString = "";
   for (let key in filter) {
     const categoryValues = filter[key]; // "[furniture]" << array
@@ -39,6 +40,10 @@ export function fetchProductsByFilters(filter, sort) {
   for (let key in sort) {
     queryString += `${key}=${sort[key]}&`; //_sort:"price"
   }
+  console.log(pagination);
+  for (let key in pagination) {
+    queryString += `${pagination}=${pagination[key]}&`; //_page:3
+  }
   return new Promise(async (resolve) => {
     // TODO: we will not hard coded server url here...
     const response = await fetch(

src/features/product/productSlice.js

@@ -16,8 +16,9 @@ export const fetchAllProductsAsync = createAsyncThunk(
 );
 export const fetchProductsByFiltersAsync = createAsyncThunk(
   "product/fetchProductsByFilters",
-  async ({ filter, sort }) => {
-    const response = await fetchProductsByFilters(filter, sort);
+  async ({ filter, sort, pagination }) => {
+    const response = await fetchProductsByFilters(filter, sort, pagination);
+
     // The value we return becomes the `fulfilled` action payload
     return response.data;
   }