fix states

gitpod-io · Aug 2, 2022 · 4e38cae · 4e38cae
1 parent b9b9909
commit 4e38cae
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/components/dashboard/src/components/Pagination.tsx b/components/dashboard/src/components/Pagination.tsx
@@ -23,28 +23,37 @@ function Pagination(props: {
     const prevPage = () => {
         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";
+        }
+        if (pageNumber === "...") {
+            return classnamesString + "pointer-events-none";
+        }
+        return classnamesString;
+    };
 
     return (
-        <nav className="mt-16">
+        <nav className="mt-16 mb-16">
             <ul className="flex justify-center space-x-4">
-                <li className={`text-gray-400 ${currentPage === 1 ? "disabled" : "cursor-pointer"}`}>
+                <li className={`text-gray-400 ${currentPage === 1 ? "disabled" : "cursor-pointer text-gray-500"}`}>
                     <span onClick={prevPage}>
                         <Arrow direction={"left"} />
                         Previous
                     </span>
                 </li>
                 {calculatedPagination &&
                     calculatedPagination.map((pn) => (
-                        <li
-                            key={pn}
-                            className={`text-gray-500 cursor-pointer w-8 text-center rounded-md ${
-                                currentPage === pn ? "bg-gray-200" : ""
-                            } `}
-                        >
+                        <li key={pn} className={getClassnames(pn)}>
                             <span onClick={() => setCurrentPage(pn)}>{pn}</span>
                         </li>
                     ))}
-                <li className={`text-gray-400 ${currentPage === totalNumberOfPages ? "disabled" : "cursor-pointer"}`}>
+                <li
+                    className={`text-gray-400 ${
+                        currentPage === totalNumberOfPages ? "disabled" : "cursor-pointer text-gray-500"
+                    }`}
+                >
                     <span onClick={nextPage}>
                         Next
                         <Arrow direction={"right"} />

diff --git a/components/dashboard/src/custom-hooks/usePagination.ts b/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; // First page, last page, current page, 2 adjacents
+    const totalNumbersShownInPagination = 5;
 
     const pageNumbersAsArray = (startRange: number, endRange: number) => {
         return [...Array(endRange + 1).keys()].slice(startRange);
@@ -29,11 +29,12 @@ export const usePagination = (props: {
 
         // Otherwise, we show the ellipses
         // Make sure when calculating it's still within the range
-        const adjacentRight = Math.min(currentPage + adjacentToCurrentPage, totalNumberOfPages);
-        const adjacentLeft = Math.max(currentPage - adjacentToCurrentPage, 1);
+        const adjacentRightIsWithinRange = Math.min(currentPage + adjacentToCurrentPage, totalNumberOfPages);
+        const adjacentLeftIsWithinRange = Math.max(currentPage - adjacentToCurrentPage, 1);
 
-        const showRightEllipsis = adjacentRight < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
-        const showLeftEllipsis = adjacentLeft > minimumAmountInBetweenToShowEllipsis; // e.g. "1 ... 5 6 7 ... 10"
+        const showRightEllipsis =
+            adjacentRightIsWithinRange < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
+        const showLeftEllipsis = adjacentLeftIsWithinRange > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
 
         if (showRightEllipsis) {
             let leftSideNumbers = 3;
@@ -48,7 +49,7 @@ export const usePagination = (props: {
         }
 
         if (showRightEllipsis && showLeftEllipsis) {
-            let middleNumbers = pageNumbersAsArray(adjacentLeft, adjacentRight);
+            let middleNumbers = pageNumbersAsArray(adjacentLeftIsWithinRange, adjacentRightIsWithinRange);
             return [1, "...", ...middleNumbers, "...", totalNumberOfPages];
         }
     }, [totalResults, totalNumberOfPages, currentPage, adjacentToCurrentPage, pageNumbersAsArray, resultsPerPage]);

diff --git a/components/dashboard/src/teams/TeamUsage.tsx b/components/dashboard/src/teams/TeamUsage.tsx
@@ -33,7 +33,7 @@ function TeamUsage() {
     const team = getCurrentTeam(location, teams);
     const [billedUsage, setBilledUsage] = useState<BillableSession[]>([]);
     const [currentPage, setCurrentPage] = useState(1);
-    const [resultsPerPage] = useState(3);
+    const [resultsPerPage] = useState(10);
     const [errorMessage, setErrorMessage] = useState("");
     const today = new Date();
     const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);