SDP-782: State refactor: payments (#22)

* State refactor: payments

* Cleanup

src/apiQueries/usePayments.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { handleSearchParams } from "api/handleSearchParams";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiPayments, AppError, PaymentsSearchParams } from "types";
+
+export const usePayments = (searchParams?: PaymentsSearchParams) => {
+  // ALL status is for UI only
+  if (searchParams?.status === "ALL") {
+    delete searchParams.status;
+  }
+
+  const params = handleSearchParams(searchParams);
+
+  const query = useQuery<ApiPayments, AppError>({
+    queryKey: ["payments", { ...searchParams }],
+    queryFn: async () => {
+      return await fetchApi(`${API_URL}/payments/${params}`);
+    },
+    keepPreviousData: true,
+  });
+
+  return query;
+};

src/components/Pagination/index.tsx

@@ -1,26 +1,27 @@
+import { useState } from "react";
 import { Button, Icon, Input } from "@stellar/design-system";
 import "./styles.scss";
 
 interface PaginationProps {
   currentPage: number;
   maxPages: number;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur: (currentPage: number) => void;
-  onPrevious: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onNext: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onSetPage: (page: number) => void;
   isLoading: boolean;
 }
 
 export const Pagination = ({
   currentPage,
   maxPages,
-  onChange,
-  onBlur,
-  onPrevious,
-  onNext,
+  onSetPage,
   isLoading,
 }: PaginationProps) => {
-  const isError = currentPage > maxPages;
+  const [page, setPage] = useState<number | undefined>();
+  const isError = (page || 0) > maxPages;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    setPage(Number(event.target.value));
+  };
 
   const handleBlur = (
     event:
@@ -29,20 +30,30 @@ export const Pagination = ({
   ) => {
     event.preventDefault();
 
-    if (!isError) {
-      onBlur(currentPage);
+    if (!isError && page) {
+      onSetPage(page);
+      setPage(undefined);
     }
   };
 
+  const handlePageChange = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    direction: "prev" | "next",
+  ) => {
+    event.preventDefault();
+    const newPage = direction === "prev" ? currentPage - 1 : currentPage + 1;
+    onSetPage(newPage);
+  };
+
   return (
     <div className="Pagination-v2">
       <span>Page</span>
       <form className="Pagination-v2__input" onSubmit={handleBlur}>
         <Input
           id="current-page"
           fieldSize="sm"
-          value={currentPage}
-          onChange={onChange}
+          value={page || currentPage}
+          onChange={handleChange}
           onBlur={handleBlur}
           disabled={maxPages === 1 || isLoading}
           isError={isError}
@@ -54,14 +65,14 @@ export const Pagination = ({
           size="sm"
           variant="secondary"
           icon={<Icon.ChevronLeft />}
-          onClick={onPrevious}
+          onClick={(event) => handlePageChange(event, "prev")}
           disabled={isError || isLoading || currentPage === 1}
         />
         <Button
           size="sm"
           variant="secondary"
           icon={<Icon.ChevronRight />}
-          onClick={onNext}
+          onClick={(event) => handlePageChange(event, "next")}
           disabled={isError || isLoading || currentPage === maxPages}
         />
       </div>

src/components/PaymentsTable.tsx

@@ -6,20 +6,20 @@ import { AssetAmount } from "components/AssetAmount";
 import { PaymentStatus } from "components/PaymentStatus";
 import { Table } from "components/Table";
 import { formatDateTime } from "helpers/formatIntlDateTime";
-import { ApiPayment, ActionStatus } from "types";
+import { ApiPayment } from "types";
 
 interface PaymentsTableProps {
   paymentItems: ApiPayment[];
   apiError: string | boolean | undefined;
   isFiltersSelected: boolean | undefined;
-  status: ActionStatus | undefined;
+  isLoading: boolean;
 }
 
 export const PaymentsTable = ({
   paymentItems,
   apiError,
   isFiltersSelected,
-  status,
+  isLoading,
 }: PaymentsTableProps) => {
   const navigate = useNavigate();
 
@@ -48,7 +48,7 @@ export const PaymentsTable = ({
   }
 
   if (paymentItems?.length === 0) {
-    if (status === "PENDING") {
+    if (isLoading) {
       return <div className="Note">Loading…</div>;
     }
 
@@ -66,7 +66,7 @@ export const PaymentsTable = ({
   return (
     <div className="FiltersWithSearch">
       <Card noPadding>
-        <Table>
+        <Table isLoading={isLoading}>
           <Table.Header>
             {/* TODO: put back once ready */}
             {/* <Table.HeaderCell>

src/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@stellar/design-system";
+import { Icon, Loader } from "@stellar/design-system";
 import { SortDirection } from "types";
 import "./styles.scss";
 
@@ -140,16 +140,24 @@ interface TableComponent {
 
 interface TableProps extends React.HtmlHTMLAttributes<HTMLTableElement> {
   children: JSX.Element[];
+  isLoading?: boolean;
 }
 
 export const Table: React.FC<TableProps> & TableComponent = ({
   children,
+  isLoading,
 }: TableProps) => {
   return (
-    <div className="Table-v2__container">
+    <div
+      className={[
+        "Table-v2__container",
+        isLoading ? "Table-v2__container--loading" : "",
+      ].join(" ")}
+    >
       <div className="Table-v2__wrapper">
         <table className="Table-v2">{children}</table>
       </div>
+      {isLoading ? <Loader /> : null}
     </div>
   );
 };

src/components/Table/styles.scss

@@ -3,11 +3,32 @@
 .Table-v2__container {
   width: 100%;
   position: relative;
+
+  &--loading {
+    overflow-y: hidden;
+    pointer-events: none;
+
+    .Table-v2__wrapper {
+      opacity: var(--opacity-disabled-button);
+    }
+
+    .Loader {
+      --Loader-color: var(--color-gray-60);
+      --Loader-size: 2rem;
+
+      position: absolute;
+      top: 2rem;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
 }
 
 .Table-v2__wrapper {
   overflow-x: auto;
   overflow-y: hidden;
+  opacity: 1;
+  transition: opacity var(--anim-transition-default);
 }
 
 table.Table-v2 {
@@ -17,7 +38,7 @@ table.Table-v2 {
   thead tr,
   tr:not(:last-child) {
     border-bottom: 1px solid var(--color-gray-30);
-    transition: background-color linear var(--anim-transition-default);
+    transition: background-color var(--anim-transition-default);
 
     &.Table-v2__row--highlighted {
       background-color: var(--color-gray-10);

src/pages/DisbursementDetails.tsx

@@ -128,30 +128,6 @@ export const DisbursementDetails = () => {
     );
   };
 
-  const handlePageChange = (currentPage: number) => {
-    dispatch(getDisbursementReceiversAction({ page: currentPage.toString() }));
-  };
-
-  const handleNextPage = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    event.preventDefault();
-    const newPage = currentPage + 1;
-
-    setCurrentPage(newPage);
-    handlePageChange(newPage);
-  };
-
-  const handlePrevPage = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    event.preventDefault();
-    const newPage = currentPage - 1;
-
-    setCurrentPage(newPage);
-    handlePageChange(newPage);
-  };
-
   const goToReceiver = (
     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
     receiverId: string,
@@ -511,13 +487,12 @@ export const DisbursementDetails = () => {
               <Pagination
                 currentPage={Number(currentPage)}
                 maxPages={Number(maxPages)}
-                onChange={(event) => {
-                  event.preventDefault();
-                  setCurrentPage(Number(event.target.value));
+                onSetPage={(page) => {
+                  setCurrentPage(page);
+                  dispatch(
+                    getDisbursementReceiversAction({ page: page.toString() }),
+                  );
                 }}
-                onBlur={handlePageChange}
-                onNext={handleNextPage}
-                onPrevious={handlePrevPage}
                 isLoading={disbursementDetails.status === "PENDING"}
               />
             </SectionHeader.Content>

src/pages/Disbursements.tsx

@@ -164,32 +164,6 @@ export const Disbursements = () => {
     );
   };
 
-  const handlePageChange = (currentPage: number) => {
-    dispatch(
-      getDisbursementsWithParamsAction({ page: currentPage.toString() }),
-    );
-  };
-
-  const handleNextPage = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    event.preventDefault();
-    const newPage = currentPage + 1;
-
-    setCurrentPage(newPage);
-    handlePageChange(newPage);
-  };
-
-  const handlePrevPage = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    event.preventDefault();
-    const newPage = currentPage - 1;
-
-    setCurrentPage(newPage);
-    handlePageChange(newPage);
-  };
-
   return (
     <>
       <SectionHeader>
@@ -304,13 +278,12 @@ export const Disbursements = () => {
             <Pagination
               currentPage={Number(currentPage)}
               maxPages={Number(maxPages)}
-              onChange={(event) => {
-                event.preventDefault();
-                setCurrentPage(Number(event.target.value));
+              onSetPage={(page) => {
+                setCurrentPage(page);
+                dispatch(
+                  getDisbursementsWithParamsAction({ page: page.toString() }),
+                );
               }}
-              onBlur={handlePageChange}
-              onNext={handleNextPage}
-              onPrevious={handlePrevPage}
               isLoading={disbursements.status === "PENDING"}
             />
           </SectionHeader.Content>