Skip to content

Commit 896f60c

Browse files
rakibansaryrakibansary
committed
feat(winnings): add pagination size control
Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>
1 parent 705b52b commit 896f60c

File tree

4 files changed

+78
-56
lines changed

4 files changed

+78
-56
lines changed

‎src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,12 +229,36 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
229229
],
230230
type: 'dropdown',
231231
},
232+
{
233+
key: 'pageSize',
234+
label: 'Payments per page',
235+
options: [
236+
{
237+
label: '10',
238+
value: '10',
239+
},
240+
{
241+
label: '50',
242+
value: '50',
243+
},
244+
{
245+
label: '100',
246+
value: '100',
247+
},
248+
],
249+
type: 'dropdown',
250+
},
232251
]}
233252
onFilterChange={(key: string, value: string[]) => {
234-
setPagination({
253+
const newPagination = {
235254
...pagination,
236255
currentPage: 1,
237-
})
256+
}
257+
if (key === 'pageSize') {
258+
newPagination.pageSize = parseInt(value[0], 10)
259+
}
260+
261+
setPagination(newPagination)
238262
setFilters({
239263
...filters,
240264
[key]: value,

‎src/apps/wallet/src/lib/components/filter-bar/FilterBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const FilterBar: React.FC<FilterBarProps> = (props: FilterBarProps) => {
3030
const renderDropdown = (index: number, filter: Filter): JSX.Element => (
3131
<InputSelect
3232
tabIndex={index}
33-
value={selectedValue.get(filter.key) as string ?? ''}
33+
value={selectedValue.get(filter.key) as string ?? (filter.key === 'pageSize' ? '10' : '')}
3434
options={filter.options!}
3535
onChange={function onChange(event: ChangeEvent<HTMLInputElement>) {
3636
setSelectedValue(new Map(selectedValue.set(filter.key, event.target.value)))

‎src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* eslint-disable @typescript-eslint/explicit-function-return-type */
33
import React, { useEffect, useState } from 'react'
44

5-
import { Button, IconOutline, PageDivider } from '~/libs/ui'
5+
import { Button, IconOutline } from '~/libs/ui'
66

77
import { Winning } from '../../models/WinningDetail'
88

@@ -119,62 +119,60 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
119119
</table>
120120
</div>
121121

122-
{props.numPages > 1 && (
123-
<>
124-
<PageDivider />
125-
<div className={styles.pageButtons}>
126-
<Button
127-
onClick={props.onPreviousPageClick}
128-
secondary
129-
size='md'
130-
icon={IconOutline.ChevronLeftIcon}
131-
iconToLeft
132-
label='PREVIOUS'
133-
disabled={props.currentPage === 1}
134-
/>
135-
{props.currentPage > 3 && <span>...</span>}
136-
<div className={styles.pageNumbers}>
137-
{Array.from(Array(props.numPages)
138-
.keys())
139-
.filter(pageNumber => {
140-
const currentPage = props.currentPage - 1
141-
const maxPagesToShow = 5
142-
const halfMaxPagesToShow = Math.floor(maxPagesToShow / 2)
143-
const startPage = Math.max(currentPage - halfMaxPagesToShow, 0)
144-
const endPage = Math.min(startPage + maxPagesToShow - 1, props.numPages - 1)
145-
146-
return pageNumber >= startPage && pageNumber <= endPage
147-
})
148-
.map(pageNumber => (
149-
<Button
150-
key={`page-${pageNumber}`}
151-
secondary
152-
variant='round'
153-
label={`${pageNumber + 1}`}
154-
onClick={() => props.onPageClick(pageNumber + 1)}
155-
disabled={pageNumber === props.currentPage - 1}
156-
/>
157-
))}
158-
</div>
159-
{props.currentPage < props.numPages - 2 && <span>...</span>}
160-
<Button
161-
onClick={props.onNextPageClick}
162-
secondary
163-
size='md'
164-
icon={IconOutline.ChevronRightIcon}
165-
iconToRight
166-
label='NEXT'
167-
disabled={props.currentPage === props.numPages}
168-
/>
169-
</div>
170-
</>
171-
)}
172-
173122
<div className={styles.paymentFooter}>
174123
<div className={styles.total}>
175124
Total: $
176125
{total.toFixed(2)}
177126
</div>
127+
{props.numPages > 1 && (
128+
<>
129+
<div className={styles.pageButtons}>
130+
<Button
131+
onClick={props.onPreviousPageClick}
132+
secondary
133+
size='md'
134+
icon={IconOutline.ChevronLeftIcon}
135+
iconToLeft
136+
label='PREVIOUS'
137+
disabled={props.currentPage === 1}
138+
/>
139+
{props.currentPage > 3 && <span>...</span>}
140+
<div className={styles.pageNumbers}>
141+
{Array.from(Array(props.numPages)
142+
.keys())
143+
.filter(pageNumber => {
144+
const currentPage = props.currentPage - 1
145+
const maxPagesToShow = 5
146+
const halfMaxPagesToShow = Math.floor(maxPagesToShow / 2)
147+
const startPage = Math.max(currentPage - halfMaxPagesToShow, 0)
148+
const endPage = Math.min(startPage + maxPagesToShow - 1, props.numPages - 1)
149+
150+
return pageNumber >= startPage && pageNumber <= endPage
151+
})
152+
.map(pageNumber => (
153+
<Button
154+
key={`page-${pageNumber}`}
155+
secondary
156+
variant='round'
157+
label={`${pageNumber + 1}`}
158+
onClick={() => props.onPageClick(pageNumber + 1)}
159+
disabled={pageNumber === props.currentPage - 1}
160+
/>
161+
))}
162+
</div>
163+
{props.currentPage < props.numPages - 2 && <span>...</span>}
164+
<Button
165+
onClick={props.onNextPageClick}
166+
secondary
167+
size='md'
168+
icon={IconOutline.ChevronRightIcon}
169+
iconToRight
170+
label='NEXT'
171+
disabled={props.currentPage === props.numPages}
172+
/>
173+
</div>
174+
</>
175+
)}
178176
<Button
179177
primary
180178
onClick={() => {

‎src/apps/wallet/src/lib/services/wallet.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export async function getPayments(userId: string, limit: number, offset: number,
5151
const filteredFilters: Record<string, string> = {}
5252

5353
for (const key in filters) {
54-
if (filters[key].length > 0) {
54+
if (filters[key].length > 0 && key !== 'pageSize') {
5555
filteredFilters[key] = filters[key][0]
5656
}
5757
}

0 commit comments

Comments
 (0)