Combine bags ids & list hooks (#7335)

packages/page-staking/src/Bags/Summary.tsx

@@ -13,12 +13,12 @@ import { formatNumber, isNumber } from '@polkadot/util';
 import { useTranslation } from '../translate';
 
 interface Props {
+  bags?: unknown[];
   className?: string;
-  ids?: BN[];
   mapOwn?: BagMap;
 }
 
-function Summary ({ className = '', ids, mapOwn }: Props): React.ReactElement<Props> {
+function Summary ({ bags, className = '', mapOwn }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const total = useCall<BN>(api.query.bagsList.counterForListNodes);
@@ -31,8 +31,8 @@ function Summary ({ className = '', ids, mapOwn }: Props): React.ReactElement<Pr
   return (
     <SummaryBox className={className}>
       <CardSummary label={t<string>('total bags')}>
-        {ids
-          ? formatNumber(ids.length)
+        {bags
+          ? formatNumber(bags.length)
           : <Spinner noLabel />
         }
       </CardSummary>

packages/page-staking/src/Bags/index.tsx

@@ -11,7 +11,6 @@ import { Button, Table, ToggleGroup } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import Bag from './Bag';
 import Summary from './Summary';
-import useBagsIds from './useBagsIds';
 import useBagsList from './useBagsList';
 import useBagsNodes from './useBagsNodes';
 
@@ -34,8 +33,7 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
     [ownStashes]
   );
   const [filterIndex, setFilterIndex] = useState(() => stashIds.length ? 0 : 1);
-  const ids = useBagsIds();
-  const list = useBagsList(ids);
+  const bags = useBagsList();
   const mapOwn = useBagsNodes(stashIds);
 
   const headerRef = useRef([
@@ -57,14 +55,14 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
     [stashIds, t]
   );
   const filtered = useMemo(
-    () => list && mapOwn && sortNodes(list, mapOwn, !filterIndex),
-    [filterIndex, list, mapOwn]
+    () => bags && mapOwn && sortNodes(bags, mapOwn, !filterIndex),
+    [bags, filterIndex, mapOwn]
   );
 
   return (
     <>
       <Summary
-        ids={ids}
+        bags={bags}
         mapOwn={mapOwn}
       />
       <Button.Group>

packages/page-staking/src/Bags/useBagsIds.ts

@@ -1,20 +0,0 @@
-// Copyright 2017-2022 @polkadot/app-staking authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { StorageKey, u64 } from '@polkadot/types';
-import type { BN } from '@polkadot/util';
-
-import { createNamedHook, useApi, useMapKeys } from '@polkadot/react-hooks';
-
-const KEY_OPTS = {
-  transform: (keys: StorageKey<[u64]>[]): BN[] =>
-    keys.map(({ args: [id] }) => id)
-};
-
-function useBagsIdsImpl (): BN[] | undefined {
-  const { api } = useApi();
-
-  return useMapKeys(api.query.bagsList.listBags, KEY_OPTS);
-}
-
-export default createNamedHook('useBagsIds', useBagsIdsImpl);

packages/page-staking/src/Bags/useBagsList.ts

@@ -1,16 +1,21 @@
 // Copyright 2017-2022 @polkadot/app-staking authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Option } from '@polkadot/types';
+import type { Option, StorageKey, u64 } from '@polkadot/types';
 import type { PalletBagsListListBag } from '@polkadot/types/lookup';
 import type { BN } from '@polkadot/util';
 import type { BagInfo } from './types';
 
 import { useEffect, useState } from 'react';
 
-import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall, useMapKeys } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
+const KEY_OPTS = {
+  transform: (keys: StorageKey<[u64]>[]): BN[] =>
+    keys.map(({ args: [id] }) => id)
+};
+
 const MULTI_OPTS = {
   transform: ([[ids], opts]: [[BN[]], Option<PalletBagsListListBag>[]]): BagInfo[] => {
     const sorted = ids
@@ -45,9 +50,10 @@ function merge (prev: BagInfo[] | undefined, curr: BagInfo[]): BagInfo[] {
     );
 }
 
-function useBagsListImpl (ids?: BN[]): BagInfo[] | undefined {
+function useBagsListImpl (): BagInfo[] | undefined {
   const { api } = useApi();
   const [result, setResult] = useState<BagInfo[] | undefined>();
+  const ids = useMapKeys(api.query.bagsList.listBags, KEY_OPTS);
   const query = useCall(ids && ids.length !== 0 && api.query.bagsList.listBags.multi, [ids], MULTI_OPTS);
 
   useEffect((): void => {