Add trigger for bags refresh (#7263)

* Add trigger for bags refresh

* isLoading pass-through

* Adjust

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

@@ -5,9 +5,10 @@ import type { u64 } from '@polkadot/types';
 import type { PalletBagsListListBag } from '@polkadot/types/lookup';
 import type { StashNode } from './types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { AddressMini, Spinner } from '@polkadot/react-components';
+import { useIncrement } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 import Stash from './Stash';
@@ -20,22 +21,27 @@ interface Props {
   stashNodes?: StashNode[];
 }
 
-const NO_NODES: StashNode[] = [];
-
-export default function Bag ({ id, info, stashNodes = NO_NODES }: Props): React.ReactElement<Props> {
+export default function Bag ({ id, info, stashNodes }: Props): React.ReactElement<Props> {
   const [isLoading, setLoading] = useState(true);
-  const { isCompleted, list } = useBagEntries(stashNodes.length ? info.head.unwrapOr(null) : null);
-  const bonded = useBonded(isCompleted && list);
+  const [trigger, doRefresh] = useIncrement(1);
+  const headId = useMemo(
+    () => stashNodes && stashNodes.length
+      ? info.head.unwrapOr(null)
+      : null,
+    [info, stashNodes]
+  );
+  const list = useBagEntries(headId, trigger);
+  const bonded = useBonded(list);
 
   useEffect((): void => {
     setLoading(
-      stashNodes.length
-        ? isCompleted
+      stashNodes && stashNodes.length
+        ? list
           ? !bonded
           : true
         : false
     );
-  }, [bonded, isCompleted, list, stashNodes]);
+  }, [bonded, list, stashNodes]);
 
   return (
     <tr>
@@ -45,6 +51,8 @@ export default function Bag ({ id, info, stashNodes = NO_NODES }: Props): React.
       <td className='address'>
         {stashNodes?.map(({ stashId }) => (
           <Stash
+            doRefresh={doRefresh}
+            isLoading={isLoading}
             key={stashId}
             list={bonded}
             stashId={stashId}

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

@@ -13,6 +13,8 @@ import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
+  doRefresh: () => void;
+  isLoading: boolean;
   list?: ListNode[];
   stashId: string;
 }
@@ -24,7 +26,7 @@ function findEntry (stashId: string, list: ListNode[] = []): [ListNode | null, b
   return [entry, !!other, entry && other ? entry.index - other.index : 0];
 }
 
-function Stash ({ className, list, stashId }: Props): React.ReactElement<Props> {
+function Stash ({ className, doRefresh, isLoading, list, stashId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [stashInfo, canJump, jumpCount] = useMemo(
@@ -32,8 +34,6 @@ function Stash ({ className, list, stashId }: Props): React.ReactElement<Props>
     [list, stashId]
   );
 
-  // FIXME The button should disappear when we have moved to the correct position
-
   return (
     <div className={className}>
       <AddressMini
@@ -43,8 +43,9 @@ function Stash ({ className, list, stashId }: Props): React.ReactElement<Props>
       <TxButton
         accountId={stashInfo?.stashId}
         icon='caret-up'
-        isDisabled={!canJump}
+        isDisabled={!canJump || isLoading}
         label={t<string>('Move up {{jumpCount}}', { replace: { jumpCount } })}
+        onSuccess={doRefresh}
         params={[stashInfo?.jump]}
         tx={api.tx.bagsList.putInFrontOf}
       />

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

@@ -15,19 +15,20 @@ interface Result {
 }
 
 const EMPTY: [AccountId32 | null, Result] = [null, { isCompleted: false, list: [] }];
+const EMPTY_LIST: AccountId32[] = [];
 
-function useBagEntriesImpl (headId: AccountId32 | null): Result {
+function useBagEntriesImpl (headId: AccountId32 | null, trigger: number): AccountId32[] {
   const { api } = useApi();
-  const [[currId, result], setCurrent] = useState<[AccountId32 | null, Result]>(EMPTY);
+  const [[currId, { isCompleted, list }], setCurrent] = useState<[AccountId32 | null, Result]>(EMPTY);
   const node = useCall<Option<PalletBagsListListNode>>(!!currId && api.query.bagsList.listNodes, [currId]);
 
   useEffect(
     () => setCurrent(
-      headId
+      headId && trigger
         ? [headId, { isCompleted: false, list: [headId] }]
         : [null, { isCompleted: true, list: [] }]
     ),
-    [headId]
+    [headId, trigger]
   );
 
   useEffect((): void => {
@@ -44,7 +45,9 @@ function useBagEntriesImpl (headId: AccountId32 | null): Result {
     }
   }, [node]);
 
-  return result;
+  return isCompleted
+    ? list
+    : EMPTY_LIST;
 }
 
 export default createNamedHook('useBagEntries', useBagEntriesImpl);