Merge branch 'main' into change-search-bar

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;