feat: pagination (freeCodeCamp-2025-Summer-Hackathon#111)

Author: gikf

frontend/src/App.jsx

@@ -46,6 +46,7 @@ function App() {
             <Route path=':ideaId' element={<IdeaPage />} />
             <Route path=':ideaId/edit' element={<IdeaEditPage />} />
             <Route path='add' element={<IdeaAddPage />} />
+            <Route path='page/:page' element={<IdeasPage />} />
           </Route>
         </Routes>
         <Footer />

frontend/src/components/IdeaFormSection.jsx

@@ -1,32 +1,83 @@
-import { useEffect } from 'react';
-import { useApi } from '../hooks/useApi';
-import { Link } from 'react-router';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link, NavLink } from 'react-router';
+
 import UpvoteImg from '../assets/Upvote.svg';
 
-const IdeaFormSection = ({ count, sort = null }) => {
+import { useApi } from '../hooks/useApi';
+import { Pagination } from './Pagination';
+
+const IdeaFormSection = ({
+  count,
+  sort = null,
+  page = 0,
+  paginate = false,
+}) => {
+  const [showPages, setShowPages] = useState(false);
+  const [totalPages, setTotalPages] = useState(0);
+  const [entries, setEntries] = useState([]);
   const { isLoading, error, data, fetchFromApi } = useApi({
     loadingInitially: true,
   });
 
-  const sorting = sort ? `&sort=${sort}` : '';
+  const getApiUrl = useCallback(
+    (page = 0) => {
+      const sorting = sort ? `&sort=${sort}` : '';
+      const skip = page > 0 ? `&skip=${page * count}` : '';
+      return `/ideas/?limit=${count}${sorting}${skip}`;
+    },
+    [count, sort]
+  );
+
+  const getPageUrl = page => `/ideas/page/${page + 1}`;
 
   useEffect(() => {
-    fetchFromApi(`/ideas/?limit=${count}${sorting}`);
-  }, [count, fetchFromApi, sorting]);
+    fetchFromApi(getApiUrl(page));
+  }, [fetchFromApi, getApiUrl, page]);
+
+  useEffect(() => {
+    if (data?.data?.length > 0) {
+      setEntries(data?.data);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (data?.count > 0) {
+      const pages = Math.ceil(data.count / count);
+      setTotalPages(pages);
+      if (pages > 1) {
+        setShowPages(true);
+      }
+    }
+  }, [data, count]);
+
+  const pagination = useMemo(
+    () => (
+      <Pagination
+        {...{
+          numberOfPages: totalPages,
+          fetchFromApi,
+          getApiUrl,
+          getPageUrl,
+          initialPage: page,
+        }}
+      />
+    ),
+    [totalPages, fetchFromApi, getApiUrl, page]
+  );
 
   return (
     <section className='idea-form-section'>
       <div className='voting-section' tabIndex='0'>
         <h3>Vote on Current Ideas</h3>
         {error ? (
           `${error}`
-        ) : isLoading ? (
+        ) : isLoading && !entries ? (
           'Loading...'
         ) : (
           <ul className='idea-list'>
-            {data?.data?.length === 0
+            {entries === 0
               ? "There's no ideas, add yours!"
-              : data?.data.map(({ id, name, upvoted_by }) => {
+              : entries.map(({ id, name, upvoted_by }) => {
                   return (
                     <Link to={`/ideas/${id}`} key={id}>
                       <li className='idea-item'>
@@ -51,6 +102,7 @@ const IdeaFormSection = ({ count, sort = null }) => {
                 })}
           </ul>
         )}
+        {paginate && showPages && entries.length > 0 && <>{pagination}</>}
       </div>
     </section>
   );

frontend/src/components/Pagination.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+export const Pagination = ({
+  numberOfPages,
+  initialPage,
+  fetchFromApi,
+  getApiUrl,
+  getPageUrl,
+}) => {
+  const [currentPage, setCurPage] = useState(initialPage);
+  const pages = [...Array(numberOfPages).keys()];
+
+  const Href = ({ pageNo, text }) => {
+    const apiUrl = getApiUrl(pageNo);
+    const pageUrl = getPageUrl(pageNo);
+    const onClick = async e => {
+      e.preventDefault();
+      await fetchFromApi(apiUrl);
+      setCurPage(pageNo);
+      window.history.pushState(null, '', pageUrl);
+    };
+    return (
+      <a href={pageUrl} className='nav-link' onClick={onClick}>
+        {text}
+      </a>
+    );
+  };
+
+  const NavigateToPrevPage = ({ currentPage }) =>
+    currentPage <= 0 ? (
+      <span className='nav-link'>{'<'}</span>
+    ) : (
+      <Href pageNo={currentPage - 1} text={'<'} />
+    );
+
+  const NavigateToNextPage = ({ currentPage }) =>
+    currentPage >= numberOfPages - 1 ? (
+      <span className='nav-link'>{'>'}</span>
+    ) : (
+      <Href pageNo={currentPage + 1} text={'>'} />
+    );
+
+  return (
+    <div className='nav-list'>
+      <NavigateToPrevPage currentPage={currentPage} />
+      {pages.map(pageNo =>
+        currentPage !== pageNo ? (
+          <Href key={pageNo} pageNo={pageNo} text={pageNo + 1} />
+        ) : (
+          <a className='nav-link active' key={pageNo}>
+            {pageNo + 1}
+          </a>
+        )
+      )}
+      <NavigateToNextPage currentPage={currentPage} />
+    </div>
+  );
+};
+
+export default Pagination;

frontend/src/pages/Ideas/IdeasPage.jsx

@@ -1,7 +1,9 @@
+import { useParams } from 'react-router';
 import IdeaFormSection from '../../components/IdeaFormSection';
 
 export const IdeasPage = () => {
-  return <IdeaFormSection count={20} />;
+  const { page = 1 } = useParams('page');
+  return <IdeaFormSection {...{ count: 20, page: page - 1, paginate: true }} />;
 };
 
 export default IdeasPage;