State refactor: receiver payments

stellar · Oct 23, 2023 · d15d262 · d15d262
1 parent 139def2
commit d15d262
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 226 deletions.
diff --git a/src/api/getPayments.ts b/src/api/getPayments.ts
diff --git a/src/components/ReceiverPayments.tsx b/src/components/ReceiverPayments.tsx
@@ -1,55 +1,38 @@
-import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useState } from "react";
 import { Heading, Select } from "@stellar/design-system";
 
-import { AppDispatch } from "store";
-import {
-  getReceiverPaymentsAction,
-  getReceiverPaymentsWithParamsAction,
-} from "store/ducks/receiverPayments";
-import { useRedux } from "hooks/useRedux";
 import { PAGE_LIMIT_OPTIONS } from "constants/settings";
 
 import { SectionHeader } from "components/SectionHeader";
 import { PaymentsTable } from "components/PaymentsTable";
 import { Pagination } from "components/Pagination";
+
+import { usePayments } from "apiQueries/usePayments";
 import { renderTextWithCount } from "helpers/renderTextWithCount";
 
 export const ReceiverPayments = ({ receiverId }: { receiverId: string }) => {
-  const { receiverPayments } = useRedux("receiverPayments");
-
   const [currentPage, setCurrentPage] = useState(1);
   const [pageLimit, setPageLimit] = useState(20);
 
-  const dispatch: AppDispatch = useDispatch();
-
-  const maxPages = receiverPayments.pagination?.pages || 1;
+  const {
+    data: receiverPayments,
+    error,
+    isLoading,
+    isFetching,
+  } = usePayments({
+    receiver_id: receiverId,
+    page: currentPage.toString(),
+    page_limit: pageLimit.toString(),
+  });
 
-  useEffect(() => {
-    if (receiverId) {
-      dispatch(getReceiverPaymentsAction(receiverId));
-    }
-  }, [receiverId, dispatch]);
+  const maxPages = receiverPayments?.pagination?.pages || 1;
 
   const handlePageLimitChange = (
     event: React.ChangeEvent<HTMLSelectElement>,
   ) => {
     event.preventDefault();
-
-    const pageLimit = Number(event.target.value);
-    setPageLimit(pageLimit);
     setCurrentPage(1);
-
-    if (receiverId) {
-      // Need to make sure we'll be loading page 1
-      dispatch(
-        getReceiverPaymentsWithParamsAction({
-          receiver_id: receiverId,
-          page_limit: pageLimit.toString(),
-          page: "1",
-        }),
-      );
-    }
+    setPageLimit(Number(event.target.value));
   };
 
   return (
@@ -59,7 +42,7 @@ export const ReceiverPayments = ({ receiverId }: { receiverId: string }) => {
           <SectionHeader.Content>
             <Heading as="h3" size="sm">
               {renderTextWithCount(
-                receiverPayments.pagination?.total || 0,
+                receiverPayments?.pagination?.total || 0,
                 "Payment",
                 "Payments",
               )}
@@ -85,27 +68,18 @@ export const ReceiverPayments = ({ receiverId }: { receiverId: string }) => {
               maxPages={Number(maxPages)}
               onSetPage={(page) => {
                 setCurrentPage(page);
-
-                if (receiverId) {
-                  dispatch(
-                    getReceiverPaymentsWithParamsAction({
-                      receiver_id: receiverId,
-                      page: page.toString(),
-                    }),
-                  );
-                }
               }}
-              isLoading={receiverPayments.status === "PENDING"}
+              isLoading={isLoading || isFetching}
             />
           </SectionHeader.Content>
         </SectionHeader.Row>
       </SectionHeader>
 
       <PaymentsTable
-        paymentItems={receiverPayments.items}
-        apiError={receiverPayments.errorString}
+        paymentItems={receiverPayments?.data || []}
+        apiError={error?.message}
         isFiltersSelected={undefined}
-        isLoading={receiverPayments.status === "PENDING"}
+        isLoading={isLoading || isFetching}
       />
     </div>
   );

diff --git a/src/store/ducks/receiverPayments.ts b/src/store/ducks/receiverPayments.ts
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -17,7 +17,6 @@ import { reducer as disbursements } from "store/ducks/disbursements";
 import { reducer as forgotPassword } from "store/ducks/forgotPassword";
 import { reducer as organization } from "store/ducks/organization";
 import { reducer as profile } from "store/ducks/profile";
-import { reducer as receiverPayments } from "store/ducks/receiverPayments";
 import { reducer as userAccount } from "store/ducks/userAccount";
 import { reducer as users } from "store/ducks/users";
 import { reducer as wallets } from "store/ducks/wallets";
@@ -45,7 +44,6 @@ const reducers = combineReducers({
   forgotPassword,
   organization,
   profile,
-  receiverPayments,
   userAccount,
   users,
   wallets,

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -135,14 +135,6 @@ export type ReceiverDetailsInitialState = {
   errorString?: string;
 };
 
-export type ReceiverPaymentsInitialState = {
-  items: ApiPayment[];
-  status: ActionStatus | undefined;
-  pagination?: Pagination;
-  errorString?: string;
-  searchParams?: PaymentsSearchParams;
-};
-
 export type OrganizationInitialState = {
   data: {
     name: string;
@@ -201,7 +193,6 @@ export interface Store {
   organization: OrganizationInitialState;
   profile: ProfileInitialState;
   receiverDetails: ReceiverDetailsInitialState;
-  receiverPayments: ReceiverPaymentsInitialState;
   userAccount: UserAccountInitialState;
   users: UsersInitialState;
   wallets: WalletsInitialState;