Skip to content

Commit

Permalink
fix loaders
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sworzen1
Sworzen1 committed Apr 24, 2024
1 parent 32259c6 commit 95fd308
Show file tree
Hide file tree
Showing 7 changed files with 456 additions and 192 deletions.
74 changes: 38 additions & 36 deletions govtool/frontend/src/components/organisms/DashboardCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,46 +42,48 @@ export const DashboardCards = () => {
}

return (
<Box
sx={{
columnGap: 3,
display: "grid",
gridTemplateColumns:
screenWidth < 1280
? "repeat(1, minmax(300px, 530px))"
: screenWidth >= 1728
? "repeat(3, minmax(300px, 570px))"
: "repeat(2, minmax(300px, 530px))",
justifyContent: screenWidth < 1024 ? "center" : "flex-start",
px: screenWidth < 640 ? 2 : 5,
py: 3,
rowGap: 3,
}}
>
<DelegateDashboardCard
currentDelegation={currentDelegation}
delegateTx={pendingTransaction.delegate}
dRepID={dRepID}
votingPower={votingPower}
/>
<Box flex={1}>
<Box
sx={{
columnGap: 3,
display: "grid",
gridTemplateColumns:
screenWidth < 1280
? "repeat(1, minmax(300px, 530px))"
: screenWidth >= 1728
? "repeat(3, minmax(300px, 570px))"
: "repeat(2, minmax(300px, 530px))",
justifyContent: screenWidth < 1024 ? "center" : "flex-start",
px: screenWidth < 640 ? 2 : 5,
py: 3,
rowGap: 3,
}}
>
<DelegateDashboardCard
currentDelegation={currentDelegation}
delegateTx={pendingTransaction.delegate}
dRepID={dRepID}
votingPower={votingPower}
/>

<DRepDashboardCard
dRepIDBech32={dRepIDBech32}
pendingTransaction={pendingTransaction}
voter={voter}
/>
<DRepDashboardCard
dRepIDBech32={dRepIDBech32}
pendingTransaction={pendingTransaction}
voter={voter}
/>

<SoleVoterDashboardCard
pendingTransaction={pendingTransaction}
voter={voter}
votingPower={votingPower}
/>
<SoleVoterDashboardCard
pendingTransaction={pendingTransaction}
voter={voter}
votingPower={votingPower}
/>

<ListGovActionsDashboardCards />
<ListGovActionsDashboardCards />

<ProposeGovActionDashboardCard
createGovActionTx={pendingTransaction.createGovAction}
/>
<ProposeGovActionDashboardCard
createGovActionTx={pendingTransaction.createGovAction}
/>
</Box>
</Box>
);
};
3 changes: 0 additions & 3 deletions govtool/frontend/src/components/organisms/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,6 @@ export const Footer = () => {

return (
<>
{/* TODO: That box below should not be needed.
Footer should be aligned under shared Layout component */}
<Box sx={{ flex: 1 }} />
<Box
component="footer"
sx={{
Expand Down
213 changes: 108 additions & 105 deletions govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,118 +68,121 @@ export const DashboardGovernanceActionsCategory = () => {
return (
<Background>
<Box
display="flex"
flexDirection="column"
justifyContent="flex-start"
minHeight="100vh"
sx={{
display: "flex",
flexDirection: "column",
flex: 1,
px: isMobile ? 2 : 3.75,
}}
>
<Box flex={1}>
<Box px={isMobile ? 2 : 3.75} flex={1}>
<Link
data-testid="back-to-list-link"
sx={{
cursor: "pointer",
display: "flex",
textDecoration: "none",
margin: "12px 0 28px",
}}
onClick={() => navigate(PATHS.dashboardGovernanceActions)}
>
<img
src={ICONS.arrowRightIcon}
alt="arrow"
style={{ marginRight: "12px", transform: "rotate(180deg)" }}
/>
<Typography variant="body2" color="primary" fontWeight={400}>
{t("govActions.backToGovActions")}
</Typography>
</Link>
<DataActionsBar
{...dataActionsBarProps}
isFiltering={false}
sortOptions={GOVERNANCE_ACTIONS_SORTING}
/>
<Typography
variant="title2"
sx={{
m: "32px 0 32px",
}}
>
{getProposalTypeLabel(category ?? "")}
</Typography>
{!mappedData || isEnableLoading || isProposalsLoading ? (
<Box display="flex" justifyContent="center" py={4}>
<CircularProgress />
<Link
data-testid="back-to-list-link"
sx={{
cursor: "pointer",
display: "flex",
textDecoration: "none",
margin: "12px 0 28px",
}}
onClick={() => navigate(PATHS.dashboardGovernanceActions)}
>
<img
src={ICONS.arrowRightIcon}
alt="arrow"
style={{ marginRight: "12px", transform: "rotate(180deg)" }}
/>
<Typography variant="body2" color="primary" fontWeight={400}>
{t("govActions.backToGovActions")}
</Typography>
</Link>
<DataActionsBar
{...dataActionsBarProps}
isFiltering={false}
sortOptions={GOVERNANCE_ACTIONS_SORTING}
/>
<Typography
variant="title2"
sx={{
m: "32px 0 32px",
}}
>
{getProposalTypeLabel(category ?? "")}
</Typography>
{!mappedData || isEnableLoading || isProposalsLoading ? (
<Box
sx={{
alignItems: "center",
display: "flex",
flex: 1,
justifyContent: "center",
py: 4,
}}
>
<CircularProgress />
</Box>
) : !mappedData?.length ? (
<EmptyStateGovernanceActionsCategory
category={category}
isSearch={!!debouncedSearchText.length}
/>
) : (
<Box
columnGap="20px"
display="grid"
gridTemplateColumns={`repeat(auto-fit, minmax(${
screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
}, 1fr))`}
>
{mappedData.map((item) => (
<Box pb={4.25} key={item.txHash + item.index}>
<GovernanceActionCard
{...item}
inProgress={
pendingTransaction.vote?.resourceId ===
`${item.txHash ?? ""}${item.index ?? ""}`
}
onClick={() => {
saveScrollPosition();

if (
pendingTransaction.vote?.resourceId ===
item.txHash + item.index
) {
openInNewTab(
`https://sancho.cexplorer.io/tx/${pendingTransaction.vote.transactionHash}`,
);
} else {
navigate(
generatePath(PATHS.dashboardGovernanceActionsAction, {
proposalId: getFullGovActionId(
item.txHash,
item.index,
),
}),
{
state: {
...item,
openedFromCategoryPage: true,
},
},
);
}
}}
txHash={item.txHash}
/>
</Box>
) : !mappedData?.length ? (
<EmptyStateGovernanceActionsCategory
category={category}
isSearch={!!debouncedSearchText.length}
/>
) : (
))}
{proposalsHaveNextPage && isProposalsFetchingNextPage && (
<Box
columnGap="20px"
display="grid"
gridTemplateColumns={`repeat(auto-fit, minmax(${
screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
}, 1fr))`}
display="flex"
justifyContent="center"
py={4}
ref={loadNextPageRef}
>
{mappedData.map((item) => (
<Box pb={4.25} key={item.txHash + item.index}>
<GovernanceActionCard
{...item}
inProgress={
pendingTransaction.vote?.resourceId ===
`${item.txHash ?? ""}${item.index ?? ""}`
}
onClick={() => {
saveScrollPosition();

if (
pendingTransaction.vote?.resourceId ===
item.txHash + item.index
) {
openInNewTab(
`https://sancho.cexplorer.io/tx/${pendingTransaction.vote.transactionHash}`,
);
} else {
navigate(
generatePath(
PATHS.dashboardGovernanceActionsAction,
{
proposalId: getFullGovActionId(
item.txHash,
item.index,
),
},
),
{
state: {
...item,
openedFromCategoryPage: true,
},
},
);
}
}}
txHash={item.txHash}
/>
</Box>
))}
{proposalsHaveNextPage && isProposalsFetchingNextPage && (
<Box
display="flex"
justifyContent="center"
py={4}
ref={loadNextPageRef}
>
<CircularProgress />
</Box>
)}
<CircularProgress />
</Box>
)}
</Box>
</Box>
)}
</Box>
</Background>
);
Expand Down
Loading

0 comments on commit 95fd308

Please sign in to comment.