fix: RefundRequests.tsx batches pagination

Author: fragreco01

src/api/MerchantsApiClient.ts

@@ -241,11 +241,15 @@ export const MerchantApi = {
   },
 
   getRewardBatches: async (
-    initiativeId: string
+    initiativeId: string,
+    page: number,
+    size: number
   ): Promise<RewardBatchListDTO> => {
      try {
     const result = await apiClient.getRewardBatches({
-      initiativeId
+      initiativeId,
+      page,
+      size
     });
 
     return extractResponse(result, 200, onRedirectToLogin);

src/pages/refundRequests/RefundRequests.tsx

@@ -40,9 +40,8 @@ const RefundRequests = () => {
   const [rewardBatches, setRewardBatches] = useState<Array<RewardBatchDTO>>([]);
   const [rewardBatchesLoading, setRewardBatchesLoading] = useState<boolean>(false);
   const [sendBatchIsLoading, setSendBatchIsLoading] = useState<boolean>(false);
-  // const [currentPagination, setCurrentPagination] = useState({ pageNo: 0, pageSize: 10, totalElements: 0 });
+  const [currentPagination, setCurrentPagination] = useState({ pageNo: 0, pageSize: 10, totalElements: 0 });
   const initiativesList = useSelector(intiativesListSelector);
-
   const columns: Array<GridColDef> = [
     {
       field: 'spacer',
@@ -127,7 +126,6 @@ const RefundRequests = () => {
       ),
     },
   ];
-
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -136,6 +134,15 @@ const RefundRequests = () => {
     }
   }, [initiativesList]);
 
+  useEffect(() => {
+    const initiativeId =
+      initiativesList && initiativesList.length > 0 ? initiativesList[0].initiativeId : '';
+    void fetchRewardBatches(initiativeId || '');
+  }, [
+    currentPagination.pageNo,
+    currentPagination.pageSize,
+  ]);
+  
   const infoStyles = {
     fontWeight: theme.typography.fontWeightRegular,
     fontSize: theme.typography.fontSize,
@@ -144,14 +151,19 @@ const RefundRequests = () => {
   const fetchRewardBatches = async (initiativeId: string): Promise<void> => {
     setRewardBatchesLoading(true);
     try {
-      const response = await getRewardBatches(initiativeId);
+      const response = await getRewardBatches(initiativeId, currentPagination.pageNo, currentPagination.pageSize);
       if (response?.content) {
         const mappedResponse = response.content.map((value) => ({
           ...value,
           approvedAmountCents: value.status === 'APPROVED' ? value.approvedAmountCents : undefined,
           suspendedAmountCents: value.status === 'APPROVED' ? value.suspendedAmountCents : undefined
         }));
         setRewardBatches(mappedResponse);
+        setCurrentPagination({
+          pageNo: response?.pageNo as number,
+          pageSize: response?.pageSize as number,
+          totalElements: response?.totalElements as number,
+        });
         setSelectedRows([]);
       }
     } catch (error: any) {
@@ -175,15 +187,7 @@ const RefundRequests = () => {
   );
 
   const handlePaginationPageChange = (page: number) => {
-    console.log('Page changed:', page);
-    // const updatedPagination = { ...storesPagination, pageNo: page, initiativeId: id, sort: currentSort };
-    // setStoresPagination(updatedPagination);
-    // sessionStorage.setItem('storesPagination', JSON.stringify(updatedPagination));
-    // void fetchStores({
-    //   ...appliedFilters,
-    //   page,
-    //   sort: currentSort,
-    // });
+    setCurrentPagination((prev) => ({ ...prev, pageNo: page }));
   };
 
   const handleRowSelectionChange = (rows: Array<number>) => {
@@ -321,7 +325,11 @@ const RefundRequests = () => {
             rows={rewardBatches}
             rowsPerPage={1}
             checkable={true}
-            // paginationModel={{ page: currentPagination.pageNo, pageSize: currentPagination.pageSize, totalElements:  }}
+            paginationModel={{
+              page: currentPagination.pageNo,
+              pageSize: currentPagination.pageSize,
+              totalElements: currentPagination.totalElements,
+            }}
             onPaginationPageChange={handlePaginationPageChange}
             onRowSelectionChange={handleRowSelectionChange}
             isRowSelectable={isRowSelectable}

src/services/merchantService.ts

@@ -122,9 +122,11 @@ export const deleteReportedUser = (
   MerchantApi.deleteReportedUser(initiativeId, userFiscalCode);
 
 export const getRewardBatches = (
-  initiativeId: string
+  initiativeId: string,
+  page: number,
+  size: number,
 ): Promise<RewardBatchListDTO> =>
-  MerchantApi.getRewardBatches(initiativeId);
+  MerchantApi.getRewardBatches(initiativeId, page, size);
 
 export const getAllRewardBatches = (
   initiativeId: string