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 | import { DonationsBanner } from "@components/DonationList";
import FundraisersDonationsTable from "@components/DonationList/Table/FundraisersDonationsTable";
import { Ticker } from "@components/Ticker";
import { useParams } from "react-router-dom";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { useGetFundraiserById } from "@services/api/products/fundraisers";
import { PortalRootContainer } from "@components/Layout/Layout";
import { useBreadcrumbs } from "@components/CustomBreadcrumbsPage/hooks/useBreadcrumbs";
import { ConnectionErrorState } from "@common/EmptyState";
import { useSelector } from "react-redux";
import { QKEY_DONATION_TRANSACTIONS } from "@constants/queryKeys";
import { columns } from "./columns";
import { VirtualListLayoutWrapper } from "@components/VirtualList/wrappers/VlLayoutWrapper";
import { useParseTransactionRow } from "./utils";
import { DonationsFilterBar } from "@components/DonationList/Table/DonationsFilterBar";
import { useGetTransactionsByProduct } from "@services/api/products/transactions";
import { useEffect, useState } from "react";
import { VirtualTransactionsTableV2 } from "@components/VirtualList/VirtualTransactionsTableV2";
export function DonationList() {
const { id } = useParams();
const { data, error, isLoading } = useGetFundraiserById(id as string);
useBreadcrumbs({
product_id: data?.id,
imgSrc: data?.imageURL,
title: data?.name,
});
const { rowParser } = useParseTransactionRow();
const [pageEl, setPageEl] = useState<HTMLElement | undefined>(undefined);
useEffect(() => {
const pageElement = document.getElementById("page-container") || undefined;
setPageEl(pageElement);
}, []);
const isEnabledVl = useSelector<any, boolean>(
(state: any) => state.app.enabledVL,
);
if (isLoading) return <LoadingSpinner />;
if (error && !isLoading) return <ConnectionErrorState />;
return (
<PortalRootContainer>
<VirtualListLayoutWrapper show={isEnabledVl}>
<>
<Ticker />
<DonationsBanner data={data} />
</>
</VirtualListLayoutWrapper>
{isEnabledVl ? (
<VirtualTransactionsTableV2
isPurchase
apiBuilder={
id
? useGetTransactionsByProduct(id, QKEY_DONATION_TRANSACTIONS)
: undefined
}
overrideColumns={columns}
queryKey={QKEY_DONATION_TRANSACTIONS}
queryPath={`products/${id}/transaction-items`}
rowParser={rowParser}
filters={{
type: "REACT_COMPONENT",
jsx: <DonationsFilterBar />,
}}
customScrollParent={pageEl}
filter={`reversalTransactionID:""`}
stickyHeader
/>
) : (
<FundraisersDonationsTable title="Donations" id={id} />
)}
</PortalRootContainer>
);
}
|