From 6a18369abf298cf41463336a64bb899b21ac3563 Mon Sep 17 00:00:00 2001
From: Alex Zhang <alexzhang1618@gmail.com>
Date: Sun, 31 Mar 2024 15:46:39 -0700
Subject: [PATCH 1/2] Prettier pagination

---
 public/assets/icons/arrow-left.svg            |  2 +-
 public/assets/icons/arrow-right.svg           |  2 +-
 .../common/PaginationControls/index.tsx       | 66 ++++++++-----------
 .../PaginationControls/style.module.scss      | 47 +++++++++----
 .../PaginationControls/style.module.scss.d.ts |  4 +-
 src/pages/events.tsx                          |  2 +-
 6 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/public/assets/icons/arrow-left.svg b/public/assets/icons/arrow-left.svg
index 52dc05c6..f8ff17a2 100644
--- a/public/assets/icons/arrow-left.svg
+++ b/public/assets/icons/arrow-left.svg
@@ -1,3 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.4785 14.4789L12.4789 14.4785L15.7164 11.241C16.1948 10.7626 17.0003 11.1037 17.0003 11.7624V18.2374C17.0003 18.9068 16.1873 19.2423 15.7164 18.7714L12.4789 15.5339L12.4785 15.5335C12.4092 15.4643 12.3542 15.3821 12.3166 15.2916C12.2791 15.2012 12.2598 15.1042 12.2598 15.0062C12.2598 14.9082 12.2791 14.8112 12.3166 14.7207L11.8548 14.5292L12.3166 14.7207C12.3542 14.6303 12.4092 14.5481 12.4785 14.4789Z"/>
+<path d="M15.363 19.1119L12.1255 15.8744C12.0096 15.7588 11.9177 15.6214 11.8549 15.4702C11.7922 15.319 11.7599 15.1569 11.7599 14.9932C11.7599 14.8295 11.7922 14.6674 11.8549 14.5161C11.9177 14.3649 12.0096 14.2276 12.1255 14.1119L15.363 10.8744C16.1505 10.0994 17.5005 10.6494 17.5005 11.7619V18.2244C17.5005 19.3494 16.1505 19.8994 15.363 19.1119Z"/>
 </svg>
diff --git a/public/assets/icons/arrow-right.svg b/public/assets/icons/arrow-right.svg
index b25599ae..820e9c21 100644
--- a/public/assets/icons/arrow-right.svg
+++ b/public/assets/icons/arrow-right.svg
@@ -1,3 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6375 19.1126L17.875 15.8751C17.9909 15.7595 18.0828 15.6221 18.1455 15.4709C18.2083 15.3197 18.2406 15.1576 18.2406 14.9939C18.2406 14.8302 18.2083 14.6681 18.1455 14.5169C18.0828 14.3657 17.9909 14.2283 17.875 14.1126L14.6375 10.8751C13.85 10.1001 12.5 10.6501 12.5 11.7626V18.2251C12.5 19.3501 13.85 19.9001 14.6375 19.1126Z"/>
+<path d="M14.637 10.8881L17.8745 14.1256C17.9904 14.2412 18.0823 14.3786 18.1451 14.5298C18.2078 14.681 18.2401 14.8431 18.2401 15.0068C18.2401 15.1705 18.2078 15.3326 18.1451 15.4839C18.0823 15.6351 17.9904 15.7724 17.8745 15.8881L14.637 19.1256C13.8495 19.9006 12.4995 19.3506 12.4995 18.2381L12.4995 11.7756C12.4995 10.6506 13.8495 10.1006 14.637 10.8881Z"/>
 </svg>
