Adding paginator for multiple results

frontend/src/App.js

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import Navbar from "./components/Navbar";
-import Result from "./components/Result";
 import ResultsCart from "./components/ResultsCart";
 import SearchBar from "./components/SearchBar";
+import ResultsPaginator from "./components/ResultsPaginator";
 
 function App() {
   const [results, setResults] = useState([]);
@@ -13,6 +13,12 @@ function App() {
     { title: "Result 2", summary: "This is the second result" },
     { title: "Result 3", summary: "This is the third result" },
     { title: "Result 4", summary: "This is the last result" },
+    { title: "Result 5", summary: "This is the last result" },
+    { title: "Result 6", summary: "This is the last result" },
+    { title: "Result 7", summary: "This is the last result" },
+    { title: "Result 8", summary: "This is the last result" },
+    { title: "Result 9", summary: "This is the last result" },
+    { title: "Result 10", summary: "This is the last result" },
   ];
 
   useEffect(() => {
@@ -30,25 +36,22 @@ function App() {
         <main id="home">
           <section className="grid1">
             <SearchBar />
-            <div className="resultsDisplay">
-              {results.map((result, index) => (
-                <Result
-                  key={index}
-                  title={result.title}
-                  summary={result.summary}
-                  handleAddToCart={handleAddToCart}
-                />
-              ))}
-            </div>
+            <ResultsPaginator
+              results={results}
+              handleAddToCart={handleAddToCart}
+            />
           </section>
           <aside className="grid2">
             <ResultsCart cart={cart} />
           </aside>
         </main>
         <footer id="contact">
           <p>
-            Github: <a href="https://github.com/s33chin/GovSync">GovSync</a> by
-            Microsoft
+            Github:{" "}
+            <a href="https://github.com/s33chin/GovSync" target="_blank">
+              GovSync
+            </a>{" "}
+            by Microsoft
           </p>
         </footer>
       </div>

frontend/src/components/Paginator.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const Paginator = ({ resultsPerPage, totalResults, paginate, currentPage }) => {
+  const pageNumbers = [];
+
+  for (let i = 1; i <= Math.ceil(totalResults / resultsPerPage); i++) {
+    pageNumbers.push(i);
+  }
+
+  return (
+    <nav>
+      <ul className="pagination">
+        {pageNumbers.map((num) => (
+          <li
+            key={num}
+            className={`page-item ${currentPage === num ? "active" : ""}`}
+          >
+            <a onClick={() => paginate(num)} href="!#" className="page-link">
+              {num}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default Paginator;

frontend/src/components/ResultsPaginator.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import Paginator from "./Paginator";
+import Result from "./Result";
+
+const ResultsPaginator = ({ results, handleAddToCart }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const resultsPerPage = 6;
+
+  const indexOfLastResult = currentPage * resultsPerPage;
+  const indexOfFirstResult = indexOfLastResult - resultsPerPage;
+  const currentResults = results.slice(indexOfFirstResult, indexOfLastResult);
+
+  const paginate = (pageNumber) => setCurrentPage(pageNumber);
+  return (
+    <>
+      <div className="resultsDisplay">
+        {currentResults.map((result, index) => (
+          <Result
+            key={index}
+            title={result.title}
+            summary={result.summary}
+            handleAddToCart={handleAddToCart}
+          />
+        ))}
+      </div>
+      <Paginator
+        resultsPerPage={resultsPerPage}
+        totalResults={results.length}
+        paginate={paginate}
+        currentPage={currentPage}
+      />
+    </>
+  );
+};
+
+export default ResultsPaginator;