refactor pagination to use URL query parameter and use page & pageSiz…

…e instead of offset & limit
topmonks · Oct 25, 2023 · 93e4bf3 · 93e4bf3
1 parent 3e81347
commit 93e4bf3
Show file tree

Hide file tree

Showing 59 changed files with 477 additions and 386 deletions.
diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
@@ -3,7 +3,7 @@ import { Children, cloneElement, HTMLAttributes, ReactElement, ReactNode } from
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import { css, Interpolation, Theme } from "@emotion/react";
 
-import { Pagination } from "../hooks/usePagination";
+import { PageInfo } from "../model/pageInfo";
 import { SortDirection } from "../model/sortDirection";
 import { SortOrder } from "../model/sortOrder";
 
@@ -77,6 +77,7 @@ export const ItemsTableAttribute = <T extends object = any, S = any, A extends a
 };
 
 export type ItemsTableProps<T extends ItemsTableItem, S = any, A extends any[] = []> = HTMLAttributes<HTMLDivElement> & {
+	children: ReactElement<ItemsTableAttributeProps<T, A, S>>|(ReactElement<ItemsTableAttributeProps<T, A, S>>|false|undefined|null)[];
 	data?: T[];
 	additionalData?: A;
 	loading?: boolean;
@@ -85,12 +86,13 @@ export type ItemsTableProps<T extends ItemsTableItem, S = any, A extends any[] =
 	error?: any;
 	errorMessage?: string;
 	sort?: SortOrder<any>;
-	pagination?: Pagination;
-	children: ReactElement<ItemsTableAttributeProps<T, A, S>>|(ReactElement<ItemsTableAttributeProps<T, A, S>>|false|undefined|null)[];
+	pageInfo?: PageInfo;
+	onPageChange?: (page: number) => void;
 };
 
 export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] = []>(props: ItemsTableProps<T, S, A>) => {
 	const {
+		children,
 		data,
 		additionalData,
 		loading,
@@ -99,8 +101,8 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 		error,
 		errorMessage = "Unexpected error occured while fetching items",
 		sort,
-		pagination,
-		children,
+		pageInfo,
+		onPageChange,
 		...restProps
 	} = props;
 
@@ -171,7 +173,14 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 					</TableBody>
 				</Table>
 			</TableContainer>
-			{pagination && <TablePagination {...pagination} />}
+			{pageInfo && (
+				<TablePagination
+					page={pageInfo.page}
+					pageSize={pageInfo.pageSize}
+					hasNextPage={pageInfo.hasNextPage}
+					onPageChange={onPageChange}
+				/>
+			)}
 		</div>
 	);
 };
diff --git a/src/components/TablePagination.tsx b/src/components/TablePagination.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
-import { ChevronLeft, ChevronRight } from "@mui/icons-material";
+import { useCallback } from "react";
 import { css, IconButton } from "@mui/material";
