feat(winnings): add pagination

Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>

Author: rakibansary

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

@@ -11,6 +11,7 @@ import { getPayments, processPayments } from '../../../lib/services/wallet'
 import { Winning, WinningDetail } from '../../../lib/models/WinningDetail'
 import { FilterBar } from '../../../lib'
 import { ConfirmFlowData } from '../../../lib/models/ConfirmFlowData'
+import { PaginationInfo } from '../../../lib/models/PaginationInfo'
 import PaymentsTable from '../../../lib/components/payments-table/PaymentTable'
 
 import styles from './Winnings.module.scss'
@@ -74,6 +75,12 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const [winnings, setWinnings] = React.useState<ReadonlyArray<Winning>>([])
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
     const [filters, setFilters] = React.useState<Record<string, string[]>>({})
+    const [pagination, setPagination] = React.useState<PaginationInfo>({
+        currentPage: 1,
+        pageSize: 10,
+        totalItems: 0,
+        totalPages: 0,
+    })
 
     const convertToWinnings = useCallback(
         (payments: WinningDetail[]) => payments.map(payment => ({
@@ -96,15 +103,16 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const fetchWinnings = useCallback(async () => {
         setIsLoading(true)
         try {
-            const payments = await getPayments(props.profile.userId.toString(), filters)
-            const winningsData = convertToWinnings(payments)
+            const payments = await getPayments(props.profile.userId.toString(), pagination.pageSize, (pagination.currentPage - 1) * pagination.pageSize, filters)
+            const winningsData = convertToWinnings(payments.winnings)
             setWinnings(winningsData)
+            setPagination(payments.pagination)
         } catch (apiError) {
             console.error('Failed to fetch winnings:', apiError)
         } finally {
             setIsLoading(false)
         }
-    }, [props.profile.userId, convertToWinnings, filters])
+    }, [props.profile.userId, convertToWinnings, filters, pagination.currentPage, pagination.pageSize])
 
     const renderConfirmModalContent = React.useMemo(() => {
         if (confirmFlow?.content === undefined) {
@@ -243,7 +251,35 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                         {isLoading && <LoadingCircles className={styles.centered} />}
                         {!isLoading && winnings.length > 0 && (
                             <PaymentsTable
+                                currentPage={pagination.currentPage}
+                                numPages={pagination.totalPages}
                                 payments={winnings}
+                                onNextPageClick={async function onNextPageClicked() {
+                                    if (pagination.currentPage === pagination.totalPages) {
+                                        return
+                                    }
+
+                                    setPagination({
+                                        ...pagination,
+                                        currentPage: pagination.currentPage + 1,
+                                    })
+                                }}
+                                onPreviousPageClick={async function onPrevPageClicked() {
+                                    if (pagination.currentPage === 1) {
+                                        return
+                                    }
+
+                                    setPagination({
+                                        ...pagination,
+                                        currentPage: pagination.currentPage - 1,
+                                    })
+                                }}
+                                onPageClick={async function onPageClicked(pageNumber: number) {
+                                    setPagination({
+                                        ...pagination,
+                                        currentPage: pageNumber,
+                                    })
+                                }}
                                 onPayMeClick={async function onPayMeClicked(
                                     paymentIds: PaymentId,
                                     totalAmount: string,

src/apps/wallet/src/lib/components/payments-table/PaymentTable.module.scss

@@ -59,6 +59,22 @@ table {
     background-color: #e7f4ff;
 }
 
+.pageButtons {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 16px;
+    gap: $sp-4;
+
+    .pageNumbers {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: $sp-1;
+    }
+
+}
+
 .paymentFooter {
     display: flex;
     justify-content: space-between;

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { useState } from 'react'
 
-import { Button } from '~/libs/ui'
+import { Button, IconOutline, PageDivider } from '~/libs/ui'
 
 import { Winning } from '../../models/WinningDetail'
 
@@ -11,6 +11,11 @@ import styles from './PaymentTable.module.scss'
 interface PaymentTableProps {
     payments: ReadonlyArray<Winning>
     onPayMeClick: (paymentIds: { [paymentId: string]: boolean }, totalAmount: string) => void
+    currentPage: number
+    numPages: number
+    onNextPageClick: () => void
+    onPreviousPageClick: () => void
+    onPageClick: (pageNumber: number) => void
 }
 const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) => {
     const [selectedPayments, setSelectedPayments] = useState<{ [paymentId: string]: boolean }>({})
@@ -52,8 +57,6 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
 
     const total = calculateTotal()
 
-    console.log('All payments', props.payments)
-
     return (
         <>
             <div className={styles.tableContainer}>
@@ -105,6 +108,58 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                     </tbody>
                 </table>
             </div>
+
+            {props.numPages > 1 && (
+                <>
+                    <PageDivider />
+                    <div className={styles.pageButtons}>
+                        <Button
+                            onClick={props.onPreviousPageClick}
+                            secondary
+                            size='md'
+                            icon={IconOutline.ChevronLeftIcon}
+                            iconToLeft
+                            label='PREVIOUS'
+                            disabled={props.currentPage === 1}
+                        />
+                        {props.currentPage > 3 && <span>...</span>}
+                        <div className={styles.pageNumbers}>
+                            {Array.from(Array(props.numPages)
+                                .keys())
+                                .filter(pageNumber => {
+                                    const currentPage = props.currentPage - 1
+                                    const maxPagesToShow = 5
+                                    const halfMaxPagesToShow = Math.floor(maxPagesToShow / 2)
+                                    const startPage = Math.max(currentPage - halfMaxPagesToShow, 0)
+                                    const endPage = Math.min(startPage + maxPagesToShow - 1, props.numPages - 1)
+
+                                    return pageNumber >= startPage && pageNumber <= endPage
+                                })
+                                .map(pageNumber => (
+                                    <Button
+                                        key={`page-${pageNumber}`}
+                                        secondary
+                                        variant='round'
+                                        label={`${pageNumber + 1}`}
+                                        onClick={() => props.onPageClick(pageNumber + 1)}
+                                        disabled={pageNumber === props.currentPage - 1}
+                                    />
+                                ))}
+                        </div>
+                        {props.currentPage < props.numPages - 2 && <span>...</span>}
+                        <Button
+                            onClick={props.onNextPageClick}
+                            secondary
+                            size='md'
+                            icon={IconOutline.ChevronRightIcon}
+                            iconToRight
+                            label='NEXT'
+                            disabled={props.currentPage === props.numPages}
+                        />
+                    </div>
+                </>
+            )}
+
             <div className={styles.paymentFooter}>
                 <div className={styles.total}>
                     Total: $

src/apps/wallet/src/lib/models/PaginationInfo.ts

@@ -0,0 +1,6 @@
+export interface PaginationInfo {
+    totalItems: number;
+    totalPages: number;
+    pageSize: number;
+    currentPage: number;
+}

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

@@ -9,6 +9,7 @@ import { WinningDetail } from '../models/WinningDetail'
 import { TaxForm } from '../models/TaxForm'
 import { OtpVerificationResponse } from '../models/OtpVerificationResponse'
 import { TransactionResponse } from '../models/TransactionId'
+import { PaginationInfo } from '../models/PaginationInfo'
 import ApiResponse from '../models/ApiResponse'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/payments`
@@ -42,7 +43,11 @@ export async function getUserTaxFormDetails(): Promise<TaxForm[]> {
     return response.data
 }
 
-export async function getPayments(userId: string, filters: Record<string, string[]>): Promise<WinningDetail[]> {
+// eslint-disable-next-line max-len
+export async function getPayments(userId: string, limit: number, offset: number, filters: Record<string, string[]>): Promise<{
+    winnings: WinningDetail[],
+    pagination: PaginationInfo
+}> {
     const filteredFilters: Record<string, string> = {}
 
     for (const key in filters) {
@@ -52,14 +57,17 @@ export async function getPayments(userId: string, filters: Record<string, string
     }
 
     const body = JSON.stringify({
+        limit,
+        offset,
         winnerId: userId,
         ...filteredFilters,
     })
 
-    console.log('Ignoring filters for now', filteredFilters)
-
     const url = `${baseUrl}/user/winnings`
-    const response = await xhrPostAsync<string, ApiResponse<WinningDetail[]>>(url, body)
+    const response = await xhrPostAsync<string, ApiResponse<{
+        winnings: WinningDetail[],
+        pagination: PaginationInfo
+    }>>(url, body)
 
     if (response.status === 'error') {
         throw new Error('Error fetching payments')