increase page resultsand add clclickability

Author: Laurie T. Malau

components/dashboard/src/components/Pagination.tsx

@@ -4,39 +4,55 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { usePagination } from "../custom-hooks/usePagination";
 import Arrow from "./Arrow";
 
-function Pagination(props: { numberOfPages: number; currentPage: number; setCurrentPage: any }) {
-    const { numberOfPages, currentPage, setCurrentPage } = props;
-    const availablePageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);
+function Pagination(props: {
+    totalResults: number;
+    totalNumberOfPages: number;
+    currentPage: number;
+    setCurrentPage: any;
+    resultsPerPage: number;
+}) {
+    const { totalResults, totalNumberOfPages, currentPage, setCurrentPage, resultsPerPage } = props;
+    const calculatedPagination = usePagination({ totalResults, totalNumberOfPages, currentPage, resultsPerPage });
 
     const nextPage = () => {
-        if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
+        if (currentPage !== totalNumberOfPages) setCurrentPage(currentPage + 1);
     };
     const prevPage = () => {
         if (currentPage !== 1) setCurrentPage(currentPage - 1);
     };
+    const getClassnames = (pageNumber: string | number) => {
+        if (pageNumber === currentPage) {
+            return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 bg-gray-100 disabled pointer-events-none";
+        }
+        if (pageNumber === "...") {
+            return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 disabled pointer-events-none";
+        }
+        return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 cursor-pointer";
+    };
 
     return (
-        <nav className="mt-16">
+        <nav className="mt-16 mb-16">
             <ul className="flex justify-center space-x-4">
-                <li className="text-gray-400 cursor-pointer">
+                <li className={`text-gray-400 ${currentPage === 1 ? "disabled" : "cursor-pointer text-gray-500"}`}>
                     <span onClick={prevPage}>
                         <Arrow direction={"left"} />
                         Previous
                     </span>
                 </li>
-                {availablePageNumbers.map((pn) => (
-                    <li
-                        key={pn}
-                        className={`text-gray-500 cursor-pointer w-8 text-center rounded-md ${
-                            currentPage === pn ? "bg-gray-200" : ""
-                        } `}
-                    >
-                        <span onClick={() => setCurrentPage(pn)}>{pn}</span>
-                    </li>
-                ))}
-                <li className="text-gray-400 cursor-pointer">
+                {calculatedPagination &&
+                    calculatedPagination.map((pn) => (
+                        <li key={pn} className={getClassnames(pn)}>
+                            <span onClick={() => setCurrentPage(pn)}>{pn}</span>
+                        </li>
+                    ))}
+                <li
+                    className={`text-gray-400 ${
+                        currentPage === totalNumberOfPages ? "disabled" : "cursor-pointer text-gray-500"
+                    }`}
+                >
                     <span onClick={nextPage}>
                         Next
                         <Arrow direction={"right"} />

components/dashboard/src/custom-hooks/usePagination.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { useMemo } from "react";
+
+export const usePagination = (props: {
+    totalResults: number;
+    totalNumberOfPages: number;
+    currentPage: number;
+    resultsPerPage: number;
+}) => {
+    const { totalResults, totalNumberOfPages, currentPage, resultsPerPage } = props;
+    const adjacentToCurrentPage = 1; // This is the number(s) we see next to the currentPage
+    const totalNumbersShownInPagination = 6;
+
+    const pageNumbersAsArray = (startRange: number, endRange: number) => {
+        return [...Array(endRange + 1).keys()].slice(startRange);
+    };
+
+    const calculatedPagination = useMemo(() => {
+        const minimumAmountInBetweenToShowEllipsis = 2;
+        // Without ellipsis aka normal case
+        if (totalNumberOfPages <= totalNumbersShownInPagination) {
+            return pageNumbersAsArray(1, totalNumberOfPages);
+        }
+
+        // Otherwise, we show the ellipses
+        const toTheRightOfCurrent = Math.min(currentPage + adjacentToCurrentPage, totalNumberOfPages);
+        const toTheLeftOfCurrent = Math.max(currentPage - adjacentToCurrentPage, 1);
+
+        const showRightEllipsis = toTheRightOfCurrent < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
+        const showLeftEllipsis = toTheLeftOfCurrent > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
+
+        if (showRightEllipsis && !showLeftEllipsis) {
+            let leftSideNumbers = 3;
+            let leftPageNumbersAsArray = pageNumbersAsArray(1, leftSideNumbers);
+            return [...leftPageNumbersAsArray, "...", totalNumberOfPages];
+        }
+
+        if (showLeftEllipsis && !showRightEllipsis) {
+            let rightSideNumbers = 3;
+            let rightPageNumbersAsArray = pageNumbersAsArray(totalNumberOfPages - rightSideNumbers, totalNumberOfPages);
+            return [1, "...", ...rightPageNumbersAsArray];
+        }
+
+        if (showRightEllipsis && showLeftEllipsis) {
+            let middleNumbers = pageNumbersAsArray(toTheLeftOfCurrent, toTheRightOfCurrent);
+            return [1, "...", ...middleNumbers, "...", totalNumberOfPages];
+        }
+    }, [totalResults, totalNumberOfPages, currentPage, adjacentToCurrentPage, pageNumbersAsArray, resultsPerPage]);
+
+    return calculatedPagination;
+};

components/dashboard/src/teams/TeamUsage.tsx

@@ -32,7 +32,7 @@ function TeamUsage() {
     const team = getCurrentTeam(location, teams);
     const [billedUsage, setBilledUsage] = useState<BillableSession[]>([]);
     const [currentPage, setCurrentPage] = useState(1);
-    const [resultsPerPage] = useState(10);
+    const [resultsPerPage] = useState(1);
     const [errorMessage, setErrorMessage] = useState("");
     const today = new Date();
     const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@@ -126,7 +126,7 @@ function TeamUsage() {
 
     const lastResultOnCurrentPage = currentPage * resultsPerPage;
     const firstResultOnCurrentPage = lastResultOnCurrentPage - resultsPerPage;
-    const numberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
+    const totalNumberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
     const currentPaginatedResults = billedUsage.slice(firstResultOnCurrentPage, lastResultOnCurrentPage);
 
     return (
@@ -236,9 +236,11 @@ function TeamUsage() {
                                 </ItemsList>
                                 {billedUsage.length > resultsPerPage && (
                                     <Pagination
+                                        totalResults={billedUsage.length}
                                         currentPage={currentPage}
                                         setCurrentPage={setCurrentPage}
-                                        numberOfPages={numberOfPages}
+                                        totalNumberOfPages={totalNumberOfPages}
+                                        resultsPerPage={resultsPerPage}
                                     />
                                 )}
                             </div>