refactor: handling zero and one based numbering in Pagination (freeCodeCamp-2025-Summer-Hackathon#255)

gikf · web-flow · commit 00d6e7464509 · 2025-08-12T21:11:51.000+02:00
diff --git a/frontend/src/components/IdeasList.jsx b/frontend/src/components/IdeasList.jsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IdeaListItem } from './IdeaListItem';
 import { useApi } from '../hooks/useApi';
-import { Pagination } from './Pagination';
+import { Page, Pagination } from './Pagination';
 import Spinny from './Spinny';
 import { Link } from 'react-router';
 
@@ -11,7 +11,7 @@ const IdeasList = ({
   noIdeasText = "There's no ideas!",
   count,
   sort = null,
-  page = 0,
+  page = Page.fromZeroBased(0),
   paginate = false,
   showExploreButton = false,
 }) => {
@@ -23,19 +23,23 @@ const IdeasList = ({
   });
 
   const getApiUrl = useCallback(
-    (page = 0) => {
+    (page = Page.fromZeroBased(0)) => {
       const sorting = sort ? `&sort=${sort}` : '';
-      const skip = page > 0 ? `&skip=${page * count}` : '';
+      const skip = page.number > 0 ? `&skip=${page.number * count}` : '';
       return `${base}?limit=${count}${sorting}${skip}`;
     },
     [count, sort, base]
   );
 
-  const getPageUrl = useCallback(page => `${base}page/${page + 1}`, [base]);
+  const getPageUrl = useCallback(
+    page => `${base}page/${page.displayNumber}`,
+    [base]
+  );
 
+  const fetchUrl = getApiUrl(page);
   useEffect(() => {
-    fetchFromApi(getApiUrl(page));
-  }, [fetchFromApi, getApiUrl, page]);
+    fetchFromApi(fetchUrl);
+  }, [fetchFromApi, fetchUrl]);
 
   useEffect(() => {
     if (data?.data?.length > 0) {
diff --git a/frontend/src/components/Pagination.jsx b/frontend/src/components/Pagination.jsx
@@ -1,62 +1,92 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 
+export class Page {
+  number = 0;
+  displayNumber = 1;
+
+  constructor(page, displayPage) {
+    this.number = page;
+    this.displayNumber = displayPage;
+  }
+
+  static fromZeroBased(page) {
+    return new Page(page, page + 1);
+  }
+
+  static fromOneBased(displayPage) {
+    return new Page(displayPage - 1, displayPage);
+  }
+}
+
 export const Pagination = ({
   numberOfPages,
   initialPage,
   getPageUrl,
   fetchPage,
 }) => {
-  const [currentPage, setCurPage] = useState(initialPage);
-  const pages = [...Array(numberOfPages).keys()];
-  const { page: paramPage = 1 } = useParams();
+  const [activePage, setActivePage] = useState(initialPage);
+  const pages = [...Array(numberOfPages).keys()].map(Page.fromZeroBased);
+  const { page: paramPageOneBased = 1 } = useParams();
 
   useEffect(() => {
-    setCurPage(parseInt(paramPage) - 1);
-  }, [paramPage]);
+    setActivePage(Page.fromOneBased(parseInt(paramPageOneBased)));
+  }, [paramPageOneBased]);
+
+  const Href = ({ page = null, active = false, children }) => {
+    if (page === null || active) {
+      return (
+        <span className={`nav-link${active ? ' active' : ''}`}>{children}</span>
+      );
+    }
 
-  const Href = ({ pageNo, text }) => {
-    const pageUrl = getPageUrl(pageNo);
+    const pageUrl = getPageUrl(page);
     const onClick = async e => {
       e.preventDefault();
-      await fetchPage(pageNo);
-      setCurPage(pageNo);
+      await fetchPage(page);
+      setActivePage(page);
       window.history.pushState(null, '', pageUrl);
     };
     return (
       <a href={pageUrl} className='nav-link' onClick={onClick}>
-        {text}
+        {children}
       </a>
     );
   };
 
-  const NavigateToPrevPage = ({ currentPage }) =>
-    currentPage <= 0 ? (
-      <span className='nav-link'>{'<'}</span>
-    ) : (
-      <Href pageNo={currentPage - 1} text={'<'} />
-    );
+  const NavigateToPrevPage = ({ currentPage }) => (
+    <Href
+      {...(currentPage.number > 0 && {
+        page: Page.fromZeroBased(currentPage.number - 1),
+      })}
+    >
+      {'<'}
+    </Href>
+  );
 
-  const NavigateToNextPage = ({ currentPage }) =>
-    currentPage >= numberOfPages - 1 ? (
-      <span className='nav-link'>{'>'}</span>
-    ) : (
-      <Href pageNo={currentPage + 1} text={'>'} />
-    );
+  const NavigateToNextPage = ({ currentPage }) => (
+    <Href
+      {...(currentPage.number < numberOfPages && {
+        page: Page.fromZeroBased(currentPage.number + 1),
+      })}
+    >
+      {'>'}
+    </Href>
+  );
 
   return (
     <div className='nav-list'>
-      <NavigateToPrevPage currentPage={currentPage} />
-      {pages.map(pageNo =>
-        currentPage !== pageNo ? (
-          <Href key={pageNo} pageNo={pageNo} text={pageNo + 1} />
-        ) : (
-          <span className='nav-link active' key={pageNo}>
-            {pageNo + 1}
-          </span>
-        )
-      )}
-      <NavigateToNextPage currentPage={currentPage} />
+      <NavigateToPrevPage currentPage={activePage} />
+      {pages.map(page => (
+        <Href
+          key={page.number}
+          page={page}
+          {...(activePage.number === page.number && { active: true })}
+        >
+          {page.displayNumber}
+        </Href>
+      ))}
+      <NavigateToNextPage currentPage={activePage} />
     </div>
   );
 };
diff --git a/frontend/src/pages/Ideas/IdeasPage.jsx b/frontend/src/pages/Ideas/IdeasPage.jsx
@@ -1,10 +1,18 @@
 import { useParams } from 'react-router';
 import IdeasList from '../../components/IdeasList';
+import { Page } from '../../components/Pagination';
 
 export const IdeasPage = ({ headerText = 'All Ideas' }) => {
-  const { page = 1 } = useParams('page');
+  const { page: pageOneBased = 1 } = useParams('page');
   return (
-    <IdeasList {...{ count: 20, page: page - 1, paginate: true, headerText }} />
+    <IdeasList
+      {...{
+        count: 20,
+        page: Page.fromOneBased(parseInt(pageOneBased)),
+        paginate: true,
+        headerText,
+      }}
+    />
   );
 };
 
diff --git a/frontend/src/pages/MyIdeasPage.jsx b/frontend/src/pages/MyIdeasPage.jsx
@@ -1,5 +1,6 @@
 import { useParams } from 'react-router';
 import IdeasList from '../components/IdeasList';
+import { Page } from '../components/Pagination';
 
 export const MyIdeasPage = ({ headerText = 'My Ideas' }) => {
   const { page = 1 } = useParams('page');
@@ -8,7 +9,7 @@ export const MyIdeasPage = ({ headerText = 'My Ideas' }) => {
       {...{
         base: '/me/ideas/',
         count: 20,
-        page: page - 1,
+        page: Page.fromOneBased(parseInt(page)),
         paginate: true,
         headerText,
         noIdeasText: "You don't have any ideas added.",
diff --git a/frontend/src/pages/UsersPage.jsx b/frontend/src/pages/UsersPage.jsx
@@ -3,30 +3,34 @@ import { useParams, useNavigate } from 'react-router';
 import { useUser } from '../hooks/useUser';
 import { useApi } from '../hooks/useApi';
 import Spinny from '../components/Spinny';
-import { Pagination } from '../components/Pagination';
+import { Page, Pagination } from '../components/Pagination';
 import { Link } from 'react-router';
 
 const UsersPage = ({ count = 20 }) => {
   const { isLogged, isAdmin } = useUser();
   const navigate = useNavigate();
   const { page = 1 } = useParams();
-  const currentPage = parseInt(page, 10) - 1;
+  const currentPage = Page.fromOneBased(parseInt(page));
 
   const [users, setUsers] = useState([]);
   const [totalPages, setTotalPages] = useState(0);
 
   const { data, error, isLoading, fetchFromApi } = useApi();
 
   const getApiUrl = useCallback(
-    (pageNo = 0) => {
-      const skip = pageNo > 0 ? `&skip=${pageNo * count}` : '';
+    (page = Page.fromZeroBased(0)) => {
+      const skip = page.number > 0 ? `&skip=${page.number * count}` : '';
       return `/users/?limit=${count}${skip}`;
     },
     [count]
   );
 
-  const getPageUrl = useCallback(pageNo => `/users/page/${pageNo + 1}`, []);
+  const getPageUrl = useCallback(
+    page => `/users/page/${page.displayNumber}`,
+    []
+  );
 
+  const fetchUrl = getApiUrl(currentPage);
   useEffect(() => {
     if (!isLogged) {
       navigate('/login');
@@ -37,8 +41,8 @@ const UsersPage = ({ count = 20 }) => {
       return;
     }
 
-    fetchFromApi(getApiUrl(currentPage));
-  }, [isLogged, isAdmin, navigate, currentPage, fetchFromApi, getApiUrl]);
+    fetchFromApi(fetchUrl);
+  }, [isLogged, isAdmin, navigate, fetchFromApi, fetchUrl]);
 
   useEffect(() => {
     if (data && !error) {
