fix: Loading delegations on account details page [DEV-4215] (#184)

* Fix issue with loading delegations * Fix linter issue
cheqd · Sep 10, 2024 · 2c1d4d5 · 2c1d4d5
1 parent e3e2a6d
commit 2c1d4d5
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 67 deletions.
diff --git a/packages/ui/src/screens/account_details/components/staking/hooks.ts b/packages/ui/src/screens/account_details/components/staking/hooks.ts
@@ -157,25 +157,19 @@ export const useStaking = (
       offset: delegationsPage * ROWS_PER_PAGE,
     },
   });
+
+  const [delegationsPagination, setDelegationsPagination] = useState<number | undefined>();
+
   useEffect(() => {
-    if (delegationsLoading) return;
     if (delegationsError) {
       delegationsRefetch({ pagination: false });
     }
-  }, [delegationsError, delegationsLoading, delegationsRefetch]);
-  useAccountDelegationsQuery({
-    variables: {
-      address,
-      limit: ROWS_PER_PAGE,
-      offset: (delegationsPage + 1) * ROWS_PER_PAGE,
-    },
-  });
+  }, [delegationsError, delegationsRefetch]);
 
-  const [delegationsPagination, setDelegationsPagination] = useState<number | undefined>();
   const {
-    data: dData,
-    error: dError,
-    refetch: dRefetch,
+    data: paginationData,
+    error: paginationError,
+    refetch: paginationRefetch,
   } = useAccountDelegationsQuery({
     variables: {
       address,
@@ -185,13 +179,15 @@ export const useStaking = (
     },
     skip: delegationsPagination !== undefined,
   });
+
   useEffect(() => {
-    if (dError) {
-      dRefetch();
-    } else if (dData) {
-      setDelegationsPagination(dData?.delegations?.pagination?.total ?? 0);
+    if (paginationError) {
+      console.error('Error fetching pagination data:', paginationError);
+      paginationRefetch();
+    } else if (paginationData) {
+      setDelegationsPagination(paginationData?.delegations?.pagination?.total ?? 0);
     }
-  }, [dData, dError, dRefetch]);
+  }, [paginationData, paginationError, paginationRefetch]);
 
   // =====================================
   // redelegations
@@ -208,25 +204,20 @@ export const useStaking = (
       offset: redelegationsPage * ROWS_PER_PAGE,
     },
   });
+
+  const [redelegationsPagination, setRedelegationsPagination] = useState<number | undefined>();
+
   useEffect(() => {
-    if (redelegationsLoading) return;
     if (redelegationsError) {
+      console.error('Error fetching redelegations:', redelegationsError);
       redelegationsRefetch({ pagination: false });
     }
-  }, [redelegationsError, redelegationsLoading, redelegationsRefetch]);
-  useAccountRedelegationsQuery({
-    variables: {
-      address,
-      limit: ROWS_PER_PAGE,
-      offset: (redelegationsPage + 1) * ROWS_PER_PAGE,
-    },
-  });
+  }, [redelegationsError, redelegationsRefetch]);
 
-  const [redelegationsPagination, setRedelegationsPagination] = useState<number | undefined>();
   const {
-    data: rData,
-    error: rError,
-    refetch: rRefetch,
+    data: redelegationsPaginationData,
+    error: redelegationsPaginationError,
+    refetch: redelegationsPaginationRefetch,
   } = useAccountRedelegationsQuery({
     variables: {
       address,
@@ -236,13 +227,17 @@ export const useStaking = (
     },
     skip: redelegationsPagination !== undefined,
   });
+
   useEffect(() => {
-    if (rError) {
-      rRefetch();
-    } else if (rData) {
-      setRedelegationsPagination(rData?.redelegations?.pagination?.total ?? 0);
+    if (redelegationsPaginationError) {
+      console.error('Error fetching redelegations pagination data:', redelegationsPaginationError);
+      redelegationsPaginationRefetch();
+    } else if (redelegationsPaginationData) {
+      setRedelegationsPagination(
+        redelegationsPaginationData?.redelegations?.pagination?.total ?? 0
+      );
     }
-  }, [rData, rError, rRefetch]);
+  }, [redelegationsPaginationData, redelegationsPaginationError, redelegationsPaginationRefetch]);
 
   // =====================================
   // unbondings
