fix: adjust stake data refresh

DistributedCollective · Sep 17, 2023 · bc718f5 · bc718f5
1 parent 857c5ab
commit bc718f5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/...frontend/src/app/5_pages/StakePage/components/AdjustStakeRenderer/AdjustStakeRenderer.tsx b/...frontend/src/app/5_pages/StakePage/components/AdjustStakeRenderer/AdjustStakeRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useReducer } from 'react';
+import React, { FC, useCallback, useReducer } from 'react';
 
 import { t } from 'i18next';
 
@@ -18,16 +18,24 @@ import { StakeItem } from '../StakesFrame/StakesFrame.types';
 
 type AdjustStakeRendererProps = {
   stake: StakeItem;
+  onSuccess: () => void;
 };
 
 export const AdjustStakeRenderer: FC<AdjustStakeRendererProps> = ({
   stake,
+  onSuccess,
 }) => {
   const [openCreateStakeDialog, toggleAdjustStakeDialog] = useReducer(
     v => !v,
     false,
   );
 
+  const onAdjustSuccess = useCallback(() => {
+    console.log('onAdjustSuccess');
+    onSuccess();
+    toggleAdjustStakeDialog();
+  }, [onSuccess]);
+
   return (
     <div className="flex lg:justify-end">
       <Button
@@ -48,7 +56,7 @@ export const AdjustStakeRenderer: FC<AdjustStakeRendererProps> = ({
           onClose={toggleAdjustStakeDialog}
         />
         <DialogBody>
-          <AdjustStakeForm stake={stake} onSuccess={toggleAdjustStakeDialog} />
+          <AdjustStakeForm stake={stake} onSuccess={onAdjustSuccess} />
         </DialogBody>
       </Dialog>
     </div>

diff --git a/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.constants.tsx b/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.constants.tsx
@@ -15,7 +15,7 @@ import { VotingPowerCellRenderer } from './components/VotingPowerCellRenderer';
 
 const rskExplorerUrl = getRskExplorerUrl();
 
-export const COLUMNS_CONFIG = [
+export const COLUMNS_CONFIG = (onSuccess: () => void) => [
   {
     id: 'stakeAmount',
     title: t(translations.stakePage.table.stakeAmount),
@@ -55,7 +55,8 @@ export const COLUMNS_CONFIG = [
   {
     id: 'actions',
     title: ' ',
-    cellRenderer: (item: StakeItem) => AdjustStakeRenderer({ stake: item }),
+    cellRenderer: (item: StakeItem) =>
+      AdjustStakeRenderer({ stake: item, onSuccess }),
     labelClassName: 'hidden lg:table-cell',
     valueClassName: 'w-full lg:w-auto',
     className: 'flex',

diff --git a/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.tsx b/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.tsx
@@ -17,7 +17,7 @@ const pageSize = DEFAULT_PAGE_SIZE;
 
 export const StakesFrame: FC = () => {
   const { account } = useAccount();
-  const { stakes, loading } = useGetStakes();
+  const { stakes, loading, refetch } = useGetStakes();
   const { balance } = useGetStakingBalanceOf(account);
 
   const hasStakedValue = useMemo(() => Number(balance) > 0, [balance]);
@@ -48,6 +48,8 @@ export const StakesFrame: FC = () => {
     [loading, paginatedStakes?.length, stakes?.length],
   );
 
+  const columns = useMemo(() => COLUMNS_CONFIG(refetch), [refetch]);
+
   return (
     <div className="flex flex-col mb-10">
       <div className="flex justify-between items-center mb-3 md:mb-6">
@@ -61,7 +63,7 @@ export const StakesFrame: FC = () => {
 
       <div className="bg-gray-80 py-4 px-4 rounded">
         <Table
-          columns={COLUMNS_CONFIG}
+          columns={columns}
           rows={paginatedStakes}
           rowTitle={generateRowTitle}
           isLoading={loading}

diff --git a/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/hooks/useGetStakes.ts b/apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/hooks/useGetStakes.ts
@@ -68,5 +68,5 @@ export const useGetStakes = () => {
     prevBlockRef.current = block;
   }, [block, account, updateStakes]);
 
-  return { stakes, loading };
+  return { stakes, loading, refetch: updateStakes };
 };