fix(Paginator): nicely handle displaying >= 5 pages

EOSC-synergy · Sep 14, 2023 · aeff35e · aeff35e
1 parent f100a59
commit aeff35e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 12 deletions.
diff --git a/components/Paginator.tsx b/components/Paginator.tsx
@@ -1,5 +1,6 @@
 import { type FC } from 'react';
 import { Pagination } from 'react-bootstrap';
+import { range } from 'lodash';
 
 /**
  * Representation of an OpenAPI pagination object
@@ -43,7 +44,7 @@ export type Paginatable = {
     /**
      * The current page
      */
-    page?: number;
+    readonly page: number;
 };
 
 /**
@@ -63,7 +64,7 @@ type PaginatorProps = {
  * @param props.pagination paginatable object to navigate through
  * @param props.navigateTo callback to navigate to another page in the pagination
  */
-const Paginator: FC<PaginatorProps> = ({ pagination, navigateTo }) => (
+export const Paginator: FC<PaginatorProps> = ({ pagination, navigateTo }) => (
     <Pagination className="align-items-center mb-0" data-testid="paginator">
         <Pagination.First
             disabled={pagination.pages === 0 || pagination.page === 1}
@@ -75,16 +76,64 @@ const Paginator: FC<PaginatorProps> = ({ pagination, navigateTo }) => (
             onClick={() => navigateTo(pagination.prev_num)}
             data-testid="paginator-prev"
         />
-        {/* TODO: don't show all pages, only nearby 3-5? */}
-        {[...Array(pagination.pages).keys()].map((n: number) => (
-            <Pagination.Item
-                active={pagination.page === n + 1}
-                onClick={() => navigateTo(n + 1)}
-                key={n + 1}
-            >
-                {n + 1}
-            </Pagination.Item>
-        ))}
+        {pagination.pages > 1 && pagination.pages <= 5 ? (
+            range(1, pagination.pages + 1).map((page) => (
+                <Pagination.Item
+                    active={page === pagination.page}
+                    onClick={() => navigateTo(page)}
+                    key={page}
+                >
+                    {page}
+                </Pagination.Item>
+            ))
+        ) : (
+            <>
+                <Pagination.Item
+                    active={pagination.page === 1}
+                    onClick={() => navigateTo(1)}
+                    key={1}
+                >
+                    1
+                </Pagination.Item>
+                {pagination.page > 3 && <Pagination.Ellipsis disabled />}
+                {pagination.page >= 3 && pagination.pages > 3 && (
+                    <Pagination.Item
+                        onClick={() => navigateTo(pagination.page - 1)}
+                        key={pagination.page - 1}
+                    >
+                        {pagination.page - 1}
+                    </Pagination.Item>
+                )}
+                {pagination.page !== 1 && pagination.page !== pagination.pages && (
+                    <Pagination.Item
+                        active
+                        onClick={() => navigateTo(pagination.page)}
+                        key={pagination.page}
+                    >
+                        {pagination.page}
+                    </Pagination.Item>
+                )}
+                {pagination.page <= pagination.pages - 2 && pagination.pages > 3 && (
+                    <Pagination.Item
+                        onClick={() => navigateTo(pagination.page + 1)}
+                        key={pagination.page + 1}
+                    >
+                        {pagination.page + 1}
+                    </Pagination.Item>
+                )}
+                {pagination.page < pagination.pages - 2 && <Pagination.Ellipsis disabled />}
+                {pagination.pages > 1 && (
+                    <Pagination.Item
+                        active={pagination.page === pagination.pages}
+                        onClick={() => navigateTo(pagination.pages)}
+                        key={pagination.pages}
+                    >
+                        {pagination.pages}
+                    </Pagination.Item>
+                )}
+            </>
+        )}
+
         <Pagination.Next
             disabled={!pagination.has_next}
             onClick={() => navigateTo(pagination.next_num)}

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
         "echarts": "^5.4.0",
         "echarts-for-react": "^3.0.2",
         "echarts-stat": "^1.2.0",
+        "lodash": "^4.17.21",
         "next": "^12.1.4",
         "next-transpile-modules": "^9.0.0",
         "oidc-client-ts": "^2.1.0",
@@ -52,6 +53,7 @@
         "@stoplight/prism-cli": "^4.8.0",
         "@testing-library/jest-dom": "^5.16.3",
         "@testing-library/react": "^13.4.0",
+        "@types/lodash": "^4.14.198",
         "@types/node": "^18.11.9",
         "@types/prismjs": "^1.16.6",
         "@types/qs": "^6.9.7",

diff --git a/yarn.lock b/yarn.lock
@@ -2661,6 +2661,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.14.198":
+  version: 4.14.198
+  resolution: "@types/lodash@npm:4.14.198"
+  checksum: b290e4480707151bcec738bca40527915defe52a0d8e26c83685c674163a265e1a88cb2ee56b0fb587a89819d0cd5df86ada836aec3e9c2e4bf516e7d348d524
+  languageName: node
+  linkType: hard
+
 "@types/minimist@npm:^1.2.0":
   version: 1.2.2
   resolution: "@types/minimist@npm:1.2.2"
@@ -6657,6 +6664,7 @@ __metadata:
     "@stoplight/prism-cli": ^4.8.0
     "@testing-library/jest-dom": ^5.16.3
     "@testing-library/react": ^13.4.0
+    "@types/lodash": ^4.14.198
     "@types/node": ^18.11.9
     "@types/prismjs": ^1.16.6
     "@types/qs": ^6.9.7
@@ -6684,6 +6692,7 @@ __metadata:
     eslint-plugin-github: ^4.8.0
     eslint-plugin-prettier: ^4.0.0
     jest: ^27.4.5
+    lodash: ^4.17.21
     msw: ^0.39.2
     next: ^12.1.4
     next-transpile-modules: ^9.0.0