Add pagination to display only 10 search results at a time

pages/article/[article_slug].tsx

@@ -13,6 +13,7 @@ import ShareButton from "../../components/ShareButton";
 import Link from "next/link";
 import generate_contributors_jsx from "../../components/GenerateContributorsJSX";
 import { generateMetaTags } from "../../utils/generateMetaTags";
+import Advertisement from "../../components/Advertisement";
 
 interface Props {
 	article: ReceivedArticle;
@@ -157,7 +158,8 @@ function Article(props: Props) {
 						id={styles.content}
 						dangerouslySetInnerHTML={{ __html: text }}
 					></div>
-
+					<Advertisement
+					index={0}/>
 					{/* <RecommendedArticles /> */}
 				</article>
 				<div id={styles.advertisements}></div>

pages/search.tsx

@@ -20,29 +20,40 @@ enum sortingOptions {
 }
 
 function SearchRoute(props: Props) {
-  const [sortingOption, setSortingOption] = useState<sortingOptions>(sortingOptions.Relevance);
-  const [sortedArticles, setSortedArticles] = useState<ReceivedArticle[]>(props.articles);
+  const [sortingOption, setSortingOption] = useState<sortingOptions>(
+    sortingOptions.Relevance
+  );
+  const [sortedArticles, setSortedArticles] = useState<ReceivedArticle[]>(
+    props.articles
+  );
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const articlesPerPage = 10;
 
   useEffect(() => {
     sortArticles();
-  }, [sortingOption]);
+  }, [sortingOption, props.articles]);
+
+  useEffect(() => {
+    paginateArticles();
+  }, [currentPage, sortedArticles]);
 
   const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setSortingOption(event.target.value as sortingOptions);
+    setCurrentPage(1); // Reset to the first page when sorting changes
   };
 
   const sortArticles = () => {
-    const articlesCopy = [...props.articles];
+    let articlesCopy = [...props.articles];
 
     if (sortingOption === sortingOptions.Newest) {
-      articlesCopy.sort((a, b) => {
+      articlesCopy = articlesCopy.sort((a, b) => {
         if (a.volume === b.volume) {
           return b.issue - a.issue;
         }
         return b.volume - a.volume;
       });
     } else if (sortingOption === sortingOptions.Oldest) {
-      articlesCopy.sort((a, b) => {
+      articlesCopy = articlesCopy.sort((a, b) => {
         if (a.volume === b.volume) {
           return a.issue - b.issue;
         }
@@ -53,18 +64,28 @@ function SearchRoute(props: Props) {
     setSortedArticles(articlesCopy);
   };
 
+  const paginateArticles = () => {
+    const startIndex = (currentPage - 1) * articlesPerPage;
+    const endIndex = startIndex + articlesPerPage;
+    const currentArticles = props.articles.slice(startIndex, endIndex);
+    setSortedArticles(currentArticles);
+  };
+
   return (
     <div>
       <main id={styles.main}>
         <h1 id={styles.heading}>
-          Showing {props.articles.length + props.staff.length} results for:{" "}
-          {"'"}
+          Showing {props.articles.length + props.staff.length} results for:{"'"}
           {props.query}
           {"'"}
         </h1>
         <div>
           <label htmlFor="sort-select">Sort by:</label>
-          <select id="sort-select" value={sortingOption} onChange={handleSortChange}>
+          <select
+            id="sort-select"
+            value={sortingOption}
+            onChange={handleSortChange}
+          >
             <option value={sortingOptions.Relevance}>Relevance</option>
             <option value={sortingOptions.Newest}>Newest</option>
             <option value={sortingOptions.Oldest}>Oldest</option>
@@ -77,12 +98,17 @@ function SearchRoute(props: Props) {
               {props.staff.map((staff_member, index) => (
                 <div key={index}>
                   <h1 id={styles.name}>
-                    <Link href={"/staff/" + encodeURIComponent(staff_member.slug)}>
+                    <Link
+                      href={"/staff/" + encodeURIComponent(staff_member.slug)}
+                    >
                       {staff_member.name}{" "}
                       <span id={styles.slug}>({staff_member.slug})</span>
                     </Link>
                   </h1>
-                  <a href={"mailto:" + staff_member.email} id={styles.email}>
+                  <a
+                    href={"mailto:" + staff_member.email}
+                    id={styles.email}
+                  >
                     {staff_member.email}
                   </a>
                 </div>
@@ -91,13 +117,29 @@ function SearchRoute(props: Props) {
           </>
         )}
         <h2 id={styles.articles_found_label}>
-          {sortedArticles.length} articles found:
+          {props.articles.length} articles found:
         </h2>
         <ListArticleDisplay articles={sortedArticles} />
+        {/* Pagination */}
+        <div>
+          <button
+            onClick={() => setCurrentPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </button>
+          <span>{currentPage}</span>
+          <button
+            onClick={() => setCurrentPage(currentPage + 1)}
+            disabled={currentPage * articlesPerPage >= props.articles.length}
+          >
+            Next
+          </button>
+        </div>
       </main>
     </div>
   );
-};
+}
 
 export default SearchRoute;
 

styles/Navbar.module.css

@@ -34,6 +34,12 @@
 #subscribe_parent {
 	margin-left: auto;
 }
+
+@keyframes fade-in {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
 #logo_container {
 	font-size: var(--large-text);
 	color: var(--primary-immutable);
@@ -43,7 +49,7 @@
 	position: absolute;
 	top: 32px; /* position the top  edge of the element at the middle of the parent */
 	left: 50%; /* position the left edge of the element at the middle of the parent */
-
+	animation: fade-in 2s ease;
 	transform: translate(-50%, -50%);
 	cursor: pointer;
 	font-family: "Old English Text MT";
@@ -55,10 +61,25 @@
 	place-self: center;
 }
 
+@keyframes rotate {
+	0% {
+	  transform: rotate(0);
+	}
+	100% {
+	  transform: rotate(360deg);
+	}
+  }
+
 #hamburgerMenu {
 	/* display: none; */
 	background: none;
 	cursor: pointer;
+	animation: rotate 2s linear 1s infinite;
+	animation-play-state: paused;
+}
+
+#hamburgerMenu:hover {
+	animation-play-state: running;
 }
 
 #hamburgerMenu:hover,