fix(explorer): add tests and fix transactions url generation (#4454)

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -1,25 +1,20 @@
 import { DATA_SOURCES } from '../config';
 
-type IGetTxsDataPrevious = {
-  count?: number;
-  before: string;
-  filters?: string;
-  party?: string;
-};
-
-type IGetTxsDataNext = {
-  count?: number;
-  after: string;
-  filters?: string;
-  party?: string;
-};
-
 type IGetTxsDataFirstPage = {
+  baseUrl?: string;
   count?: number;
   party?: string;
   filters?: string;
 };
 
+interface IGetTxsDataPrevious extends IGetTxsDataFirstPage {
+  before: string;
+}
+
+interface IGetTxsDataNext extends IGetTxsDataFirstPage {
+  after: string;
+}
+
 type IGetTxsDataUrl =
   | IGetTxsDataPrevious
   | IGetTxsDataNext
@@ -36,13 +31,15 @@ export const BE_TXS_PER_REQUEST = 25;
  * @returns string URL to call
  */
 export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
-  const url = new URL(`${DATA_SOURCES.blockExplorerUrl}/transactions`);
+  const baseUrl =
+    params.baseUrl || `${DATA_SOURCES.blockExplorerUrl}/transactions`;
+  const url = new URL(baseUrl);
   const count = `${params.count || BE_TXS_PER_REQUEST}`;
 
-  if ('before' in params) {
+  if ('before' in params && params.before?.length > 0) {
     url.searchParams.append('last', count);
     url.searchParams.append('before', params.before);
-  } else if ('after' in params) {
+  } else if ('after' in params && params.after?.length > 0) {
     url.searchParams.append('first', count);
     url.searchParams.append('after', params.after);
   } else {
@@ -51,10 +48,10 @@ export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
 
   // Hacky fix for param as array
   let urlAsString = url.toString();
-  if ('filters' in params && typeof params.filters === 'string') {
+  if (params.filters && params.filters?.length > 0) {
-    urlAsString += '&' + params.filters.replace(' ', '%20');
+    urlAsString += '&' + params.filters.replaceAll(' ', '%20');
   }
-  if ('party' in params) {
+  if (params.party && params.party?.length > 0) {
     urlAsString += `&filters[tx.submitter]=${params.party}`;
   }
 

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -0,0 +1,48 @@
+import { getTxsDataUrl } from './get-txs-data-url'; // import the function to be tested
+
+describe('getTxsDataUrl', () => {
+  it('should return the correct URL without filters and party', () => {
+    const params = {
+      count: 10,
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl = 'https://example.com/transactions?first=10';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+
+  it('should return the correct URL with "before" in params', () => {
+    const params = {
+      count: 5,
+      before: '100.1',
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl = 'https://example.com/transactions?last=5&before=100.1';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+
+  it('should return the correct URL with "after" in params', () => {
+    const params = {
+      count: 5,
+      after: '222.1',
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl = 'https://example.com/transactions?first=5&after=222.1';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+
+  it('should return the correct URL with filters and party', () => {
+    const params = {
+      count: 10,
+      filters: 'filters[cmd.type]=Made Up Transaction',
+      party: '1234',
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl =
+      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+});

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -55,7 +55,7 @@ export const useTxsData = ({
   } = useFetch<BlockExplorerTransactions>(url, {}, true);
 
   if (!loading && data && isNumber(data.transactions.length)) {
-    hasMoreTxs = data.transactions.length === count;
+    hasMoreTxs = data.transactions.length >= count;
     txsData = data.transactions;
   }
 

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -65,7 +65,7 @@ export const TxsListFiltered = () => {
       </TxsListNavigation>
       <TxsInfiniteList
         hasFilters={filters.size > 0}
-        hasMoreTxs={true}
+        hasMoreTxs={hasMoreTxs}
         areTxsLoading={loading}
         txs={txsData}
         loadMoreTxs={nextPage}