diff --git a/src/components/common/PaginationControls/index.tsx b/src/components/common/PaginationControls/index.tsx
index 3e0ca0bf..da2fe727 100644
--- a/src/components/common/PaginationControls/index.tsx
+++ b/src/components/common/PaginationControls/index.tsx
@@ -1,6 +1,6 @@
-import LeftArrowIcon from '@/public/assets/icons/page-left-icon.svg';
-import RightArrowIcon from '@/public/assets/icons/page-right-icon.svg';
-import { useEffect, useState } from 'react';
+import Typography from '@/components/common/Typography';
+import LeftArrowIcon from '@/public/assets/icons/arrow-left.svg';
+import RightArrowIcon from '@/public/assets/icons/arrow-right.svg';
 import style from './style.module.scss';
 
 interface PaginationControlsProps {
@@ -9,12 +9,18 @@ interface PaginationControlsProps {
   pages: number;
 }
 
-const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) => {
-  const [value, setValue] = useState(String(page + 1));
+function calculatePagesToDisplay(page: number, totalPages: number, maxWidth: number): number[] {
+  const radius = (maxWidth - 1) / 2;
+  if (page + radius >= totalPages) {
+    return Array.from({ length: maxWidth }, (_, key) => totalPages - maxWidth + 1 + key);
+  }
+  const displayPage = page + 1;
+  const start = Math.max(1, displayPage - radius);
+  return Array.from({ length: Math.min(maxWidth, totalPages) }, (_, key) => start + key);
+}
 
-  useEffect(() => {
-    setValue(String(page + 1));
-  }, [page]);
+const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) => {
+  const pagesToDisplay = calculatePagesToDisplay(page, pages, 5);
 
   return (
     <div className={style.paginationBtns}>
@@ -27,35 +33,21 @@ const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) =>
         <LeftArrowIcon />
       </button>
       <div className={style.paginationText}>
-        <input
-          className={style.pageNumber}
-          type="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
-          value={value}
-          onChange={e => {
-            setValue(e.currentTarget.value);
-            const page = +e.currentTarget.value - 1;
-            if (Number.isInteger(page) && page >= 0 && page < pages) {
-              onPage(page);
-            }
-          }}
-          onBlur={e => {
-            // Clamp page number between 1 and pages
-            const inputPage = Math.min(
-              Math.max(Math.trunc(+e.currentTarget.value - 1), 0),
-              pages - 1
-            );
-            if (Number.isNaN(inputPage)) {
-              setValue(String(page + 1));
-            } else {
-              onPage(inputPage);
-              setValue(String(inputPage + 1));
-            }
-          }}
-        />
-        <span>of</span>
-        <span className={style.pageNumber}>{pages}</span>
+        {pagesToDisplay.map(displayPage => (
+          <button
+            type="button"
+            onClick={() => onPage(displayPage - 1)}
+            key={displayPage}
+            className={style.pageButton}
+          >
+            <Typography
+              variant="h5/regular"
+              className={displayPage === page + 1 ? style.active : style.pageText}
+            >
+              {displayPage}
+            </Typography>
+          </button>
+        ))}
       </div>
       <button
         type="button"
diff --git a/src/components/common/PaginationControls/style.module.scss b/src/components/common/PaginationControls/style.module.scss
index 2932e049..5f1f4cae 100644
--- a/src/components/common/PaginationControls/style.module.scss
+++ b/src/components/common/PaginationControls/style.module.scss
@@ -1,11 +1,14 @@
+@use 'src/styles/vars.scss' as vars;
+
 .paginationBtns {
   align-items: center;
   display: flex;
-  gap: 20px;
+  gap: 1.5rem;
   justify-content: center;
 
   .paginationBtn {
-    background: none;
+    background-color: var(--theme-surface-1);
+    border-radius: 50%;
     font-size: 0;
     padding: 0;
 
@@ -15,22 +18,38 @@
     }
   }
 
+  @media screen and (width <= vars.$breakpoint-md) {
+    gap: 1rem;
+  }
+
   .paginationText {
     align-items: center;
+    background-color: var(--theme-surface-1);
+    border-radius: 1.5rem;
     display: flex;
     font-weight: bold;
-    gap: 1em;
-
-    .pageNumber {
-      width: 24px;
-
-      &:is(input) {
-        border: 1px solid var(--theme-text-on-background-1);
-        border-radius: 2px;
-        color: inherit;
-        font: inherit;
-        height: 24px;
-        text-align: center;
+    gap: 1.5rem;
+    padding: 0.25rem 1.5rem;
+
+    .pageButton {
+      background: none;
+      display: flex;
+      justify-content: center;
+      width: 1rem;
+
+      .active {
+        color: var(--theme-primary-2);
+        font-weight: 700 !important;
+      }
+
+      @media screen and (width <= vars.$breakpoint-md) {
+        width: 0.75rem;
+
+        .active,
+        .pageText {
+          font-size: 1rem !important;
+          line-height: 1.5rem !important;
+        }
       }
     }
   }
diff --git a/src/components/common/PaginationControls/style.module.scss.d.ts b/src/components/common/PaginationControls/style.module.scss.d.ts
index 8c959b05..31c0997e 100644
--- a/src/components/common/PaginationControls/style.module.scss.d.ts
+++ b/src/components/common/PaginationControls/style.module.scss.d.ts
@@ -1,5 +1,7 @@
 export type Styles = {
-  pageNumber: string;
+  active: string;
+  pageButton: string;
+  pageText: string;
   paginationBtn: string;
   paginationBtns: string;
   paginationText: string;
diff --git a/src/pages/events.tsx b/src/pages/events.tsx
index 1e6a002b..34d71def 100644
--- a/src/pages/events.tsx
+++ b/src/pages/events.tsx
@@ -74,7 +74,7 @@ const DEFAULT_FILTER_STATE = {
   search: '',
 };
 
-const ROWS_PER_PAGE = 25;
+const ROWS_PER_PAGE = 4;
 
 const EventsPage = ({ events, attendances, initialFilters }: EventsPageProps) => {
   const [page, setPage] = useState(0);

From 743bb2db1c79b4004c9092f58d56349b1ffe9369 Mon Sep 17 00:00:00 2001
From: Alex Zhang <alexzhang1618@gmail.com>
Date: Sat, 13 Apr 2024 12:36:32 -0700
Subject: [PATCH 2/2] New pagination

---
 .../common/PaginationControls/index.tsx       | 62 +++++++++++--------
 .../PaginationControls/style.module.scss      | 54 +++++++---------
 .../PaginationControls/style.module.scss.d.ts |  4 +-
 src/pages/events.tsx                          |  2 +-
 4 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/src/components/common/PaginationControls/index.tsx b/src/components/common/PaginationControls/index.tsx
index da2fe727..ea1ffd05 100644
--- a/src/components/common/PaginationControls/index.tsx
+++ b/src/components/common/PaginationControls/index.tsx
@@ -1,6 +1,6 @@
-import Typography from '@/components/common/Typography';
 import LeftArrowIcon from '@/public/assets/icons/arrow-left.svg';
 import RightArrowIcon from '@/public/assets/icons/arrow-right.svg';
+import { useEffect, useState } from 'react';
 import style from './style.module.scss';
 
 interface PaginationControlsProps {
@@ -9,18 +9,12 @@ interface PaginationControlsProps {
   pages: number;
 }
 
-function calculatePagesToDisplay(page: number, totalPages: number, maxWidth: number): number[] {
-  const radius = (maxWidth - 1) / 2;
-  if (page + radius >= totalPages) {
-    return Array.from({ length: maxWidth }, (_, key) => totalPages - maxWidth + 1 + key);
-  }
-  const displayPage = page + 1;
-  const start = Math.max(1, displayPage - radius);
-  return Array.from({ length: Math.min(maxWidth, totalPages) }, (_, key) => start + key);
-}
-
 const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) => {
-  const pagesToDisplay = calculatePagesToDisplay(page, pages, 5);
+  const [value, setValue] = useState(String(page + 1));
+
+  useEffect(() => {
+    setValue(String(page + 1));
+  }, [page]);
 
   return (
     <div className={style.paginationBtns}>
@@ -33,21 +27,35 @@ const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) =>
         <LeftArrowIcon />
       </button>
       <div className={style.paginationText}>
-        {pagesToDisplay.map(displayPage => (
-          <button
-            type="button"
-            onClick={() => onPage(displayPage - 1)}
-            key={displayPage}
-            className={style.pageButton}
-          >
-            <Typography
-              variant="h5/regular"
-              className={displayPage === page + 1 ? style.active : style.pageText}
-            >
-              {displayPage}
-            </Typography>
-          </button>
-        ))}
+        <input
+          className={style.pageNumber}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          value={value}
+          onChange={e => {
+            setValue(e.currentTarget.value);
+            const page = +e.currentTarget.value - 1;
+            if (Number.isInteger(page) && page >= 0 && page < pages) {
+              onPage(page);
+            }
+          }}
+          onBlur={e => {
+            // Clamp page number between 1 and pages
+            const inputPage = Math.min(
+              Math.max(Math.trunc(+e.currentTarget.value - 1), 0),
+              pages - 1
+            );
+            if (Number.isNaN(inputPage)) {
+              setValue(String(page + 1));
+            } else {
+              onPage(inputPage);
+              setValue(String(inputPage + 1));
+            }
+          }}
+        />
+        <span>/</span>
+        <span className={style.pageNumber}>{pages}</span>
       </div>
       <button
         type="button"
diff --git a/src/components/common/PaginationControls/style.module.scss b/src/components/common/PaginationControls/style.module.scss
index 5f1f4cae..bc99245f 100644
--- a/src/components/common/PaginationControls/style.module.scss
+++ b/src/components/common/PaginationControls/style.module.scss
@@ -1,55 +1,45 @@
-@use 'src/styles/vars.scss' as vars;
-
 .paginationBtns {
   align-items: center;
   display: flex;
-  gap: 1.5rem;
+  gap: 20px;
   justify-content: center;
 
   .paginationBtn {
-    background-color: var(--theme-surface-1);
+    background: var(--theme-elevated-background);
+    border: 1px solid var(--theme-elevated-stroke);
     border-radius: 50%;
+    color: var(--theme-primary-2);
     font-size: 0;
     padding: 0;
 
     &:disabled {
+      color: var(--theme-elevated-stroke);
       cursor: auto;
       opacity: 0.5;
     }
   }
 
-  @media screen and (width <= vars.$breakpoint-md) {
-    gap: 1rem;
-  }
-
   .paginationText {
     align-items: center;
-    background-color: var(--theme-surface-1);
-    border-radius: 1.5rem;
+    background-color: var(--theme-elevated-background);
+    border: 1px solid var(--theme-elevated-stroke);
+    border-radius: 1rem;
     display: flex;
     font-weight: bold;
-    gap: 1.5rem;
-    padding: 0.25rem 1.5rem;
-
-    .pageButton {
-      background: none;
-      display: flex;
-      justify-content: center;
-      width: 1rem;
-
-      .active {
-        color: var(--theme-primary-2);
-        font-weight: 700 !important;
-      }
-
-      @media screen and (width <= vars.$breakpoint-md) {
-        width: 0.75rem;
-
-        .active,
-        .pageText {
-          font-size: 1rem !important;
-          line-height: 1.5rem !important;
-        }
+    gap: 0.5rem;
+    padding: 0.375rem 1rem;
+
+    .pageNumber {
+      text-align: center;
+      width: 24px;
+
+      &:is(input) {
+        background-color: inherit;
+        border-bottom: 1.5px solid var(--theme-text-on-background-1);
+        color: var(--theme-text-on-background-1);
+        font: inherit;
+        margin-bottom: -1.5px;
+        text-align: center;
       }
     }
   }
diff --git a/src/components/common/PaginationControls/style.module.scss.d.ts b/src/components/common/PaginationControls/style.module.scss.d.ts
index 31c0997e..8c959b05 100644
--- a/src/components/common/PaginationControls/style.module.scss.d.ts
+++ b/src/components/common/PaginationControls/style.module.scss.d.ts
@@ -1,7 +1,5 @@
 export type Styles = {
-  active: string;
-  pageButton: string;
-  pageText: string;
+  pageNumber: string;
   paginationBtn: string;
   paginationBtns: string;
   paginationText: string;
diff --git a/src/pages/events.tsx b/src/pages/events.tsx
index 34d71def..1e6a002b 100644
--- a/src/pages/events.tsx
+++ b/src/pages/events.tsx
@@ -74,7 +74,7 @@ const DEFAULT_FILTER_STATE = {
   search: '',
 };
 
-const ROWS_PER_PAGE = 4;
+const ROWS_PER_PAGE = 25;
 
 const EventsPage = ({ events, attendances, initialFilters }: EventsPageProps) => {
   const [page, setPage] = useState(0);