fix pagination

src/components/ItemsTable.tsx

@@ -191,7 +191,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 				<TablePagination
 					page={pageInfo.page}
 					pageSize={pageInfo.pageSize}
-					hasNextPage={pageInfo.hasNextPage}
+					hasNextPage={pageInfo.hasNext}
 					onPageChange={onPageChange}
 				/>
 			)}

src/components/account/AccountBalancesTable.tsx

@@ -101,8 +101,9 @@ export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
 	const pageInfo = useMemo<PageInfo>(() => ({
 		page: pagination.page,
 		pageSize: pagination.pageSize,
-		hasNextPage: pagination.page * pagination.pageSize < data.length,
-		totalPageCount: Math.ceil(data.length / pagination.pageSize)
+		totalPageCount: Math.ceil(data.length / pagination.pageSize),
+		hasPrevious: pagination.page > 0,
+		hasNext: pagination.page * pagination.pageSize < data.length,
 	}), [data, pagination]);
 
 	const handleSortSelected = useCallback((value: SortOrder<SortProperty<AccountBalance>>) => {

src/model/pageInfo.ts

@@ -1,6 +1,7 @@
 export type PageInfo = {
 	page: number;
 	pageSize: number;
-	hasNextPage: boolean;
 	totalPageCount: number|undefined;
+	hasPrevious: boolean;
+	hasNext: boolean;
 }

src/services/balancesService.ts

@@ -58,7 +58,12 @@ export async function getBalances(
 			}
 		);
 
-		const balances = extractConnectionItems(response.accountsConnection, unifyStatsSquidAccountBalance, network);
+		const balances = extractConnectionItems(
+			response.accountsConnection,
+			pagination,
+			unifyStatsSquidAccountBalance,
+			network
+		);
 
 		return balances;
 	}

src/services/blocksService.ts

@@ -134,7 +134,12 @@ async function getArchiveBlocks(
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, unifyArchiveBlock, network);
+	const blocks = extractConnectionItems(
+		response.blocksConnection,
+		pagination,
+		unifyArchiveBlock,
+		network
+	);
 
 	return blocks;
 }
@@ -179,7 +184,12 @@ async function getExplorerSquidBlocks(
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, unifyExplorerSquidBlock, network);
+	const blocks = extractConnectionItems(
+		response.blocksConnection,
+		pagination,
+		unifyExplorerSquidBlock,
+		network
+	);
 
 	return blocks;
 }

src/services/callsService.ts

@@ -168,7 +168,12 @@ async function getArchiveCalls(
 		}
 	);
 
-	return extractConnectionItems(response?.callsConnection, unifyArchiveCall, network);
+	return extractConnectionItems(
+		response.callsConnection,
+		pagination,
+		unifyArchiveCall,
+		network
+	);
 }
 
 async function getExplorerSquidCalls(
@@ -220,7 +225,12 @@ async function getExplorerSquidCalls(
 		}
 	);
 
-	return extractConnectionItems(response.callsConnection, unifyExplorerSquidCall, network);
+	return extractConnectionItems(
+		response.callsConnection,
+		pagination,
+		unifyExplorerSquidCall,
+		network
+	);
 }
 
 async function getArchiveCallsArgs(network: string, callsIds: string[]) {

src/services/eventsService.ts

@@ -235,7 +235,12 @@ async function getArchiveEvents(
 		}
 	);
 
-	return extractConnectionItems(response.eventsConnection, unifyArchiveEvent, network);
+	return extractConnectionItems(
+		response.eventsConnection,
+		pagination,
+		unifyArchiveEvent,
+		network
+	);
 }
 
 async function getExplorerSquidEvents(
@@ -287,7 +292,13 @@ async function getExplorerSquidEvents(
 		}
 	);
 
-	const data = await extractConnectionItems(response.eventsConnection, unifyExplorerSquidEvent, network);
+	const data = await extractConnectionItems(
+		response.eventsConnection,
+		pagination,
+		unifyExplorerSquidEvent,
+		network
+	);
+
 	const events = await addEventsArgs(network, data);
 
 	return events;

src/services/extrinsicsService.ts

