feat(funding-payments): add load more button to the funding payments table (#5150)

libs/funding-payments/src/lib/funding-payments-data-provider.ts

@@ -43,7 +43,7 @@ export const fundingPaymentsProvider = makeDataProvider<
   pagination: {
     getPageInfo,
     append,
-    first: 100,
+    first: 1000,
   },
 });
 

libs/funding-payments/src/lib/funding-payments-manager.tsx

@@ -1,10 +1,11 @@
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FundingPaymentsTable } from './funding-payments-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { fundingPaymentsWithMarketProvider } from './funding-payments-data-provider';
+import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';
 
 interface FundingPaymentsManagerProps {
   partyId: string;
@@ -20,7 +21,17 @@ export const FundingPaymentsManager = ({
   gridProps,
 }: FundingPaymentsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const { data, error } = useDataProvider({
+  const [hasDisplayedRow, setHasDisplayedRow] = useState<boolean | undefined>(
+    undefined
+  );
+  const { onFilterChanged, ...props } = gridProps || {};
+  const onRowDataUpdated = useCallback(
+    ({ api }: { api: AgGridReact['api'] }) => {
+      setHasDisplayedRow(!!api.getDisplayedRowCount());
+    },
+    []
+  );
+  const { data, error, load, pageInfo } = useDataProvider({
     dataProvider: fundingPaymentsWithMarketProvider,
     update: ({ data }) => {
       if (data?.length && gridRef.current?.api) {
@@ -33,12 +44,43 @@ export const FundingPaymentsManager = ({
   });
 
   return (
-    <FundingPaymentsTable
-      ref={gridRef}
-      rowData={data}
-      onMarketClick={onMarketClick}
-      overlayNoRowsTemplate={error ? error.message : t('No funding payments')}
-      {...gridProps}
-    />
+    <div className="flex flex-col h-full">
+      <FundingPaymentsTable
+        ref={gridRef}
+        rowData={data}
+        onMarketClick={onMarketClick}
+        onFilterChanged={(event) => {
+          onRowDataUpdated(event);
+          onFilterChanged(event);
+        }}
+        onRowDataUpdated={onRowDataUpdated}
+        overlayNoRowsTemplate={error ? error.message : t('No funding payments')}
+        {...props}
+      />
+      <div className="flex justify-between border-t border-default p-1 items-center">
+        <div className="text-xs">
+          {t(
+            'Depending on data node retention you may not be able see the "full" history'
+          )}
+        </div>
+        <div className="flex text-xs items-center">
+          {data?.length && !pageInfo?.hasNextPage
+            ? t('all %s items loaded', [data.length.toString()])
+            : t('%s items loaded', [
+                data?.length ? data.length.toString() : ' ',
+              ])}
+          {pageInfo?.hasNextPage ? (
+            <Button size="extra-small" className="ml-1" onClick={() => load()}>
+              {t('Load more')}
+            </Button>
+          ) : null}
+        </div>
+        {data?.length && hasDisplayedRow === false ? (
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
+            {t('No funding payments matching selected filters')}
+          </div>
+        ) : null}
+      </div>
+    </div>
   );
 };