updated length to 8 per page and hardcoded for /evaluations

CarletonComputerScienceSociety · Jul 30, 2024 · c981e1e · c981e1e
1 parent 4d8404b
commit c981e1e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
@@ -1,19 +1,19 @@
 ---
 import { Fragment } from "astro/jsx-runtime";
 import "./Pagination.scss";
-const { paginator } = Astro.props;
+const { pagination } = Astro.props;
 
 const adjacentLinks = 2;
 const maxLinks = adjacentLinks * 2 + 1;
 const lowerLimit = adjacentLinks + 1;
-const upperLimit = paginator.totalPages - adjacentLinks;
+const upperLimit = pagination.totalPages - adjacentLinks;
 ---
 
 {
-  paginator.totalPages > 1 && (
+  pagination.totalPages > 1 && (
     <ul class="pagination">
       {/* First page */}
-      {paginator.pageNumber !== 1 && (
+      {pagination.pageNumber !== 1 && (
         <li class="pagination__item pagination__item--first">
           <a class="pagination__link pagination__link--first" href={1}>
             ««
@@ -22,10 +22,10 @@ const upperLimit = paginator.totalPages - adjacentLinks;
       )}
 
       {/* Previous page */}
-      {paginator.hasPrev && (
+      {pagination.hasPrev && (
         <li class="pagination__item pagination__item--previous">
           <a
-            href={paginator.prev.url}
+            href={pagination.prev.url}
             class="pagination__link pagination__link--previous"
           >
             «
@@ -34,26 +34,26 @@ const upperLimit = paginator.totalPages - adjacentLinks;
       )}
 
       {/* Page numbers */}
-      {paginator.pagers.map((page) => {
+      {pagination.pagers.map((page) => {
         return (
           <Fragment>
             {(() => {
               const isInRange =
-                paginator.totalPages > maxLinks
-                  ? paginator.pageNumber < lowerLimit + 1
+                pagination.totalPages > maxLinks
+                  ? pagination.pageNumber < lowerLimit + 1
                     ? page.pageNumber < maxLinks + 1
-                    : paginator.pageNumber >= upperLimit
-                      ? page.pageNumber > paginator.totalPages - maxLinks
+                    : pagination.pageNumber >= upperLimit
+                      ? page.pageNumber > pagination.totalPages - maxLinks
                       : page.pageNumber >=
-                          paginator.pageNumber - adjacentLinks &&
+                          pagination.pageNumber - adjacentLinks &&
                         page.pageNumber <
-                          paginator.pageNumber + adjacentLinks + 1
+                          pagination.pageNumber + adjacentLinks + 1
                   : true;
 
               return (
                 isInRange && (
                   <li
-                    class={`pagination__item${page.pageNumber === paginator.pageNumber ? " pagination__item--current" : ""}`}
+                    class={`pagination__item${page.pageNumber === pagination.pageNumber ? " pagination__item--current" : ""}`}
                   >
                     <a href={page.url} class="pagination__link">
                       {page.pageNumber}
@@ -67,10 +67,10 @@ const upperLimit = paginator.totalPages - adjacentLinks;
       })}
 
       {/* Next page */}
-      {paginator.hasNext && (
+      {pagination.hasNext && (
         <li class="pagination__item pagination__item--next">
           <a
-            href={paginator.next.url}
+            href={pagination.next.url}
             class="pagination__link pagination__link--next"
           >
             »
@@ -79,11 +79,11 @@ const upperLimit = paginator.totalPages - adjacentLinks;
       )}
 
       {/* Last page */}
-      {paginator.pageNumber !== paginator.totalPages && (
+      {pagination.pageNumber !== pagination.totalPages && (
         <li class="pagination__item pagination__item--last">
           <a
             class="pagination__link pagination__link--last"
-            href={paginator.last.url}
+            href={pagination.last.url}
           >
             »»
           </a>

diff --git a/src/pages/evaluations.astro b/src/pages/evaluations.astro
@@ -3,6 +3,7 @@ import Back from "@components/Back/Back.astro";
 import RowCard from "@components/RowCard/RowCard.astro";
 import { getCollection } from "astro:content";
 import { default as Layout } from "src/layouts/Content/Content.astro";
+import Pagination from "@components/Pagination/Pagination.astro";
 const evaluations = await getCollection("evaluations");
 
 const courseCodes = {
@@ -12,6 +13,10 @@ const courseCodes = {
 const comp2804Evaluations = evaluations
   .filter((evaluation) => evaluation.data.course === "comp2804")
   .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+
+const firstSetOfEvaluations = comp2804Evaluations.slice(0, 8);
+
+const numberOfPages = Math.ceil(comp2804Evaluations.length / 8);
 ---
 
 <Layout title="Evaluations">
@@ -33,7 +38,7 @@ const comp2804Evaluations = evaluations
   <br /> -->
   <div class="Evaluations__list" style="margin-bottom:0.75rem">
     {
-      comp2804Evaluations.map((evaluation) => (
+      firstSetOfEvaluations.map((evaluation) => (
         <div>
           <a href={`/evaluations/${evaluation.slug}`}>
             <RowCard
@@ -45,6 +50,22 @@ const comp2804Evaluations = evaluations
       ))
     }
   </div>
+  <Pagination
+    pagination={{
+      pageNumber: 1,
+      totalPages: numberOfPages,
+      hasPrev: false,
+      prev: { url: "" },
+      hasNext: numberOfPages > 1,
+      next: { url: "/evaluations/2" },
+      first: { url: "/evaluations/1" },
+      last: { url: `/evaluations/${numberOfPages}` },
+      pagers: Array.from({ length: numberOfPages }, (_, i) => ({
+        pageNumber: i + 1,
+        url: `/evaluations/${i + 1}`,
+      })),
+    }}
+  />
 </Layout>
 
 <style>

diff --git a/src/pages/evaluations/[page].astro b/src/pages/evaluations/[page].astro
@@ -27,7 +27,7 @@ export async function getStaticPaths({ paginate }) {
   }));
 
   // Generate pages from our array of evaluations, with 5 to a page
-  return paginate(evaluationPages, { pageSize: 3 });
+  return paginate(evaluationPages, { pageSize: 8 });
 }
 // All paginated data is passed on the "page" prop
 const { page } = Astro.props;
@@ -65,7 +65,7 @@ const { page } = Astro.props;
     }
   </div>
   <Pagination
-    paginator={{
+    pagination={{
       pageNumber: page.currentPage,
       totalPages: page.lastPage,
       hasPrev: !!page.url.prev,