fix ellipses

Author: Laurie T. Malau

components/dashboard/src/components/Pagination.tsx

@@ -24,14 +24,13 @@ function Pagination(props: {
         if (currentPage !== 1) setCurrentPage(currentPage - 1);
     };
     const getClassnames = (pageNumber: string | number) => {
-        let classnamesString = "text-gray-500 w-8 text-center rounded-md cursor-pointer hover:bg-gray-50";
         if (pageNumber === currentPage) {
-            return classnamesString + " bg-gray-100 pointer-events-none";
+            return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 bg-gray-100 disabled pointer-events-none";
         }
         if (pageNumber === "...") {
-            return classnamesString + "pointer-events-none";
+            return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 disabled pointer-events-none";
         }
-        return classnamesString;
+        return "text-gray-500 w-8 text-center rounded-md hover:bg-gray-50 cursor-pointer";
     };
 
     return (

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

@@ -14,7 +14,7 @@ export const usePagination = (props: {
 }) => {
     const { totalResults, totalNumberOfPages, currentPage, resultsPerPage } = props;
     const adjacentToCurrentPage = 1; // This is the number(s) we see next to the currentPage
-    const totalNumbersShownInPagination = 5;
+    const totalNumbersShownInPagination = 6;
 
     const pageNumbersAsArray = (startRange: number, endRange: number) => {
         return [...Array(endRange + 1).keys()].slice(startRange);
@@ -28,28 +28,26 @@ export const usePagination = (props: {
         }
 
         // Otherwise, we show the ellipses
-        // Make sure when calculating it's still within the range
-        const adjacentRightIsWithinRange = Math.min(currentPage + adjacentToCurrentPage, totalNumberOfPages);
-        const adjacentLeftIsWithinRange = Math.max(currentPage - adjacentToCurrentPage, 1);
+        const toTheRightOfCurrent = Math.min(currentPage + adjacentToCurrentPage, totalNumberOfPages);
+        const toTheLeftOfCurrent = Math.max(currentPage - adjacentToCurrentPage, 1);
 
-        const showRightEllipsis =
-            adjacentRightIsWithinRange < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
-        const showLeftEllipsis = adjacentLeftIsWithinRange > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
+        const showRightEllipsis = toTheRightOfCurrent < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
+        const showLeftEllipsis = toTheLeftOfCurrent > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
 
-        if (showRightEllipsis) {
+        if (showRightEllipsis && !showLeftEllipsis) {
             let leftSideNumbers = 3;
             let leftPageNumbersAsArray = pageNumbersAsArray(1, leftSideNumbers);
             return [...leftPageNumbersAsArray, "...", totalNumberOfPages];
         }
 
-        if (showLeftEllipsis) {
+        if (showLeftEllipsis && !showRightEllipsis) {
             let rightSideNumbers = 3;
             let rightPageNumbersAsArray = pageNumbersAsArray(totalNumberOfPages - rightSideNumbers, totalNumberOfPages);
             return [1, "...", ...rightPageNumbersAsArray];
         }
 
         if (showRightEllipsis && showLeftEllipsis) {
-            let middleNumbers = pageNumbersAsArray(adjacentLeftIsWithinRange, adjacentRightIsWithinRange);
+            let middleNumbers = pageNumbersAsArray(toTheLeftOfCurrent, toTheRightOfCurrent);
             return [1, "...", ...middleNumbers, "...", totalNumberOfPages];
         }
     }, [totalResults, totalNumberOfPages, currentPage, adjacentToCurrentPage, pageNumbersAsArray, resultsPerPage]);

components/dashboard/src/teams/TeamUsage.tsx

@@ -130,7 +130,6 @@ function TeamUsage() {
     const lastResultOnCurrentPage = currentPage * resultsPerPage;
     const firstResultOnCurrentPage = lastResultOnCurrentPage - resultsPerPage;
     const totalNumberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
-    console.log("totalNumberOfPages", totalNumberOfPages);
     const currentPaginatedResults = billedUsage.slice(firstResultOnCurrentPage, lastResultOnCurrentPage);
 
     return (