fix: keep selection state across page navigation

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

Author: rakibansary

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

@@ -16,8 +16,6 @@ import PaymentsTable from '../../../lib/components/payments-table/PaymentTable'
 
 import styles from './Winnings.module.scss'
 
-type PaymentId = { [paymentId: string]: boolean }
-
 interface ListViewProps {
     profile: UserProfile
 }
@@ -73,6 +71,7 @@ const formatCurrency = (amountStr: string, currency: string): string => {
 const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const [confirmFlow, setConfirmFlow] = React.useState<ConfirmFlowData | undefined>(undefined)
     const [winnings, setWinnings] = React.useState<ReadonlyArray<Winning>>([])
+    const [selectedPayments, setSelectedPayments] = React.useState<{ [paymentId: string]: Winning }>({})
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
     const [filters, setFilters] = React.useState<Record<string, string[]>>({})
     const [pagination, setPagination] = React.useState<PaginationInfo>({
@@ -130,14 +129,8 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
         fetchWinnings()
     }, [fetchWinnings])
 
-    const processPayouts = async (paymentIds: PaymentId): Promise<void> => {
-        const winningIds: string[] = []
-        Object.keys(paymentIds)
-            .forEach((key: string) => {
-                if (paymentIds[key]) {
-                    winningIds.push(key)
-                }
-            })
+    const processPayouts = async (winningIds: string[]): Promise<void> => {
+        setSelectedPayments({})
 
         toast.info('Processing payments...', {
             position: toast.POSITION.BOTTOM_RIGHT,
@@ -246,13 +239,15 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                     ...filters,
                                     [key]: value,
                                 })
+                                setSelectedPayments({})
                             }}
                             onResetFilters={() => {
                                 setPagination({
                                     ...pagination,
                                     currentPage: 1,
                                 })
                                 setFilters({})
+                                setSelectedPayments({})
                             }}
                         />
                         {/* <PageDivider /> */}
@@ -262,6 +257,10 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                 currentPage={pagination.currentPage}
                                 numPages={pagination.totalPages}
                                 payments={winnings}
+                                selectedPayments={selectedPayments}
+                                onSelectedPaymentsChange={function onSelectedPaymentsChanged(selectedWinnings: { [paymentId: string]: Winning }) {
+                                    setSelectedPayments(selectedWinnings)
+                                }}
                                 onNextPageClick={async function onNextPageClicked() {
                                     if (pagination.currentPage === pagination.totalPages) {
                                         return
@@ -289,12 +288,12 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                     })
                                 }}
                                 onPayMeClick={async function onPayMeClicked(
-                                    paymentIds: PaymentId,
+                                    paymentIds: { [paymentId: string]: Winning },
                                     totalAmount: string,
                                 ) {
                                     setConfirmFlow({
                                         action: 'Yes',
-                                        callback: () => processPayouts(paymentIds),
+                                        callback: () => processPayouts(Object.keys(paymentIds)),
                                         content: `You are about to process payments for a total of USD ${totalAmount}`,
                                         title: 'Are you sure?',
                                     })

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { Button, IconOutline, PageDivider } from '~/libs/ui'
 
@@ -9,51 +9,61 @@ import { Winning } from '../../models/WinningDetail'
 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
+    payments: ReadonlyArray<Winning>;
+    selectedPayments?: { [paymentId: string]: Winning };
+    currentPage: number;
+    numPages: number;
+    onPayMeClick: (paymentIds: { [paymentId: string]: Winning }, totalAmount: string) => void;
+    onSelectedPaymentsChange?: (paymentIds: { [paymentId: string]: Winning }) => void;
+    onNextPageClick: () => void;
+    onPreviousPageClick: () => void;
+    onPageClick: (pageNumber: number) => void;
 }
+
 const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) => {
-    const [selectedPayments, setSelectedPayments] = useState<{ [paymentId: string]: boolean }>({})
+    const [selectedPayments, setSelectedPayments] = useState<{ [paymentId: string]: Winning }>({})
     const [toggleClicked, setToggleClicked] = useState(false)
 
+    useEffect(() => {
+        if (props.selectedPayments) {
+            setSelectedPayments(props.selectedPayments)
+        }
+    }, [props.selectedPayments])
+
+    const isSomeSelected = Object.keys(selectedPayments).length > 0
+
     const togglePaymentSelection = (paymentId: string) => {
-        setSelectedPayments(prevSelected => ({
-            ...prevSelected,
-            [paymentId]: !prevSelected[paymentId],
-        }))
-    }
+        const newSelections = { ...selectedPayments }
+        if (newSelections[paymentId]) {
+            delete newSelections[paymentId]
+        } else {
+            const payment = props.payments.find(p => p.id === paymentId)
+            if (payment) {
+                newSelections[paymentId] = payment
+            }
+        }
 
-    const isSomeSelected = Object.values(selectedPayments)
-        .some(selected => selected)
+        setSelectedPayments(newSelections)
+        props.onSelectedPaymentsChange?.(newSelections)
+    }
 
     const toggleAllPayments = () => {
-        setToggleClicked(!toggleClicked)
-
-        if (isSomeSelected) {
-            setSelectedPayments({})
-        } else {
-            const newSelections: { [paymentId: string]: boolean } = {}
+        const newSelections: { [paymentId: string]: Winning } = {}
+        if (!toggleClicked && !isSomeSelected) {
             props.payments.forEach(payment => {
                 if (payment.canBeReleased) {
-                    newSelections[payment.id] = true
+                    newSelections[payment.id] = payment
                 }
             })
-            setSelectedPayments(newSelections)
         }
-    }
 
-    const calculateTotal = () => props.payments.reduce((acc: number, payment: Winning) => {
-        if (selectedPayments[payment.id]) {
-            return acc + parseFloat(payment.netPayment.replace(/[^0-9.-]+/g, ''))
-        }
+        setToggleClicked(!toggleClicked)
+        setSelectedPayments(newSelections)
+        props.onSelectedPaymentsChange?.(newSelections)
+    }
 
-        return acc
-    }, 0)
+    const calculateTotal = () => Object.values(selectedPayments)
+        .reduce((acc, payment) => acc + parseFloat(payment.netPayment.replace(/[^0-9.-]+/g, '')), 0)
 
     const total = calculateTotal()