@@ -201,7 +201,12 @@ async function getArchiveExtrinsics(
 		}
 	);
 
-	return extractConnectionItems(response.extrinsicsConnection, unifyArchiveExtrinsic, network);
+	return extractConnectionItems(
+		response.extrinsicsConnection,
+		pagination,
+		unifyArchiveExtrinsic,
+		network
+	);
 }
 
 async function getExplorerSquidExtrinsics(
@@ -258,7 +263,12 @@ async function getExplorerSquidExtrinsics(
 		}
 	);
 
-	return extractConnectionItems(response.extrinsicsConnection, unifyExplorerSquidExtrinsic, network);
+	return extractConnectionItems(
+		response.extrinsicsConnection,
+		pagination,
+		unifyExplorerSquidExtrinsic,
+		network
+	);
 }
 
 /**

src/services/searchService.ts

@@ -80,8 +80,9 @@ export async function search(query: string, networks: Network[], pagination: Sea
 					pageInfo: {
 						page: 1,
 						pageSize: 10, // TODO constant
-						hasNextPage: false,
-						totalPageCount: 1
+						totalPageCount: 1,
+						hasPrevious: false,
+						hasNext: false,
 					},
 					totalCount: 1
 				},
@@ -159,9 +160,9 @@ async function searchNetwork(
 	if (isHex(query)) {
 		return searchNetworkByHash(network, query, pagination);
 	} else if (query?.match(/^\d+$/)) {
-		return searchNetworkByBlockHeight(network, parseInt(query));
+		return searchNetworkByBlockHeight(network, parseInt(query), pagination);
 	} else if (isEncodedAddress(network, query)) {
-		return searchNetworkByEncodedAddress(network, query);
+		return searchNetworkByEncodedAddress(network, query, pagination);
 	} else {
 		return searchNetworkByName(network, query, pagination, fetchAll);
 	}
@@ -256,8 +257,19 @@ async function searchNetworkByHash(
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock, network.name);
-	const extrinsics = await extractConnectionItems(response.extrinsics, unifyExplorerSquidExtrinsic, network.name);
+	const blocks = await extractConnectionItems(
+		response.blocks,
+		pagination.blocks,
+		unifyExplorerSquidBlock,
+		network.name
+	);
+
+	const extrinsics = await extractConnectionItems(
+		response.extrinsics,
+		pagination.extrinsics,
+		unifyExplorerSquidExtrinsic,
+		network.name
+	);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -271,7 +283,7 @@ async function searchNetworkByHash(
 	return result;
 }
 
-async function searchNetworkByBlockHeight(network: Network, height: number) {
+async function searchNetworkByBlockHeight(network: Network, height: number, pagination: SearchPaginationOptions) {
 	const blocksFilter: BlocksFilter = {height};
 
 	const response = await fetchExplorerSquid<{
@@ -305,7 +317,12 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock, network.name);
+	const blocks = await extractConnectionItems(
+		response.blocks,
+		pagination.blocks,
+		unifyExplorerSquidBlock,
+		network.name
+	);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -319,7 +336,7 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 	return result;
 }
 
-async function searchNetworkByEncodedAddress(network: Network, encodedAddress: string) {
+async function searchNetworkByEncodedAddress(network: Network, encodedAddress: string, pagination: SearchPaginationOptions) {
 	const result: NetworkSearchResult = {
 		network,
 		accounts: {
@@ -330,10 +347,11 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 				identity: null
 			}],
 			pageInfo: {
-				page: 1,
-				pageSize: 10,
-				hasNextPage: false,
-				totalPageCount: 1
+				page: pagination.accounts.page,
+				pageSize: pagination.accounts.pageSize,
+				totalPageCount: 1,
+				hasPrevious: false,
+				hasNext: false,
 			},
 			totalCount: 1
 		},
@@ -491,6 +509,7 @@ async function searchNetworkByName(
 
 	const extrinsics = await extractConnectionItems(
 		response.extrinsics,
+		pagination.extrinsics,
 		unifyExplorerSquidExtrinsic,
 		network.name
 	);
@@ -499,6 +518,7 @@ async function searchNetworkByName(
 		network.name,
 		await extractConnectionItems(
 			response.events,
+			pagination.events,
 			unifyExplorerSquidEvent,
 			network.name
 		)
@@ -571,8 +591,9 @@ function networkResultsToSearchResultItems<T extends {id: string, network: Netwo
 		pageInfo: {
 			page: pagination.page,
 			pageSize: pagination.pageSize,
-			hasNextPage: pagination.page * pagination.pageSize < data.length,
-			totalPageCount: Math.ceil(data.length / pagination.pageSize)
+			totalPageCount: Math.ceil(data.length / pagination.pageSize),
+			hasPrevious: pagination.page > 0,
+			hasNext: pagination.page * pagination.pageSize < data.length,
 		},
 		totalCount
 	};

src/services/transfersService.ts

@@ -84,28 +84,12 @@ async function getMainSquidTransfers(
 		}
 	);
 
-	return await extractConnectionItems(response.transfersConnection, unifyMainSquidTransfer, network);
-}
-
-async function getArchiveExtrinsicsInfo(network: string, extrinsicHashes: string[]) {
-	const response = await fetchArchive<{extrinsics: {id: string, hash: string}[]}>(
-		network,
-		`query($hashes: [String!], $limit: Int!) {
-			extrinsics(where: { hash_in: $hashes }, limit: $limit) {
-				id,
-				hash
-			}
-		}`,
-		{
-			hashes: extrinsicHashes,
-			limit: extrinsicHashes.length
-		}
+	return await extractConnectionItems(
+		response.transfersConnection,
+		pagination,
+		unifyMainSquidTransfer,
+		network
 	);
-
-	return response.extrinsics.reduce((extrinsicInfoByHash, extrinsic) => {
-		extrinsicInfoByHash[extrinsic.hash] = extrinsic;
-		return extrinsicInfoByHash;
-	}, {} as Record<string, any>);
 }
 
 function unifyMainSquidTransfer(transfer: MainSquidTransfer, networkName: string): Transfer {

src/utils/itemsConnection.ts

@@ -16,6 +16,7 @@ export function paginationToConnectionCursor(pagination: PaginationOptions) {
 
 export async function extractConnectionItems<R = any, T = any, A extends any[] = any[], C extends boolean = false>(
 	connection: ItemsConnection<T, C>,
+	pagination: PaginationOptions,
 	transformNode: (node: T, ...a: A) => R|Promise<R>,
 	...additionalArgs: A
 ): Promise<ItemsResponse<R, C>> {
@@ -25,23 +26,18 @@ export async function extractConnectionItems<R = any, T = any, A extends any[] =
 		data.push(await transformNode(edge.node, ...additionalArgs));
 	}
 
-	const startIndex = parseInt(connection.pageInfo.startCursor || "1") - 1;
-	const endIndex = parseInt(connection.pageInfo.endCursor || "1"); // non-inclusive
-
-	const pageSize = (endIndex - startIndex);
-	const page = Math.floor(startIndex / pageSize) + 1;
-
 	const totalPageCount = connection.totalCount
-		? Math.ceil(connection.totalCount / pageSize)
+		? Math.ceil(connection.totalCount / pagination.pageSize)
 		: undefined;
 
 	return {
 		data,
 		pageInfo: {
-			page,
-			pageSize,
-			hasNextPage: connection.pageInfo.hasNextPage,
-			totalPageCount
+			page: pagination.page,
+			pageSize: pagination.pageSize,
+			totalPageCount,
+			hasPrevious: connection.pageInfo.hasNextPage,
+			hasNext: connection.pageInfo.hasNextPage,
 		},
 		totalCount: connection.totalCount
 	} as ItemsResponse<R, C>;

src/utils/itemsResponse.ts

@@ -8,8 +8,9 @@ export function emptyItemsResponse(totalCount?: number): ItemsResponse<never> {
 		pageInfo: {
 			page: 1,
 			pageSize: 10, // TODO constant
-			hasNextPage: false,
-			totalPageCount: 0
+			totalPageCount: 0,
+			hasPrevious: false,
+			hasNext: false,
 		},
 		totalCount,
 	};