search refactoring

src/components/AccountAddress.tsx

@@ -4,7 +4,7 @@ import { Tooltip } from "@mui/material";
 import { css } from "@emotion/react";
 
 import { Network } from "../model/network";
-import { encodeAddress } from "../utils/formatAddress";
+import { encodeAddress } from "../utils/address";
 import { shortenHash } from "../utils/shortenHash";
 
 import { Link } from "./Link";

src/components/ItemsTable.tsx

@@ -51,7 +51,7 @@ export type ItemsTableAttributeProps<T, A extends any[], S> = {
 	onSortChange?: (sortOrder: SortOrder<S>) => void;
 	render: ItemsTableDataFn<T, A, ReactNode>;
 	colSpan?: ItemsTableDataFn<T, A, number>;
-	hide?: ItemsTableDataFn<T, A, boolean>;
+	hide?: ItemsTableDataFn<T, A, boolean|undefined>;
 	_data?: T;
 	_additionalData?: A;
 }

src/components/SearchInput.tsx

@@ -129,7 +129,14 @@ function SearchInput(props: SearchInputProps) {
 
 			e.preventDefault();
 			localStorage.setItem("network", network);
-			navigate(`/search?query=${search}`);
+
+			let url = `/search?query=${search}`;
+
+			if (network !== "*") {
+				url = `${url}&network=${network}`;
+			}
+
+			navigate(url);
 		},
 		[navigate, network, search]
 	);

src/components/account/AccountInfoTable.tsx

@@ -5,7 +5,7 @@ import { isEthereumAddress } from "@polkadot/util-crypto";
 import { Account } from "../../model/account";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import {InfoTable, InfoTableAttribute } from "../InfoTable";
 

src/components/balances/BalancesTable.tsx

@@ -3,7 +3,7 @@ import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
-import { decodeAddress } from "../../utils/formatAddress";
+import { decodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { Currency } from "../Currency";

src/components/blocks/BlockInfoTable.tsx

@@ -1,7 +1,7 @@
 import { Block } from "../../model/block";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";

src/components/calls/CallInfoTable.tsx

@@ -7,7 +7,7 @@ import { Call } from "../../model/call";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";

src/components/extrinsics/ExtrinsicInfoTable.tsx

@@ -7,7 +7,7 @@ import { Extrinsic } from "../../model/extrinsic";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";

src/components/search/SearchResultsTable.tsx

@@ -1,28 +1,21 @@
 /** @jsxImportSource @emotion/react */
-import { Children, ReactElement, ReactNode } from "react";
+import React, { Children, ReactElement, useMemo } from "react";
+import { Alert } from "@mui/material";
 import { css } from "@emotion/react";
 
+import { Network } from "../../model/network";
+import { ItemsResponse } from "../../model/itemsResponse";
 import { NetworkSearchResult } from "../../services/searchService";
+import { formatNumber } from "../../utils/number";
 
 import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps } from "../ItemsTable";
 import { Link } from "../Link";
