@@ -17,13 +17,16 @@ import { Item, ItemField, ItemsList } from "../components/ItemsList";
17
17
import moment from "moment" ;
18
18
import Property from "../admin/Property" ;
19
19
import Arrow from "../components/Arrow" ;
20
+ import Pagination from "../components/Pagination" ;
20
21
21
22
function TeamUsage ( ) {
22
23
const { teams } = useContext ( TeamsContext ) ;
23
24
const { showPaymentUI, showUsageBasedUI } = useContext ( PaymentContext ) ;
24
25
const location = useLocation ( ) ;
25
26
const team = getCurrentTeam ( location , teams ) ;
26
27
const [ billedUsage , setBilledUsage ] = useState < BillableSession [ ] > ( [ ] ) ;
28
+ const [ currentPage , setCurrentPage ] = useState ( 1 ) ;
29
+ const [ resultsPerPage ] = useState ( 30 ) ;
27
30
28
31
useEffect ( ( ) => {
29
32
if ( ! team ) {
@@ -51,6 +54,11 @@ function TeamUsage() {
51
54
return ( endTime - startTime ) / ( 1000 * 60 * 60 ) + "hrs" ;
52
55
} ;
53
56
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
+
54
62
return (
55
63
< PageWithSubMenu
56
64
subMenu = { getTeamSettingsMenu ( { team, showPaymentUI, showUsageBasedUI } ) }
@@ -80,7 +88,7 @@ function TeamUsage() {
80
88
</ ItemField >
81
89
< ItemField className = "my-auto" />
82
90
</ Item >
83
- { billedUsage . map ( ( usage ) => (
91
+ { currentPaginatedResults . map ( ( usage ) => (
84
92
< div
85
93
key = { usage . instanceId }
86
94
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() {
112
120
</ div >
113
121
) ) }
114
122
</ ItemsList >
123
+ < Pagination currentPage = { currentPage } setCurrentPage = { setCurrentPage } numberOfPages = { numberOfPages } />
115
124
</ PageWithSubMenu >
116
125
) ;
117
126
}
0 commit comments