SDP-1451 Export Receivers and Payments

src/api/getDisbursementsExport.ts → src/api/getExport.ts

@@ -1,15 +1,16 @@
 import { API_URL } from "constants/envVariables";
 import { getSdpTenantName } from "helpers/getSdpTenantName";
-import { DisbursementsSearchParams } from "types";
 import { handleSearchParams } from "api/handleSearchParams";
+import { Export } from "types";
 
-export const getDisbursementsExport = async (
+export const getExport = async <T>(
   token: string,
-  searchParams?: DisbursementsSearchParams,
+  type: Export,
+  searchParams?: T,
 ): Promise<void> => {
   const params = handleSearchParams(searchParams);
 
-  const response = await fetch(`${API_URL}/exports/disbursements${params}`, {
+  const response = await fetch(`${API_URL}/exports/${type}${params}`, {
     method: "GET",
     headers: {
       Authorization: `Bearer ${token}`,
@@ -24,7 +25,7 @@ export const getDisbursementsExport = async (
   const contentDisposition = response.headers.get("content-disposition");
   const filename = contentDisposition
     ? contentDisposition.split("filename=")[1]
-    : `disbursements_${new Date().toISOString().split("T")[0]}.csv`;
+    : `${type}_${new Date().toISOString().split("T")[0]}.csv`;
 
   // Create a download from the response
   const blob = await response.blob();

src/pages/Disbursements.tsx

@@ -22,8 +22,8 @@ import { AppDispatch } from "store";
 import {
   getDisbursementsAction,
   getDisbursementsWithParamsAction,
-  exportDisbursementsAction,
 } from "store/ducks/disbursements";
+import { exportDataAction } from "store/ducks/dataExport";
 import { resetDisbursementDetailsAction } from "store/ducks/disbursementDetails";
 import { setDraftIdAction } from "store/ducks/disbursementDrafts";
 import { CommonFilters, SortByDisbursements, SortDirection } from "types";
@@ -151,7 +151,12 @@ export const Disbursements = () => {
       return;
     }
 
-    dispatch(exportDisbursementsAction());
+    dispatch(
+      exportDataAction({
+        exportType: "disbursements",
+        searchParams: disbursements.searchParams,
+      }),
+    );
   };
 
   const handlePageLimitChange = (

src/pages/Payments.tsx

@@ -12,6 +12,10 @@ import { PAGE_LIMIT_OPTIONS } from "constants/settings";
 import { number } from "helpers/formatIntlNumber";
 import { CommonFilters } from "types";
 
+import { exportDataAction } from "store/ducks/dataExport";
+import { AppDispatch } from "store";
+import { useDispatch } from "react-redux";
+
 export const Payments = () => {
   const [isSearchInProgress] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
@@ -72,11 +76,22 @@ export const Payments = () => {
     setQueryFilters(initFilters);
   };
 
+  const dispatch: AppDispatch = useDispatch();
+
   const handleExport = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
     event.preventDefault();
-    alert("TODO: handle export");
+    if (isLoading || isFetching) {
+      return;
+    }
+
+    dispatch(
+      exportDataAction({
+        exportType: "payments",
+        searchParams: filters,
+      }),
+    );
   };
 
   const handlePageLimitChange = (
@@ -168,7 +183,7 @@ export const Payments = () => {
               size="sm"
               icon={<Icon.Download />}
               onClick={handleExport}
-              disabled={true}
+              disabled={isLoading || isFetching}
             >
               Export
             </Button>

src/pages/Receivers.tsx

@@ -8,6 +8,10 @@ import { SectionHeader } from "components/SectionHeader";
 import { Pagination } from "components/Pagination";
 import { ReceiversTable } from "components/ReceiversTable";
 
+import { exportDataAction } from "store/ducks/dataExport";
+import { AppDispatch } from "store";
+import { useDispatch } from "react-redux";
+
 import { useReceivers } from "apiQueries/useReceivers";
 import { PAGE_LIMIT_OPTIONS, Routes } from "constants/settings";
 import { number } from "helpers/formatIntlNumber";
@@ -88,11 +92,22 @@ export const Receivers = () => {
     setQueryFilters(isDefaultSort ? filters : { ...filters, sort, direction });
   };
 
+  const dispatch: AppDispatch = useDispatch();
+
   const handleExport = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
     event.preventDefault();
-    alert("TODO: handle export");
+    if (isLoading || isFetching) {
+      return;
+    }
+
+    dispatch(
+      exportDataAction({
+        exportType: "receivers",
+        searchParams: filters,
+      }),
+    );
   };
 
   const handlePageLimitChange = (
@@ -191,7 +206,7 @@ export const Receivers = () => {
               size="sm"
               icon={<Icon.Download />}
               onClick={handleExport}
-              disabled={true}
+              disabled={isLoading || isFetching}
             >
               Export
             </Button>

src/store/ducks/dataExport.ts

@@ -0,0 +1,40 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { ApiError, Export, RejectMessage } from "types";
+import { getExport } from "api/getExport";
+import { normalizeApiError } from "helpers/normalizeApiError";
+import { endSessionIfTokenInvalid } from "helpers/endSessionIfTokenInvalid";
+import { refreshSessionToken } from "helpers/refreshSessionToken";
+import { RootState } from "store";
+
+type ExportParams<T> = {
+  exportType: Export;
+  searchParams?: T;
+};
+
+export const exportDataAction = createAsyncThunk<
+  undefined,
+  ExportParams<any>,
+  { rejectValue: RejectMessage; state: RootState }
+>(
+  "common/exportDataAction",
+  async (
+    { exportType, searchParams },
+    { rejectWithValue, getState, dispatch },
+  ) => {
+    const { token } = getState().userAccount;
+
+    try {
+      await getExport(token, exportType, searchParams);
+      refreshSessionToken(dispatch);
+      return;
+    } catch (error: unknown) {
+      const apiError = normalizeApiError(error as ApiError);
+      const errorString = apiError.message;
+      endSessionIfTokenInvalid(errorString, dispatch);
+
+      return rejectWithValue({
+        errorString: `Error exporting ${exportType}: ${errorString}`,
+      });
+    }
+  },
+);

src/store/ducks/disbursements.ts

@@ -1,7 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { RootState } from "store";
 import { getDisbursements } from "api/getDisbursements";
-import { getDisbursementsExport } from "api/getDisbursementsExport";
 import { formatDisbursements } from "helpers/formatDisbursements";
 import { endSessionIfTokenInvalid } from "helpers/endSessionIfTokenInvalid";
 import { refreshSessionToken } from "helpers/refreshSessionToken";
@@ -75,31 +74,6 @@ export const getDisbursementsWithParamsAction = createAsyncThunk<
   },
 );
 
-export const exportDisbursementsAction = createAsyncThunk<
-  undefined,
-  undefined,
-  { rejectValue: RejectMessage; state: RootState }
->(
-  "disbursements/exportDisbursementsAction",
-  async (_, { rejectWithValue, getState, dispatch }) => {
-    const { token } = getState().userAccount;
-    const { searchParams } = getState().disbursements;
-    try {
-      await getDisbursementsExport(token, searchParams);
-      refreshSessionToken(dispatch);
-      return;
-    } catch (error: unknown) {
-      const apiError = normalizeApiError(error as ApiError);
-      const errorString = apiError.message;
-      endSessionIfTokenInvalid(errorString, dispatch);
-
-      return rejectWithValue({
-        errorString: `Error exporting disbursements: ${errorString}`,
-      });
-    }
-  },
-);
-
 const initialState: DisbursementsInitialState = {
   items: [],
   status: undefined,

src/types/index.ts

@@ -160,6 +160,8 @@ export type StellarAccountInfo = {
   balances: AccountBalanceItem[];
 };
 
+export type Export = "disbursements" | "receivers" | "payments";
+
 // =============================================================================
 // User
 // =============================================================================