-
+import { ChevronLeft, ChevronRight } from "@mui/icons-material";
 import { Theme } from "@emotion/react";
 
 const paginationStyle = css`
@@ -30,33 +30,40 @@ const buttonStyle = (theme: Theme) => css`
 `;
 
 export type TablePaginationProps = {
-	offset: number;
-	limit: number;
-	hasNextPage?: boolean;
+	page: number;
+	pageSize: number;
+	hasNextPage: boolean;
 	hideOnSinglePage?: boolean;
-	setPreviousPage: () => void;
-	setNextPage: () => void;
+	onPageChange?: (page: number) => void;
 };
 
 export function TablePagination(props: TablePaginationProps) {
 	const {
-		offset,
+		page,
+		pageSize,
 		hasNextPage = true,
 		hideOnSinglePage = true,
-		setPreviousPage,
-		setNextPage,
+		onPageChange,
 	} = props;
 
-	if (hideOnSinglePage && offset === 0 && !hasNextPage) {
+	if (hideOnSinglePage && page === 1 && !hasNextPage) {
 		return null;
 	}
 
+	const setPreviousPage = useCallback(() => {
+		onPageChange?.(page - 1);
+	}, [page, onPageChange]);
+
+	const setNextPage = useCallback(() => {
+		onPageChange?.(page + 1);
+	}, [page, onPageChange]);
+
 	return (
 		<div css={paginationStyle}>
-			<IconButton css={buttonStyle} disabled={offset === 0} onClick={() => setPreviousPage()}>
+			<IconButton css={buttonStyle} disabled={page === 1} onClick={setPreviousPage}>
 				<ChevronLeft />
 			</IconButton>
-			<IconButton css={buttonStyle} disabled={!hasNextPage} onClick={() => setNextPage()}>
+			<IconButton css={buttonStyle} disabled={!hasNextPage} onClick={setNextPage}>
 				<ChevronRight />
 			</IconButton>
 		</div>

diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
@@ -1,16 +1,17 @@
 /** @jsxImportSource @emotion/react */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Alert } from "@mui/material";
 import { css } from "@emotion/react";
 import Decimal from "decimal.js";
 
-import { usePagination } from "../../hooks/usePagination";
 import { AccountBalance } from "../../model/accountBalance";
+import { PaginationOptions } from "../../model/paginationOptions";
+import { Resource } from "../../model/resource";
 import { SortDirection } from "../../model/sortDirection";
 import { SortOrder } from "../../model/sortOrder";
 import { SortProperty } from "../../model/sortProperty";
-import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
+
 import { compareProps } from "../../utils/compare";
 
 import { AccountAddress } from "../AccountAddress";
@@ -62,23 +63,23 @@ const SortProperties = {
 	RESERVED: (balance: AccountBalanceWithUsdRate) => balanceSort(balance, "reserved")
 };
 
-export type AccountBalancesTable = {
+export type AccountBalancesTableProps = {
 	balances: Resource<AccountBalance[]>;
 	usdRates: Resource<UsdRates>;
+	pagination: PaginationOptions;
+	onPageChange?: (page: number) => void;
 }
 
 const AccountBalancesTableAttribute = ItemsTableAttribute<AccountBalance, SortProperty<AccountBalance>, [UsdRates|undefined]>;
 
-export const AccountBalancesTable = (props: AccountBalancesTable) => {
-	const { balances, usdRates } = props;
+export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
+	const { balances, usdRates, pagination, onPageChange } = props;
 
 	const [sort, setSort] = useState<SortOrder<SortProperty<AccountBalanceWithUsdRate>>>({
 		property: SortProperties.TOTAL,
 		direction: SortDirection.DESC
 	});
 
-	const pagination = usePagination();
-
 	const data = useMemo(() => {
 		return balances.data
 			?.map(it => ({
@@ -92,26 +93,20 @@ export const AccountBalancesTable = (props: AccountBalancesTable) => {
 	}, [balances, usdRates, sort]);
 
 	const pageData = useMemo(() => {
-		return data?.slice(pagination.offset, pagination.offset + pagination.limit);
-	}, [data, pagination.offset, pagination.limit]);
-
-	useEffect(() => {
-		if (data) {
-			pagination.set({
-				...pagination,
-				hasNextPage: pagination.offset + pagination.limit < data.length
-			});
-		}
-	}, [data, pagination.offset, pagination.limit]);
+		return data?.slice((pagination.page - 1) * pagination.pageSize, pagination.page * pagination.pageSize);
+	}, [data, pagination.page, pagination.pageSize]);
+
+	const pageInfo = useMemo(() => ({
+		page: pagination.page,
+		pageSize: pagination.pageSize,
+		hasNextPage: pagination.page * pagination.pageSize < data.length
+	}), [data, pagination]);
 
 	const handleSortSelected = useCallback((value: SortOrder<SortProperty<AccountBalance>>) => {
 		console.log("set sort", value);
 		setSort(value);
-		pagination.set({
-			...pagination,
-			offset: 0
-		});
-	}, [pagination]);
+		onPageChange?.(0);
+	}, [onPageChange]);
 
 	return (
 		<div>
@@ -120,7 +115,8 @@ export const AccountBalancesTable = (props: AccountBalancesTable) => {
 				additionalData={[usdRates.data]}
 				loading={balances.loading || usdRates.loading}
 				error={balances.error}
-				pagination={pagination}
+				pageInfo={pageInfo}
+				onPageChange={onPageChange}
 				sort={sort}
 				data-test="account-balances-table"
 			>

diff --git a/src/components/balances/BalancesTable.tsx b/src/components/balances/BalancesTable.tsx
@@ -14,12 +14,13 @@ export type BalancesTableProps = {
 	network: Network;
 	balances: PaginatedResource<Balance>;
 	usdRates: Resource<UsdRates>;
+	onPageChange?: (page: number) => void;
 };
 
 const BalancesItemsTableAttribute = ItemsTableAttribute<Balance, never, [UsdRates|undefined]>;
 
 function BalancesTable(props: BalancesTableProps) {
-	const { network, balances, usdRates } = props;
+	const { network, balances, usdRates, onPageChange } = props;
 
 	return (
 		<ItemsTable
@@ -29,7 +30,8 @@ function BalancesTable(props: BalancesTableProps) {
 			notFound={balances.notFound}
 			notFoundMessage="No balances found"
 			error={balances.error}
-			pagination={balances.pagination}
+			pageInfo={balances.pageInfo}
+			onPageChange={onPageChange}
 			data-test="balances-table"
 		>
 			<BalancesItemsTableAttribute

diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
@@ -12,6 +12,7 @@ export type BlocksTableProps = {
 	blocks: PaginatedResource<Block>,
 	showValidator: boolean,
 	showTime?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const BlocksTableAttribute = ItemsTableAttribute<Block>;
@@ -22,6 +23,7 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 		blocks,
 		showValidator,
 		showTime,
+		onPageChange
 	} = props;
 
 	return (
@@ -31,7 +33,8 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			notFound={blocks.notFound}
 			notFoundMessage="No blocks found"
 			error={blocks.error}
-			pagination={blocks.pagination}
+			pageInfo={blocks.pageInfo}
+			onPageChange={onPageChange}
 			data-test="blocks-table"
 		>
 			<BlocksTableAttribute

diff --git a/src/components/calls/CallsTable.tsx b/src/components/calls/CallsTable.tsx
@@ -11,12 +11,13 @@ export type CallsTableProps = {
 	network: Network;
 	calls: PaginatedResource<Call>;
 	showAccount?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const CallsTableAttribute = ItemsTableAttribute<Call>;
 
 export const CallsTable = (props: CallsTableProps) => {
-	const { network, calls, showAccount } = props;
+	const { network, calls, showAccount, onPageChange } = props;
 
 	return (
 		<ItemsTable
@@ -25,7 +26,8 @@ export const CallsTable = (props: CallsTableProps) => {
 			notFound={calls.notFound}
 			notFoundMessage="No calls found"
 			error={calls.error}
-			pagination={calls.pagination}
+			pageInfo={calls.pageInfo}
+			onPageChange={onPageChange}
 			data-test="calls-table"
 		>
 			<CallsTableAttribute

diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
@@ -18,12 +18,13 @@ export type EventsTableProps = {
 	network: Network;
 	events: PaginatedResource<Event>;
 	showExtrinsic?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const EventsItemsTableAttribute = ItemsTableAttribute<Event>;
 
 function EventsTable(props: EventsTableProps) {
-	const { network, events, showExtrinsic } = props;
+	const { network, events, showExtrinsic, onPageChange } = props;
 
 	return (
 		<ItemsTable
@@ -32,7 +33,8 @@ function EventsTable(props: EventsTableProps) {
 			notFound={events.notFound}
 			notFoundMessage="No events found"
 			error={events.error}
-			pagination={events.pagination}
+			pageInfo={events.pageInfo}
+			onPageChange={onPageChange}
 			data-test="events-table"
 		>
 			<EventsItemsTableAttribute

diff --git a/src/components/extrinsics/ExtrinsicsTable.tsx b/src/components/extrinsics/ExtrinsicsTable.tsx
@@ -13,6 +13,7 @@ export type ExtrinsicsTableProps = {
 	extrinsics: PaginatedResource<Extrinsic>,
 	showAccount?: boolean;
 	showTime?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const ExtrinsicsTableAttribute = ItemsTableAttribute<Extrinsic>;
@@ -23,6 +24,7 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 		extrinsics,
 		showAccount,
 		showTime,
+		onPageChange
 	} = props;
 
 	return (
@@ -32,7 +34,8 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 			notFound={extrinsics.notFound}
 			notFoundMessage="No extrinsics found"
 			error={extrinsics.error}
-			pagination={extrinsics.pagination}
+			pageInfo={extrinsics.pageInfo}
+			onPageChange={onPageChange}
 			data-test="extrinsics-table"
 		>
 			<ExtrinsicsTableAttribute

diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
@@ -40,8 +40,9 @@ interface SearchResultsTableProps<T> {
 	children: SearchResultsTableChild<T>|(SearchResultsTableChild<T>|false|undefined|null)[];
 	query: string;
 	results: NetworkSearchResult[];
-	getItems: (result: NetworkSearchResult) => ItemsResponse<T>;
 	itemsPlural: string
+	getItems: (result: NetworkSearchResult) => ItemsResponse<T>;
+	onPageChange?: (page: number) => void;
 }
 
 export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [Network], []>) => <ItemsTableAttribute {...props} />;

diff --git a/src/components/transfers/TransfersTable.tsx b/src/components/transfers/TransfersTable.tsx
@@ -17,6 +17,7 @@ export type TransfersTableProps = {
 	network: Network;
 	transfers: PaginatedResource<Transfer>,
 	showTime?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const TransfersTableAttribute = ItemsTableAttribute<Transfer>;
@@ -26,6 +27,7 @@ function TransfersTable(props: TransfersTableProps) {
 		network,
 		transfers,
 		showTime,
+		onPageChange
 	} = props;
 
 	console.log(transfers);
@@ -37,7 +39,8 @@ function TransfersTable(props: TransfersTableProps) {
 			notFound={transfers.notFound}
 			notFoundMessage="No transfers found"
 			error={transfers.error}
-			pagination={transfers.pagination}
+			pageInfo={transfers.pageInfo}
+			onPageChange={onPageChange}
 			data-test="transfers-table"
 		>
 			<TransfersTableAttribute

diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
@@ -1,12 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { getAccount } from "../services/accountService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useAccount(
 	network: string,
 	address: string,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getAccount, [network, address], options);
 }