Merge pull request #3479 from cardano-foundation/fix/common-call-api-…

…click-tab fix: common call multi api when click only tab
cardano-foundation · May 17, 2024 · 407e595 · 407e595
2 parents 111af99 + 4b74cb4
commit 407e595
Show file tree

Hide file tree

Showing 19 changed files with 126 additions and 74 deletions.
diff --git a/src/components/StakeDetail/StakeTab/Tabs/DelegationHistoryTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/DelegationHistoryTab.tsx
@@ -12,17 +12,18 @@ import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
 
 import { StyledLink } from "../styles";
 
-const DelegationHistoryTab: React.FC<{ stakeAddress?: string; isMobile?: boolean }> = ({
+const DelegationHistoryTab: React.FC<{ stakeAddress?: string; isMobile?: boolean; tabActive: TabStakeDetail }> = ({
   isMobile = false,
-  stakeAddress
+  stakeAddress,
+  tabActive
 }) => {
   const { t } = useTranslation();
   const { search } = useLocation();
   const history = useHistory();
   const pageInfo = getPageInfo(search);
   const fetchData = useFetchList<DelegationHistory>(
-    stakeAddress ? `${API.STAKE.DETAIL}/${stakeAddress}/delegation-history` : "",
-    pageInfo
+    stakeAddress && tabActive === "delegation" ? `${API.STAKE.DETAIL}/${stakeAddress}/delegation-history` : "",
+    { ...pageInfo, tabActive }
   );
 
   const columns: Column<DelegationHistory>[] = [

diff --git a/src/components/StakeDetail/StakeTab/Tabs/InstantaneousTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/InstantaneousTab.tsx
@@ -14,7 +14,10 @@ import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
 
 import { StyledLink } from "../styles";
 
-const InstantaneousTab: React.FC<{ stakeAddress?: string }> = ({ stakeAddress }) => {
+const InstantaneousTab: React.FC<{ stakeAddress?: string; tabActive: TabStakeDetail }> = ({
+  stakeAddress,
+  tabActive
+}) => {
   const { t } = useTranslation();
   const { search } = useLocation();
   const history = useHistory();
@@ -72,8 +75,8 @@ const InstantaneousTab: React.FC<{ stakeAddress?: string }> = ({ stakeAddress })
     }
   ];
   const fetchData = useFetchList<Instantaneous>(
-    stakeAddress ? `${API.STAKE.DETAIL}/${stakeAddress}/instantaneous-rewards` : "",
-    pageInfo
+    stakeAddress && tabActive === "instantaneous" ? `${API.STAKE.DETAIL}/${stakeAddress}/instantaneous-rewards` : "",
+    { ...pageInfo, tabActive }
   );
 
   return (

diff --git a/src/components/StakeDetail/StakeTab/Tabs/StakeHistoryTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/StakeHistoryTab.tsx
@@ -19,9 +19,10 @@ import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
 
 import { StyledLink } from "../styles";
 
-const StakeHistoryTab: React.FC<{ stakeAddress?: string; isMobile?: boolean }> = ({
+const StakeHistoryTab: React.FC<{ stakeAddress?: string; isMobile?: boolean; tabActive: TabStakeDetail }> = ({
   isMobile = false,
-  stakeAddress
+  stakeAddress,
+  tabActive
 }) => {
   const { t } = useTranslation();
   const { search } = useLocation();
@@ -30,8 +31,8 @@ const StakeHistoryTab: React.FC<{ stakeAddress?: string; isMobile?: boolean }> =
   const theme = useTheme();
 
   const fetchData = useFetchList<StakeHistory>(
-    stakeAddress ? `${API.STAKE.DETAIL}/${stakeAddress}/stake-history` : "",
-    pageInfo
+    stakeAddress && tabActive === "stake-key" ? `${API.STAKE.DETAIL}/${stakeAddress}/stake-history` : "",
+    { ...pageInfo, tabActive }
   );
 
   const columns: Column<StakeHistory>[] = [

diff --git a/src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx
@@ -21,8 +21,17 @@ import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
 
 import { Img, StyledContainer, StyledLink } from "./styles";
 
-const TransactionTab: React.FC<{ stakeAddress?: string }> = ({ stakeAddress }) => {
-  return <TransactionListFull url={`${API.STAKE.DETAIL}/${stakeAddress}/txs`} showTitle={false} />;
+const TransactionTab: React.FC<{ stakeAddress?: string; tabActive: TabStakeDetail }> = ({
+  stakeAddress,
+  tabActive
+}) => {
+  return (
+    <TransactionListFull
+      tabActive={tabActive}
+      url={tabActive === "transactions" ? `${API.STAKE.DETAIL}/${stakeAddress}/txs` : ""}
+      showTitle={false}
+    />
+  );
 };
 
 interface TransactionListFullProps {
@@ -31,20 +40,22 @@ interface TransactionListFullProps {
   openDetail?: (_: MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => void;
   selected?: string | null;
   showTitle?: boolean;
+  tabActive: TabStakeDetail;
 }
 
 const TransactionListFull: React.FC<TransactionListFullProps> = ({
   underline = false,
   url,
   openDetail,
   selected,
-  showTitle = true
+  showTitle = true,
+  tabActive
 }) => {
   const { t } = useTranslation();
   const { search } = useLocation();
   const history = useHistory();
   const pageInfo = getPageInfo(search);
-  const fetchData = useFetchList<Transactions>(url, pageInfo);
+  const fetchData = useFetchList<Transactions>(url, { ...pageInfo, tabActive });
   const theme = useTheme();
   const { isMobile } = useScreen();
 

diff --git a/src/components/StakeDetail/StakeTab/Tabs/WithdrawalHistoryTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/WithdrawalHistoryTab.tsx
@@ -14,7 +14,10 @@ import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
 
 import { StyledLink } from "../styles";
 
-const WithdrawalHistoryTab: React.FC<{ stakeAddress?: string }> = ({ stakeAddress }) => {
+const WithdrawalHistoryTab: React.FC<{ stakeAddress?: string; tabActive: TabStakeDetail }> = ({
+  stakeAddress,
+  tabActive
+}) => {
   const { t } = useTranslation();
   const { search } = useLocation();
   const history = useHistory();
@@ -72,8 +75,8 @@ const WithdrawalHistoryTab: React.FC<{ stakeAddress?: string }> = ({ stakeAddres
     }
   ];
   const fetchData = useFetchList<WithdrawalHistory>(
-    stakeAddress ? `${API.STAKE.DETAIL}/${stakeAddress}/withdrawal-history` : "",
-    pageInfo
+    stakeAddress && tabActive === "withdrawal" ? `${API.STAKE.DETAIL}/${stakeAddress}/withdrawal-history` : "",
+    { ...pageInfo, tabActive }
   );
 
   return (

diff --git a/src/components/StakeDetail/StakeTab/index.tsx b/src/components/StakeDetail/StakeTab/index.tsx
@@ -40,31 +40,31 @@ const StakeTab: React.FC<{ stakeAddress?: string }> = ({ stakeAddress }) => {
       icon: DelegationHistoryIcon,
       label: t("tab.DelegationHistory"),
       key: "delegation",
-      component: <DelegationHistoryTab stakeAddress={stakeAddress} isMobile={isMobile} />
+      component: <DelegationHistoryTab tabActive={tabActive || ""} stakeAddress={stakeAddress} isMobile={isMobile} />
     },
     {
       icon: StakeKeyHistoryIcon,
       label: t("tab.stakeAddressHistory"),
       key: "stake-key",
-      component: <StakeHistoryTab stakeAddress={stakeAddress} isMobile={isMobile} />
+      component: <StakeHistoryTab tabActive={tabActive || ""} stakeAddress={stakeAddress} isMobile={isMobile} />
     },
     {
       icon: WithdrawalHistoryIcon,
       label: t("tab.withdrawalHistory"),
       key: "withdrawal",
-      component: <WithdrawalHistoryTab stakeAddress={stakeAddress} />
+      component: <WithdrawalHistoryTab tabActive={tabActive || ""} stakeAddress={stakeAddress} />
     },
     {
       icon: InstantaneousHistoryIcon,
       label: t("tab.instantaneousRewards"),
       key: "instantaneous",
-      component: <InstantaneousTab stakeAddress={stakeAddress} />
+      component: <InstantaneousTab tabActive={tabActive || ""} stakeAddress={stakeAddress} />
     },
     {
       icon: TransactionIcon,
       label: t("tab.transactions"),
       key: "transactions",
-      component: <TransactionTab stakeAddress={stakeAddress} />
+      component: <TransactionTab tabActive={tabActive || ""} stakeAddress={stakeAddress} />
     }
   ];
 

diff --git a/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/DeregsitrationTab.tsx b/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/DeregsitrationTab.tsx
@@ -22,7 +22,7 @@ import { DeregistrationCertificateModal } from "../../Deregistration";
 const DeregsitrationTab = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { poolId = "" } = useParams<{ poolId: string }>();
+  const { poolId = "", tab } = useParams<{ poolId: string; tab: string }>();
   const history = useHistory();
 
   const { pageInfo, setSort } = usePageInfo();
@@ -70,9 +70,10 @@ const DeregsitrationTab = () => {
   ];
 
   const fetchData = useFetchList<SPODeregistrationTabpular>(
-    poolId ? API.SPO_LIFECYCLE.SPO_DEREGISTRATION(poolId) : "",
+    poolId && tab === "deregistration" ? API.SPO_LIFECYCLE.SPO_DEREGISTRATION(poolId) : "",
     {
-      ...pageInfo
+      ...pageInfo,
+      tab
     }
   );
 

diff --git a/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/OperatorReward.tsx b/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/OperatorReward.tsx
@@ -18,7 +18,7 @@ import { AmountADARow } from "./styles";
 
 const OperatorRewardTab = () => {
   const { t } = useTranslation();
-  const { poolId = "" } = useParams<{ poolId: string }>();
+  const { poolId = "", tab } = useParams<{ poolId: string; tab: string }>();
   const history = useHistory();
   const { pageInfo, setSort } = usePageInfo();
 
@@ -64,9 +64,13 @@ const OperatorRewardTab = () => {
     }
   ];
 
-  const fetchData = useFetchList<SPO_REWARD>(poolId ? API.SPO_LIFECYCLE.REWARD(poolId) : "", {
-    ...pageInfo
-  });
+  const fetchData = useFetchList<SPO_REWARD>(
+    poolId && tab === "operator-rewards" ? API.SPO_LIFECYCLE.REWARD(poolId) : "",
+    {
+      ...pageInfo,
+      tab
+    }
+  );
 
   return (
     <Box>

diff --git a/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/PoolRegistrationTab.tsx b/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/PoolRegistrationTab.tsx
@@ -24,7 +24,7 @@ import { RegistrationCertificateModal } from "../../Registration/RegistrationCer
 const PoolRegistrationTab = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { poolId = "" } = useParams<{ poolId: string }>();
+  const { poolId = "", tab } = useParams<{ poolId: string; tab: string }>();
 
   const history = useHistory();
   const { pageInfo, setSort } = usePageInfo();
@@ -90,9 +90,10 @@ const PoolRegistrationTab = () => {
   ];
 
   const fetchData = useFetchList<SPORegistrationTabpular>(
-    poolId ? API.SPO_LIFECYCLE.SPO_REGISTRATION_LIST(poolId) : "",
+    poolId && tab === "registration" ? API.SPO_LIFECYCLE.SPO_REGISTRATION_LIST(poolId) : "",
     {
-      ...pageInfo
+      ...pageInfo,
+      tab
     }
   );
 

diff --git a/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/PoolUpdateTab.tsx b/src/components/StakingLifeCycle/SPOLifecycle/Tablular/Tabs/PoolUpdateTab.tsx
@@ -23,7 +23,7 @@ import { ClickAbleLink } from "./styles";
 const PoolUpdateTab = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { poolId = "" } = useParams<{ poolId: string }>();
+  const { poolId = "", tab } = useParams<{ poolId: string; tab: string }>();
   const history = useHistory();
 
   const [selectedValue, setSelectedValue] = useState<PoolUpdateDetail | null>(null);
@@ -72,9 +72,13 @@ const PoolUpdateTab = () => {
     }
   ];
 
-  const fetchData = useFetchList<PoolUpdateDetail>(poolId ? API.SPO_LIFECYCLE.POOL_UPDATE_LIST(poolId) : "", {
-    ...pageInfo
-  });
+  const fetchData = useFetchList<PoolUpdateDetail>(
+    poolId && tab === "pool-updates" ? API.SPO_LIFECYCLE.POOL_UPDATE_LIST(poolId) : "",
+    {
+      ...pageInfo,
+      tab
+    }
+  );
 
   return (
     <Box>

diff --git a/src/components/TabularView/StakeTab/Tabs/DelegationTab.tsx b/src/components/TabularView/StakeTab/Tabs/DelegationTab.tsx
@@ -28,19 +28,22 @@ const DelegationTab = () => {
   const { t } = useTranslation();
   const theme = useTheme();
   const detailData = useContext(DelegatorDetailContext);
-  const { stakeId } = useParams<{ stakeId: string }>();
+  const { stakeId, tab } = useParams<{ stakeId: string; tab: string }>();
   const history = useHistory();
   const { pageInfo, setSort } = usePageInfo();
 
   const [selected, setSelected] = useState<string>("");
   const [params, setParams] = useState<FilterParams>({});
 
-  const fetchData = useFetchList<DelegationItem>(stakeId ? API.STAKE_LIFECYCLE.DELEGATION(stakeId) : "", {
-    ...pageInfo,
-    ...params,
-    txHash: params.search
-  });
-
+  const fetchData = useFetchList<DelegationItem>(
+    stakeId && tab === "delegation" ? API.STAKE_LIFECYCLE.DELEGATION(stakeId) : "",
+    {
+      ...pageInfo,
+      ...params,
+      tab,
+      txHash: params.search
+    }
+  );
   const columns: Column<DelegationItem>[] = [
     {
       title: t("glossary.txHash"),

diff --git a/src/components/TabularView/StakeTab/Tabs/DeregistrationTab.tsx b/src/components/TabularView/StakeTab/Tabs/DeregistrationTab.tsx
@@ -24,14 +24,18 @@ import { StyledLink, TableSubTitle } from "../styles";
 const DeregistrationTab = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { stakeId } = useParams<{ stakeId: string }>();
+  const { stakeId, tab } = useParams<{ stakeId: string; tab: string }>();
   const history = useHistory();
   const { pageInfo, setSort } = usePageInfo();
   const [openModal, setOpenModal] = useState(false);
 
-  const fetchData = useFetchList<DeregistrationItem>(stakeId ? API.STAKE_LIFECYCLE.DEREGISTRATION(stakeId) : "", {
-    ...pageInfo
-  });
+  const fetchData = useFetchList<DeregistrationItem>(
+    stakeId && tab === "deregistration" ? API.STAKE_LIFECYCLE.DEREGISTRATION(stakeId) : "",
+    {
+      ...pageInfo,
+      tab
+    }
+  );
 
   const columns: Column<DeregistrationItem>[] = [
     {

diff --git a/src/components/TabularView/StakeTab/Tabs/RewardsDistributionTab.tsx b/src/components/TabularView/StakeTab/Tabs/RewardsDistributionTab.tsx
@@ -24,7 +24,7 @@ import { AmountADARow, StyledLink, WrapWalletLabel, WrapperDelegationTab } from
 const RewardsDistributionTab = () => {
   const { t } = useTranslation();
   const detailData = useContext(DelegatorDetailContext);
-  const { stakeId } = useParams<{ stakeId: string }>();
+  const { stakeId, tab } = useParams<{ stakeId: string; tab: string }>();
   const history = useHistory();
   const { pageInfo, setSort } = usePageInfo();
 
@@ -55,9 +55,13 @@ const RewardsDistributionTab = () => {
     }
   ];
 
-  const fetchData = useFetchList<RewardDistributionItem>(stakeId ? API.STAKE_LIFECYCLE.RECEIVED_REWARD(stakeId) : "", {
-    ...pageInfo
-  });
+  const fetchData = useFetchList<RewardDistributionItem>(
+    stakeId && tab === "rewards" ? API.STAKE_LIFECYCLE.RECEIVED_REWARD(stakeId) : "",
+    {
+      ...pageInfo,
+      tab
+    }
+  );
   const { total } = fetchData;
   return (
     <>

diff --git a/src/components/TabularView/StakeTab/Tabs/StakeRegistrationTab.tsx b/src/components/TabularView/StakeTab/Tabs/StakeRegistrationTab.tsx
@@ -24,15 +24,19 @@ import { StyledLink, TableSubTitle } from "../styles";
 const StakeRegistrationTab = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { stakeId } = useParams<{ stakeId: string }>();
+  const { stakeId, tab } = useParams<{ stakeId: string; tab: string }>();
   const history = useHistory();
 
   const { pageInfo, setSort } = usePageInfo();
 
   const [openModal, setOpenModal] = useState(false);
-  const fetchData = useFetchList<RegistrationItem>(stakeId ? API.STAKE_LIFECYCLE.REGISTRATION(stakeId) : "", {
-    ...pageInfo
-  });
+  const fetchData = useFetchList<RegistrationItem>(
+    stakeId && tab === "registration" ? API.STAKE_LIFECYCLE.REGISTRATION(stakeId) : "",
+    {
+      ...pageInfo,
+      tab
+    }
+  );
 
   const columns: Column<RegistrationItem>[] = [
     {

diff --git a/src/components/TabularView/StakeTab/Tabs/WithdrawalHistoryTab.tsx b/src/components/TabularView/StakeTab/Tabs/WithdrawalHistoryTab.tsx
@@ -26,15 +26,19 @@ import { StyledLink, TableSubTitle, WrapWalletLabel, WrapperDelegationTab } from
 const WithdrawalHistoryTab = () => {
   const { t } = useTranslation();
   const detailData = useContext(DelegatorDetailContext);
-  const { stakeId } = useParams<{ stakeId: string }>();
+  const { stakeId, tab } = useParams<{ stakeId: string; tab: string }>();
   const [params, setParams] = useState<FilterParams>({});
   const history = useHistory();
   const { pageInfo, setSort } = usePageInfo();
-  const fetchData = useFetchList<WithdrawalHistoryItem>(stakeId ? API.STAKE_LIFECYCLE.WITHDRAW(stakeId) : "", {
-    ...pageInfo,
-    ...params,
-    txHash: params.search
-  });
+  const fetchData = useFetchList<WithdrawalHistoryItem>(
+    stakeId && tab === "withdrawal-history" ? API.STAKE_LIFECYCLE.WITHDRAW(stakeId) : "",
+    {
+      ...pageInfo,
+      ...params,
+      tab,
+      txHash: params.search
+    }
+  );
 
   const columns: Column<WithdrawItem>[] = [
     {