From eece11182a36bfa6c176cd491598ced1ec5f5ee2 Mon Sep 17 00:00:00 2001
From: Steven Yi <stevenyi@gmail.com>
Date: Mon, 29 Jul 2024 15:38:50 -0400
Subject: [PATCH 1/2] fix: bottom padding

---
 src/pages/Reports/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/Reports/index.tsx b/src/pages/Reports/index.tsx
index d7a0175b..bf376064 100644
--- a/src/pages/Reports/index.tsx
+++ b/src/pages/Reports/index.tsx
@@ -1,8 +1,8 @@
 import useGateway from '@src/hooks/useGateway';
+import { useGlobalState } from '@src/store';
 import { useParams } from 'react-router-dom';
 import ReportsHeader from './ReportsHeader';
 import ReportsTable from './ReportsTable';
-import { useGlobalState } from '@src/store';
 
 const Reports = () => {
   const params = useParams();
@@ -15,11 +15,9 @@ const Reports = () => {
   const currentEpoch = useGlobalState((state) => state.currentEpoch);
 
   return (
-    <div className="flex h-screen max-w-full flex-col gap-6 overflow-auto pr-6 scrollbar">
+    <div className="flex h-screen max-w-full flex-col gap-6 overflow-auto pb-6 pr-6 scrollbar">
       <ReportsHeader gateway={gateway} />
-      {isLoading || !currentEpoch ? (
-        undefined
-      ) : ownerId && gateway ? (
+      {isLoading || !currentEpoch ? undefined : ownerId && gateway ? (
         <ReportsTable ownerId={ownerId} gateway={gateway} />
       ) : (
         <div>Unable to find gateway with owner ID {ownerId}.</div>

From a14bd54ebb22f124d60e4510b847de3d6e607fd2 Mon Sep 17 00:00:00 2001
From: Steven Yi <stevenyi@gmail.com>
Date: Mon, 29 Jul 2024 15:42:38 -0400
Subject: [PATCH 2/2] fix(reports): fix handling of loading next pages of data
 for reports

---
 src/hooks/useReports.ts            | 10 +++++-----
 src/pages/Reports/ReportsTable.tsx | 14 +++++++++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useReports.ts b/src/hooks/useReports.ts
index 11375a48..ab7a5edd 100644
--- a/src/hooks/useReports.ts
+++ b/src/hooks/useReports.ts
@@ -25,10 +25,10 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
     queryFn: async ({ pageParam }) => {
       if (
         !arIOReadSDK ||
-        !startEpoch ||
+        startEpoch === undefined ||
         !gatewayStart ||
         !observerAddress ||
-        !pageParam
+        pageParam === undefined
       ) {
         throw new Error(
           'arIOReadSDK, startEpoch, ownerId, observerAddress, or gatewayStart not available',
@@ -52,7 +52,7 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
         epochIndexToFetch -= windowSize;
 
         const epochs = await Promise.all(
-          batchedEpochIndicies.map((epochIndex) =>
+          batchedEpochIndicies.filter(v => v >= 0).map((epochIndex) =>
             arIOReadSDK.getEpoch({ epochIndex }),
           ),
         );
@@ -110,7 +110,7 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
                 ),
                 size: parseInt(transaction.node.data.size),
                 version:
-                  tags.find((tag) => tag.name === 'App-Version')?.value || '',
+                  tags.find((tag) => tag.name === 'AR-IO-Observer-Report-Version')?.value || '',
               };
             },
           );
@@ -118,7 +118,7 @@ const useReports = (ownerId?: string, gateway?: AoGateway) => {
           data = data.concat(recordData);
         }
 
-        if (filtered.length < windowSize) {
+        if (filtered.length < windowSize || epochIndexToFetch < 0) {
           completed = true;
           break;
         }
diff --git a/src/pages/Reports/ReportsTable.tsx b/src/pages/Reports/ReportsTable.tsx
index c463014d..9f566e4c 100644
--- a/src/pages/Reports/ReportsTable.tsx
+++ b/src/pages/Reports/ReportsTable.tsx
@@ -1,4 +1,5 @@
 import { AoGateway } from '@ar.io/sdk';
+import Placeholder from '@src/components/Placeholder';
 import TableView from '@src/components/TableView';
 import useReports, { ReportTransactionData } from '@src/hooks/useReports';
 import { formatDate } from '@src/utils';
@@ -21,6 +22,7 @@ const ReportsTable = ({
     data: reports,
     hasNextPage,
     fetchNextPage,
+    isFetchingNextPage
   } = useReports(ownerId, gateway);
 
   // Define columns for the table
@@ -34,7 +36,7 @@ const ReportsTable = ({
       id: 'generatedAt',
       header: 'Generated At',
       sortDescFirst: false,
-      cell: ({row}) => formatDate(new Date(row.original.timestamp)),
+      cell: ({ row }) => formatDate(new Date(row.original.timestamp)),
     }),
     columnHelper.accessor('size', {
       id: 'size',
@@ -68,13 +70,19 @@ const ReportsTable = ({
         data={data || []}
         isLoading={isLoading}
         noDataFoundText="No reports found."
-        defaultSortingState={{ id: 'timestamp', desc: true }}
+        defaultSortingState={{ id: 'generatedAt', desc: true }}
         onRowClick={(row) => {
           navigate(`/gateways/${ownerId}/reports/${row.txid}`);
         }}
       />
       {hasNextPage && (
-        <button onClick={() => fetchNextPage()}>Load More</button>
+        <div className="flex w-full items-center justify-center border border-grey-600 py-[0.9375rem] pl-6 pr-[0.8125rem]">
+          {isLoading || isFetchingNextPage ? (
+            <Placeholder className='grow'/>
+          ) : (
+            <button onClick={() => fetchNextPage()}>Load More</button>
+          )}
+        </div>
       )}
     </div>
   );