fix: fix reset when sort and disable button

cardano-foundation · Apr 17, 2024 · 0a12b1c · 0a12b1c
1 parent 5b73657
commit 0a12b1c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/commons/hooks/usePageInfo.ts b/src/commons/hooks/usePageInfo.ts
@@ -12,7 +12,30 @@ const usePageInfo = () => {
 
   const setSort = (sort: string) => {
     if (sort === "") {
-      history.replace({ search: stringify({ ...pick(pageInfo, ["page", "size", "retired", "tokenName"]), page: 1 }) });
+      history.replace({
+        search: stringify({
+          ...pick(pageInfo, [
+            "page",
+            "size",
+            "retired",
+            "tokenName",
+            "query",
+            "minPoolSize",
+            "maxPoolSize",
+            "minPledge",
+            "maxPledge",
+            "minSaturation",
+            "maxSaturation",
+            "minBlockLifetime",
+            "maxBlockLifetime",
+            "minVotingPower",
+            "maxVotingPower",
+            "minGovParticipationRate",
+            "maxGovParticipationRate"
+          ]),
+          page: 1
+        })
+      });
     } else {
       history.replace({ search: stringify({ ...pageInfo, page: 1, sort }) });
     }

diff --git 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,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 ||
@@ -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>