Skip to content

Commit dd1f8fe

Browse files
author
Laurie T. Malau
committed
pagination
1 parent af64405 commit dd1f8fe

File tree

2 files changed

+53
-1
lines changed

2 files changed

+53
-1
lines changed
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright (c) 2022 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License-AGPL.txt in the project root for license information.
5+
*/
6+
7+
function Pagination(props: { numberOfPages: number; currentPage: number; setCurrentPage: any }) {
8+
const { numberOfPages, currentPage, setCurrentPage } = props;
9+
const availablePageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);
10+
11+
const nextPage = () => {
12+
if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
13+
};
14+
const prevPage = () => {
15+
if (currentPage !== 1) setCurrentPage(currentPage - 1);
16+
};
17+
18+
return (
19+
<nav>
20+
<ul className="pagination justify-content-center">
21+
<li className="page-item">
22+
<span className="page-link" onClick={prevPage}>
23+
Previous
24+
</span>
25+
</li>
26+
{availablePageNumbers.map((pn) => (
27+
<li key={pn} className={`page-item ${currentPage === pn ? "active" : ""} `}>
28+
<span onClick={() => setCurrentPage(pn)} className="page-link">
29+
{pn}
30+
</span>
31+
</li>
32+
))}
33+
<li className="page-item">
34+
<span className="page-link" onClick={nextPage}>
35+
Next
36+
</span>
37+
</li>
38+
</ul>
39+
</nav>
40+
);
41+
}
42+
43+
export default Pagination;

components/dashboard/src/teams/TeamUsage.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,16 @@ import { Item, ItemField, ItemsList } from "../components/ItemsList";
1717
import moment from "moment";
1818
import Property from "../admin/Property";
1919
import Arrow from "../components/Arrow";
20+
import Pagination from "../components/Pagination";
2021

2122
function TeamUsage() {
2223
const { teams } = useContext(TeamsContext);
2324
const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
2425
const location = useLocation();
2526
const team = getCurrentTeam(location, teams);
2627
const [billedUsage, setBilledUsage] = useState<BillableSession[]>([]);
28+
const [currentPage, setCurrentPage] = useState(1);
29+
const [resultsPerPage] = useState(30);
2730

2831
useEffect(() => {
2932
if (!team) {
@@ -51,6 +54,11 @@ function TeamUsage() {
5154
return (endTime - startTime) / (1000 * 60 * 60) + "hrs";
5255
};
5356

57+
const lastResultOnCurrentPage = currentPage * resultsPerPage;
58+
const firstResultOnCurrentPage = lastResultOnCurrentPage - resultsPerPage;
59+
const numberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
60+
const currentPaginatedResults = billedUsage.slice(firstResultOnCurrentPage, lastResultOnCurrentPage);
61+
5462
return (
5563
<PageWithSubMenu
5664
subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
@@ -80,7 +88,7 @@ function TeamUsage() {
8088
</ItemField>
8189
<ItemField className="my-auto" />
8290
</Item>
83-
{billedUsage.map((usage) => (
91+
{currentPaginatedResults.map((usage) => (
8492
<div
8593
key={usage.instanceId}
8694
className="flex p-3 grid grid-cols-6 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
@@ -112,6 +120,7 @@ function TeamUsage() {
112120
</div>
113121
))}
114122
</ItemsList>
123+
<Pagination currentPage={currentPage} setCurrentPage={setCurrentPage} numberOfPages={numberOfPages} />
115124
</PageWithSubMenu>
116125
);
117126
}

0 commit comments

Comments
 (0)