From 29ede2e6686767c5b1e6e0fa6c717cff1b6d55e1 Mon Sep 17 00:00:00 2001
From: DinhTran <dinh.tran2@sotatek.com>
Date: Wed, 17 Apr 2024 11:35:29 +0700
Subject: [PATCH] fix: fix reset when sort and disable button

---
 .../DelegationPool/DelegationList/index.tsx    | 18 +++++++++++-------
 .../commons/CustomFilterMultiRange/index.tsx   | 13 ++++++++++---
 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..1969c9c8e9 100644
--- a/src/components/DelegationPool/DelegationList/index.tsx
+++ b/src/components/DelegationPool/DelegationList/index.tsx
@@ -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 });
@@ -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();
       }
     },
     {
@@ -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();
       }
     },
     {
@@ -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();
       }
     },
     {
@@ -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();
       }
     },
     {
@@ -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();
       }
     },
     {
@@ -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();
       }
     },
     {
@@ -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();
       }
     }
   ];
diff --git a/src/components/commons/CustomFilterMultiRange/index.tsx b/src/components/commons/CustomFilterMultiRange/index.tsx
index 2daf3d59f4..77b8c28676 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();
@@ -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,
@@ -80,6 +83,7 @@ const CustomFilterMultiRange: React.FC = () => {
     minGovParticipationRate: +(dataRange?.minGovParticipationRate || 0),
     maxGovParticipationRate: +(dataRange?.maxGovParticipationRate || 0)
   };
+
   const [filterParams, setFilterParams] = useState<PoolResponse>({});
 
   useEffect(() => {
@@ -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 = () => {
@@ -118,11 +123,13 @@ 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;
@@ -130,6 +137,7 @@ const CustomFilterMultiRange: React.FC = () => {
     const [min, max] = newValue || [];
     setFilterParams({ ...filterParams, [minKey]: Math.min(min), [maxKey]: Math.min(max) });
   };
+
   const isDisableFilter = useMemo(
     () =>
       (filterParams.query || "") !== initParams.query ||
@@ -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>