Mrege prev/curr loadable bags (#7268)

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

@@ -41,13 +41,13 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
   const sorted = useMemo(
     () => list && nodes
       ? [...list].sort((a, b) =>
-        nodes[a[0]]
-          ? nodes[b[0]]
-            ? b[1].cmp(a[1])
+        nodes[a.key]
+          ? nodes[b.key]
+            ? b.id.cmp(a.id)
             : -1
-          : nodes[b[0]]
+          : nodes[b.key]
             ? 1
-            : b[1].cmp(a[1])
+            : b.id.cmp(a.id)
       )
       : null,
     [list, nodes]
@@ -61,7 +61,7 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
         emptySpinner={t<string>('Retrieving all available bags, this will take some time')}
         header={headerRef.current}
       >
-        {sorted && sorted.map(([key, id, info]) => (
+        {sorted && sorted.map(({ id, info, key }) => (
           <Bag
             id={id}
             info={info}

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

@@ -4,23 +4,45 @@
 import type { Option, u64 } from '@polkadot/types';
 import type { PalletBagsListListBag } from '@polkadot/types/lookup';
 
+import { useEffect, useState } from 'react';
+
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-type Result = [string, u64, PalletBagsListListBag];
+interface Result {
+  id: u64;
+  info: PalletBagsListListBag;
+  key: string;
+}
 
 const multiOptions = {
   transform: ([[ids], opts]: [[u64[]], Option<PalletBagsListListBag>[]]): Result[] =>
     ids
       .map((id, index): [u64, Option<PalletBagsListListBag>] => [id, opts[index]])
       .filter(([, o]) => o.isSome)
-      .map(([id, o]): Result => [id.toString(), id, o.unwrap()]),
+      .map(([id, o]): Result => ({ id, info: o.unwrap(), key: id.toString() })),
   withParamsTransform: true
 };
 
+function merge (prev: Result[] | undefined, curr: Result[]): Result[] {
+  return !prev || curr.length !== prev.length
+    ? curr
+    : curr.map((q, i) =>
+      JSON.stringify(q) === JSON.stringify(prev[i])
+        ? prev[i]
+        : q
+    );
+}
+
 function useBagsListImpl (ids?: u64[]): Result[] | undefined {
   const { api } = useApi();
+  const [result, setResult] = useState<Result[] | undefined>();
+  const query = useCall(ids && ids.length !== 0 && api.query.bagsList.listBags.multi, [ids], multiOptions);
 
-  return useCall(ids && ids.length !== 0 && api.query.bagsList.listBags.multi, [ids], multiOptions);
+  useEffect((): void => {
+    query && setResult((prev) => merge(prev, query));
+  }, [query]);
+
+  return result;
 }
 
 export default createNamedHook('useBagsList', useBagsListImpl);