Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import React from "react";
import { useTransactionsIOC } from "@components/ManageMoney/TransactionTable/hooks";
import { Grid, Stack } from "@mui/material";
import { MobileListWithStates } from "@common/MobileList";
import { TransactionTableRow } from "@components/ManageMoney/TransactionTable/transactions.types";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { TableCard_V2 } from "@components/ManageMoney/TransactionTable/Mobile/TableCard";
import {
LoadingSkeleton,
PendingSwitch,
} from "@components/ManageMoney/TransactionTable/TransactionTable.atoms";
import { useGetAllTransactions } from "@services/api/products/transactions";
import { useTargetRef } from "@hooks/common/useObserveHTMLNode";
import { TransactionTableSearch } from "@components/ManageMoney/TransactionTable/TransactionTableSearch";
import DownloadReportAction from "@components/ManageMoney/TransactionTable/DownloadReportAction";
import { parseRow } from "@components/ManageMoney/TransactionTable/transactions.helpers";
import { MobilePurchaseItem_V2 } from "@common/Campaigns/ReportPage/MobilePurchaseItem";
import { FilterButton } from "../MainActionsHeader";
const path = "transactions";
export function MobileWraper({
dataQueryKey,
apiBuilder,
isPurchase,
rowParser,
tableType,
isDisabled,
filterParams,
}: any) {
const {
allRows,
totalRows,
page,
isLoading,
setPageDispatcher,
loadingRef,
setPage,
} = useTransactionsIOC(
dataQueryKey,
apiBuilder ?? useGetAllTransactions(dataQueryKey, path),
"",
{
isPurchase,
filterParams,
},
);
const targetRef = useTargetRef({ page, totalRows, setPage, loadingRef });
const rows = React.useMemo(() => {
return allRows.map(rowParser ?? parseRow);
}, [allRows]);
return (
<Grid paddingX={1}>
<Stack gap={2}>
<TransactionTableSearch queryKey={dataQueryKey} />
{!isPurchase ? (
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
{tableType === "manageMoney" ? (
<FilterButton isDisabled={isDisabled} />
) : (
<PendingSwitch setPage={setPageDispatcher} />
)}
<DownloadReportAction filterParams={filterParams} />
</Stack>
) : null}
</Stack>
<MobileListWithStates
queryKey={dataQueryKey}
length={allRows?.length}
targetRef={targetRef}
isLoading={isLoading}
sx={{ marginTop: "10px" }}
LoadingSkeleton={LoadingSkeleton}
>
{rows.map((item: TransactionTableRow, idx: number) => (
<FadeUpWrapper delay={20 + idx * 20} key={item.id}>
{isPurchase ? (
<MobilePurchaseItem_V2 rowData={item} campaignType="fundraiser" />
) : (
<TableCard_V2 rowData={item} />
)}
</FadeUpWrapper>
))}
</MobileListWithStates>
</Grid>
);
}
|