Skip to content

Commit

Permalink
Merge pull request #3318 from cardano-foundation/fix/fix-reset-when-s…
Browse files Browse the repository at this point in the history 
…ort-and-disable-button-filter-pools

 fix: fix reset when sort and disable button filter pools
  • Loading branch information
@Sotatek-TaiTruong
Sotatek-TaiTruong committed Apr 17, 2024
2 parents b6078a6 + 29ede2e commit 240ea6a
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 10 deletions.
18 changes: 11 additions & 7 deletions src/components/DelegationPool/DelegationList/index.tsx
View file
Expand Up @@ -50,6 +50,10 @@ const DelegationLists: React.FC = () => {

const fromPath = history.location.pathname as SpecialPath;

const handleBlankSort = () => {
history.replace({ search: stringify({ ...pageInfo, page: 1, sort: "" }) });
};

useEffect(() => {
if (fetchData.initialized) {
history.replace({ search: stringify({ ...pageInfo }), state: undefined });
Expand Down Expand Up @@ -99,7 +103,7 @@ const DelegationLists: React.FC = () => {
minWidth: "120px",
render: (r) => <Box component={"span"}>{r.poolSize != null ? formatADAFull(r.poolSize) : t("common.N/A")}</Box>,
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
},
{
Expand All @@ -112,7 +116,7 @@ const DelegationLists: React.FC = () => {
minWidth: "120px",
render: (r) => <Box component={"span"}>{formatADAFull(r.pledge)}</Box>,
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
},
{
Expand All @@ -128,7 +132,7 @@ const DelegationLists: React.FC = () => {
t("common.N/A")
),
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
},
{
Expand All @@ -137,7 +141,7 @@ const DelegationLists: React.FC = () => {
minWidth: "120px",
render: (r) => <Box component={"span"}>{r.epochBlock || 0}</Box>,
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
},
{
Expand All @@ -146,7 +150,7 @@ const DelegationLists: React.FC = () => {
key: "lifetimeBlock",
render: (r) => <Box component={"span"}>{r.lifetimeBlock || 0}</Box>,
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
},
{
Expand All @@ -162,7 +166,7 @@ const DelegationLists: React.FC = () => {
t("common.N/A")
),
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
},
{
Expand All @@ -172,7 +176,7 @@ const DelegationLists: React.FC = () => {
render: (r) =>
r.governanceParticipationRate != null ? `${formatPercent(r.governanceParticipationRate)}` : t("common.N/A"),
sort: ({ columnKey, sortValue }) => {
sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
}
}
];
Expand Down
13 changes: 10 additions & 3 deletions src/components/commons/CustomFilterMultiRange/index.tsx
View file
Expand Up @@ -48,6 +48,8 @@ interface PoolResponse {
maxGovParticipationRate?: number;
}

const defaultParams = { page: 0, size: 50, sort: "" };

const CustomFilterMultiRange: React.FC = () => {
const theme = useTheme();
const { t } = useTranslation();
Expand All @@ -62,6 +64,7 @@ const CustomFilterMultiRange: React.FC = () => {
};
const fetchDataRange = useFetch<PoolResponse>(API.POOL_RANGE_VALUES);
const dataRange = fetchDataRange.data;

const initParams = {
page: 0,
size: 50,
Expand All @@ -80,6 +83,7 @@ const CustomFilterMultiRange: React.FC = () => {
minGovParticipationRate: +(dataRange?.minGovParticipationRate || 0),
maxGovParticipationRate: +(dataRange?.maxGovParticipationRate || 0)
};

const [filterParams, setFilterParams] = useState<PoolResponse>({});

useEffect(() => {
Expand All @@ -102,11 +106,12 @@ const CustomFilterMultiRange: React.FC = () => {
...(query?.maxGovParticipationRate && { maxGovParticipationRate: +(query?.maxGovParticipationRate || 0) })
});
}, [JSON.stringify(query)]);

const handleReset = () => {
setExpanded(false);
setOpen(false);
setFilterParams({ ...initParams });
history.replace({ search: stringify({ page: 0, size: 50, sort: "" }), state: undefined });
history.replace({ search: stringify(defaultParams), state: undefined });
};

const handleFilter = () => {
Expand All @@ -118,18 +123,21 @@ const CustomFilterMultiRange: React.FC = () => {
state: undefined
});
};

const handleKeyPress = (event: { key: string }) => {
if (event.key === "Enter") {
handleFilter();
}
};

const handleChangeValueRange = (event: Event, newValue: number | number[], minKey: string, maxKey: string) => {
if (!Array.isArray(newValue)) {
return;
}
const [min, max] = newValue || [];
setFilterParams({ ...filterParams, [minKey]: Math.min(min), [maxKey]: Math.min(max) });
};

const isDisableFilter = useMemo(
() =>
(filterParams.query || "") !== initParams.query ||
Expand Down Expand Up @@ -470,14 +478,13 @@ const CustomFilterMultiRange: React.FC = () => {
</AccordionContainer>
</>
)}

<Box my={1} p="0px 16px">
<ApplyFilterButton
data-testid="apply-filters"
onClick={() => {
handleFilter();
}}
disabled={!isDisableFilter}
disabled={JSON.stringify(defaultParams) === JSON.stringify(filterParams) && !isDisableFilter}
>
{t("common.applyFilters")}
</ApplyFilterButton>
Expand Down

0 comments on commit 240ea6a

Please sign in to comment.