-import { Alert } from "@mui/material";
-import { formatNumber } from "../../utils/number";
-import { ButtonLink } from "../ButtonLink";
-import { Time } from "../Time";
-import { Network } from "../../model/network";
-import { Extrinsic } from "../../model/extrinsic";
-import { ItemsResponse } from "../../model/itemsResponse";
-import React from "react";
 
 const tableStyle = css`
-	table {
-		table-layout: auto;
-	}
 `;
 
 const networkColumnStyle = css`
-	width: 0px;
+	width: 250px;
 `;
 
 const networkStyle = css`
@@ -51,35 +44,40 @@ interface SearchResultsTableProps<T> {
 	itemsPlural: string
 }
 
-export const SearchResultsTableAttribute = <T extends object>(props: ItemsTableAttributeProps<{item: T, result: NetworkSearchResult}, [Network], []>) => <ItemsTableAttribute {...props} />;
 export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [Network], []>) => <ItemsTableAttribute {...props} />;
 
 interface SearchResultsTableRow<T extends object> {
 	id: string;
 	item: T|undefined;
 	result: NetworkSearchResult;
+	collapsed?: boolean;
 }
 
 export const SearchResultsTable = <T extends object>(props: SearchResultsTableProps<T>) => {
 	const { children, query, results, getItems, itemsPlural } = props;
 
-	const rows = results.flatMap<SearchResultsTableRow<T>>((result) => {
-		const items = getItems(result);
-
-		if (items.data.length === 0 && items.totalCount) {
-			return [{
-				id: `${result.network.name}-0`,
-				item: undefined,
-				result
-			}];
-		} else {
-			return items.data.map((it, index) => ({
-				id: `${result.network.name}-${index}`,
-				item: it,
-				result
-			}));
-		}
-	}) || [];
+	const collapseMultiple = results.length > 1;
+
+	const rows = useMemo(() => {
+		return results.flatMap<SearchResultsTableRow<T>>((result) => {
+			const items = getItems(result);
+
+			if (collapseMultiple && (items.totalCount || items.data.length || 0) > 1) {
+				return [{
+					id: `${result.network.name}-0`,
+					item: undefined,
+					result,
+					collapsed: true
+				}];
+			} else {
+				return items.data.map((it, index) => ({
+					id: `${result.network.name}-${index}`,
+					item: it,
+					result
+				}));
+			}
+		}) || [];
+	}, [collapseMultiple]);
 
 	const itemAttributes = Children.map(children, (child, index) => {
 		if (!child) {
@@ -92,19 +90,17 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 
 		if (index === 0) {
 			return (
-				<SearchResultsTableAttribute<T>
+				<ItemsTableAttribute<SearchResultsTableRow<T>>
 					label={label}
 					colCss={colCss}
-					colSpan={({item, result}) => (!item /* TODO || result.error*/) ? Children.count(children) : 1}
-					render={({item, result}) => {
-						const total = getItems(result).totalCount || 0;
-
+					colSpan={({result, collapsed}) => (collapsed /* TODO || result.error*/) ? Children.count(children) : 1}
+					render={({item, result, collapsed}) => {
 						return (
 							<>
 								{item && render(item, result.network)}
-								{!item && (
+								{collapsed && (
 									<Alert severity="warning" icon={false}>
-										{formatNumber(total)} {itemsPlural} found. {" "}
+										{formatNumber(getItems(result).totalCount || 0)} {itemsPlural} found. {" "}
 										<Link to={`/search?query=${query}&network=${result.network.name}`}>
 											View
 										</Link>
@@ -125,7 +121,7 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 		}
 
 		return (
-			<SearchResultsTableAttribute<T>
+			<ItemsTableAttribute<SearchResultsTableRow<T>>
 				label={label}
 				colCss={colCss}
 				render={({item, result}) => {
@@ -135,19 +131,18 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 
 					return render(item, result.network);
 				}}
-				hide={({item, result}) => !item /* TODO || result.error*/}
+				hide={({result, collapsed}) => collapsed /* TODO || result.error*/}
 			/>
 		);
 	}) as any;
 
 	return (
 		<ItemsTable
-			//data={results.map(it => ({...it, id: it.network.name})).filter(it => (getItems(it).pagination.totalCount || 0) > 0)}
 			data={rows}
 			css={tableStyle}
 			data-test="search-results-table"
 		>
-			<SearchResultsTableAttribute
+			<ItemsTableAttribute<SearchResultsTableRow<T>>
 				label="Network"
 				colCss={networkColumnStyle}
 				render={({result}) => (

src/model/itemsConnection.ts

@@ -1,4 +1,4 @@
-export type ItemsConnection<T = any> = {
+export type ItemsConnection<T = any, C extends boolean = false> = {
 	edges: {
 		node: T
 	}[],
@@ -7,6 +7,8 @@ export type ItemsConnection<T = any> = {
 		endCursor: string;
 		hasPreviousPage: boolean;
 		hasNextPage: boolean;
-	},
+	}
+	totalCount?: number;
+} & (C extends true ? {
 	totalCount: number;
-}
+} : object)

src/model/itemsResponse.ts

@@ -1,9 +1,11 @@
-export type ItemsResponse<T = any> = {
+export type ItemsResponse<T = any, C extends boolean = false> = {
 	data: T[];
 	pagination: {
 		offset: number;
 		limit: number;
 		hasNextPage: boolean;
 	},
 	totalCount?: number;
-}
+} & (C extends true ? {
+	totalCount: number;
+} : object)

src/router.tsx

@@ -2,7 +2,7 @@ import { Navigate, createBrowserRouter, redirect } from "react-router-dom";
 
 import { ResultLayout } from "./components/ResultLayout";
 import { getNetwork } from "./services/networksService";
-import { encodeAddress } from "./utils/formatAddress";
+import { encodeAddress } from "./utils/address";
 
 import { AccountPage } from "./screens/account";
 import { BlockPage } from "./screens/block";