Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: common call multi api when click only tab #3479

Merged
merged 1 commit into from
May 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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>[] = [
Expand Down
9 changes: 6 additions & 3 deletions src/components/StakeDetail/StakeTab/Tabs/InstantaneousTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 (
Expand Down
9 changes: 5 additions & 4 deletions src/components/StakeDetail/StakeTab/Tabs/StakeHistoryTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>[] = [
Expand Down
19 changes: 15 additions & 4 deletions src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 (
Expand Down
10 changes: 5 additions & 5 deletions src/components/StakeDetail/StakeTab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
}
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
17 changes: 10 additions & 7 deletions src/components/TabularView/StakeTab/Tabs/DelegationTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down
12 changes: 8 additions & 4 deletions src/components/TabularView/StakeTab/Tabs/DeregistrationTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>[] = [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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 (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>[] = [
{
Expand Down
16 changes: 10 additions & 6 deletions src/components/TabularView/StakeTab/Tabs/WithdrawalHistoryTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>[] = [
{
Expand Down
Loading
Loading