From 56f13a19eded2b32bd91107161b5a8c7da32fa3b Mon Sep 17 00:00:00 2001
From: DinhTran <dinh.tran2@sotatek.com>
Date: Wed, 17 Apr 2024 17:45:22 +0700
Subject: [PATCH] fix: clear params filter pools

---
 .../DelegationPool/DelegationList/index.tsx   | 25 +++++++++++++------
 .../commons/CustomFilterMultiRange/index.tsx  |  6 +++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/DelegationPool/DelegationList/index.tsx b/src/components/DelegationPool/DelegationList/index.tsx
index 4e88f07401..2a38b8bf1e 100644
--- a/src/components/DelegationPool/DelegationList/index.tsx
+++ b/src/components/DelegationPool/DelegationList/index.tsx
@@ -37,10 +37,15 @@ const DelegationLists: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tickerNameSearch]);
 
+  Object.keys(pageInfo).forEach((key) => {
+    if (pageInfo[key] === "" || pageInfo[key] === undefined) {
+      delete pageInfo[key];
+    }
+  });
+
   const fetchData = useFetchList<Delegators>(
     API.DELEGATION.POOL_LIST,
     {
-      search,
       isShowRetired: isShowRetired,
       ...pageInfo
     },
@@ -50,6 +55,10 @@ const DelegationLists: React.FC = () => {
 
   const fromPath = history.location.pathname as SpecialPath;
 
+  const handleBlankSort = () => {
+    history.replace({ search: stringify({ ...pageInfo, page: 1, sort: undefined }) });
+  };
+
   useEffect(() => {
     if (fetchData.initialized) {
       history.replace({ search: stringify({ ...pageInfo }), state: undefined });
@@ -99,7 +108,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();
       }
     },
     {
@@ -112,7 +121,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();
       }
     },
     {
@@ -128,7 +137,7 @@ const DelegationLists: React.FC = () => {
           t("common.N/A")
         ),
       sort: ({ columnKey, sortValue }) => {
-        sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
+        sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
       }
     },
     {
@@ -137,7 +146,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();
       }
     },
     {
@@ -146,7 +155,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();
       }
     },
     {
@@ -162,7 +171,7 @@ const DelegationLists: React.FC = () => {
           t("common.N/A")
         ),
       sort: ({ columnKey, sortValue }) => {
-        sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
+        sortValue ? setSort(`${columnKey},${sortValue}`) : handleBlankSort();
       }
     },
     {
@@ -172,7 +181,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();
       }
     }
   ];
diff --git a/src/components/commons/CustomFilterMultiRange/index.tsx b/src/components/commons/CustomFilterMultiRange/index.tsx
index 2daf3d59f4..031e625af2 100644
--- a/src/components/commons/CustomFilterMultiRange/index.tsx
+++ b/src/components/commons/CustomFilterMultiRange/index.tsx
@@ -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();
@@ -106,7 +108,7 @@ const CustomFilterMultiRange: React.FC = () => {
     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 = () => {
@@ -477,7 +479,7 @@ const CustomFilterMultiRange: React.FC = () => {
                   onClick={() => {
                     handleFilter();
                   }}
-                  disabled={!isDisableFilter}
+                  disabled={JSON.stringify(defaultParams) === JSON.stringify(filterParams) && !isDisableFilter}
                 >
                   {t("common.applyFilters")}
                 </ApplyFilterButton>