From 349d195c2bd1b9af4f8933d66248fe9ec35df54b Mon Sep 17 00:00:00 2001
From: Mrinmayee Rane <mrinmayeerane2810@gmail.com>
Date: Fri, 4 Apr 2025 15:53:39 -0400
Subject: [PATCH] Update App.js

I tried to add the code we had on the last part of the video, what we saw in video did not work and threw error, because the totalPages was evaluating to a float, I just used ceil there.
---
 .../pagination/src/App.js                     | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/reactjs-interview-questions/pagination/src/App.js b/reactjs-interview-questions/pagination/src/App.js
index ce8c570..9e6441c 100644
--- a/reactjs-interview-questions/pagination/src/App.js
+++ b/reactjs-interview-questions/pagination/src/App.js
@@ -4,24 +4,26 @@ import './App.css';
 function App() {
   const [products, setProducts] = useState([])
   const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(0);
 
+  useEffect(() => { 
   const fetchProducts = async () => {
-    const res = await fetch(`https://dummyjson.com/products?limit=100`)
+    const res = await fetch(`https://dummyjson.com/products?limit=10&skip=${(page - 1) * 10}`)
     const data = await res.json()
 
     console.log(data);
 
     if (data && data.products) {
-      setProducts(data.products)
+      setProducts(data.products);
+      setTotalPages(Math.ceil(data.total / 10)); // this has to be integer so that we are able to generate a valid array
     }
   }
-
-  useEffect(() => {
+    
     fetchProducts()
-  }, [])
+  }, [page])
 
   const selectPageHandler = (selectedPage) => {
-    if (selectedPage >= 1 && selectedPage <= products.length / 10 && selectedPage !== page) {
+    if (selectedPage >= 1 && selectedPage <= totalPages && selectedPage !== page) {
       setPage(selectedPage)
     }
   }
@@ -29,7 +31,7 @@ function App() {
   return (
     <div>
       {products.length > 0 && <div className="products">
-        {products.slice(page * 10 - 10, page * 10).map((prod) => {
+        {products.map((prod) => {
           return <span className="products__single" key={prod.id}>
             <img src={prod.thumbnail} alt={prod.title} /> {/* alt is imp */}
             <span>
@@ -42,11 +44,11 @@ function App() {
       {products.length > 0 && <div className="pagination">
         <span onClick={() => selectPageHandler(page - 1)} className={page > 1 ? "" : "pagination__disable"}>◀</span>
 
-        {[...Array(products.length / 10)].map((_, i) => {
+        {[...Array(totalPages)].map((_, i) => {
           return <span key={i} className={page === i + 1 ? "pagination__selected" : ""} onClick={() => selectPageHandler(i + 1)}>{i + 1}</span>
         })}
 
-        <span onClick={() => selectPageHandler(page + 1)} className={page < products.length / 10 ? "" : "pagination__disable"}>▶</span>
+        <span onClick={() => selectPageHandler(page + 1)} className={page < totalPages ? "" : "pagination__disable"}>▶</span>
       </div>}
     </div>
   );