@@ -259,25 +254,20 @@ export const useStaking = (
       offset: unbondingsPage * ROWS_PER_PAGE,
     },
   });
+
+  const [undelegationsPagination, setUndelegationsPagination] = useState<number | undefined>();
+
   useEffect(() => {
-    if (undelegationsLoading) return;
     if (undelegationsError) {
+      console.error('Error fetching undelegations:', undelegationsError);
       undelegationsRefetch({ pagination: false });
     }
-  }, [undelegationsError, undelegationsLoading, undelegationsRefetch]);
-  useAccountUndelegationsQuery({
-    variables: {
-      address,
-      limit: ROWS_PER_PAGE,
-      offset: (unbondingsPage + 1) * ROWS_PER_PAGE,
-    },
-  });
+  }, [undelegationsError, undelegationsRefetch]);
 
-  const [undelegationsPagination, setUndelegationsPagination] = useState<number | undefined>();
   const {
-    data: uData,
-    error: uError,
-    refetch: uRefetch,
+    data: undelegationsPaginationData,
+    error: undelegationsPaginationError,
+    refetch: undelegationsPaginationRefetch,
   } = useAccountUndelegationsQuery({
     variables: {
       address,
@@ -287,14 +277,19 @@ export const useStaking = (
     },
     skip: undelegationsPagination !== undefined,
   });
+
   useEffect(() => {
-    if (uError) {
-      uRefetch();
-    } else if (uData) {
-      setUndelegationsPagination(uData?.undelegations?.pagination?.total ?? 0);
+    if (undelegationsPaginationError) {
+      console.error('Error fetching undelegations pagination data:', undelegationsPaginationError);
+      undelegationsPaginationRefetch();
+    } else if (undelegationsPaginationData) {
+      setUndelegationsPagination(
+        undelegationsPaginationData?.undelegations?.pagination?.total ?? 0
+      );
     }
-  }, [uData, uError, uRefetch]);
+  }, [undelegationsPaginationData, undelegationsPaginationError, undelegationsPaginationRefetch]);
 
+  // Handle tab change
   const handleTabChange = useCallback(
     (_event: SyntheticEvent<Element, globalThis.Event>, newValue: number) => {
       setState((prevState) => {

diff --git a/packages/ui/src/screens/account_details/components/staking/index.tsx b/packages/ui/src/screens/account_details/components/staking/index.tsx
@@ -8,7 +8,6 @@ import Unbondings from '@/screens/account_details/components/staking/components/
 import { useStaking } from '@/screens/account_details/components/staking/hooks';
 import useStyles from '@/screens/account_details/components/staking/styles';
 import { formatCount } from '@/screens/validator_details/components/staking';
-import Loading from '@/components/loading';
 import { useAccountRewards } from '@/screens/account_details/hooks';
 
 type StakingProps = {
@@ -53,18 +52,12 @@ const Staking: FC<StakingProps> = ({ className }) => {
 
   return (
     <Box className={cx(classes.root, className)}>
-      {state.loading ? (
-        <Loading />
-      ) : (
-        <>
-          <Tabs tab={stakingState.tab} handleTabChange={handleTabChange} tabs={tabs} />
-          {tabs.map((x) => (
-            <TabPanel key={x.id} index={x.id} value={stakingState.tab}>
-              {x.component}
-            </TabPanel>
-          ))}
-        </>
-      )}
+      <Tabs tab={stakingState.tab} handleTabChange={handleTabChange} tabs={tabs} />
+      {tabs.map((x) => (
+        <TabPanel key={x.id} index={x.id} value={stakingState.tab}>
+          {x.component}
+        </TabPanel>
+      ))}
     </Box>
   );
 };