fix: list filter reset page 1 (#1478)

* bounties * child bounties * proposals * open gov application(referenda) * tips * users * tweak
opensquare-network · Nov 25, 2024 · 9e035e1 · 9e035e1
1 parent ebdcd3c
commit 9e035e1
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 88 deletions.
diff --git a/site/src/pages/Bounties/index.jsx b/site/src/pages/Bounties/index.jsx
@@ -1,4 +1,3 @@
-// @ts-check
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import Nav from "./Nav";
@@ -26,6 +25,7 @@ import Divider from "../../components/Divider";
 import Filter from "../../components/Filter";
 import useListFilter from "../../components/Filter/useListFilter";
 import styled from "styled-components";
+import { useHistory } from "react-router";
 
 const QUERY_PAGE_KEY = "page";
 
@@ -59,6 +59,7 @@ const Bounties = () => {
     DEFAULT_PAGE_SIZE,
   );
   const sort = query.get("sort");
+  const history = useHistory();
 
   const {
     filterStatus,
@@ -79,12 +80,33 @@ const Bounties = () => {
   const chain = useSelector(chainSelector);
 
   useEffect(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    searchParams.delete("page");
+    history.push({ search: searchParams.toString() });
+
+    setTablePage(DEFAULT_QUERY_PAGE);
+  }, [getFilterData]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
     const filterData = getFilterData();
+
+    const params = {
+      ...filterData,
+    };
+    if (sort) {
+      params.sort = sort;
+    }
+
     dispatch(
-      fetchBounties(tablePage - 1, pageSize, filterData, sort && { sort }),
+      fetchBounties(tablePage - 1, pageSize, params, {
+        signal: controller.signal,
+      }),
     );
 
     return () => {
+      controller.abort();
       dispatch(resetBounties());
     };
   }, [dispatch, tablePage, pageSize, getFilterData, sort]);

diff --git a/site/src/pages/ChildBounties/index.jsx b/site/src/pages/ChildBounties/index.jsx
@@ -1,4 +1,3 @@
-// @ts-check
 import React, { useEffect, useMemo, useState } from "react";
 
 import Pagination from "../Bounties/Pagination";
@@ -24,6 +23,7 @@ import styled from "styled-components";
 import Divider from "../../components/Divider";
 import Filter from "../../components/Filter";
 import useListFilter from "../../components/Filter/useListFilter";
+import { useHistory } from "react-router";
 
 const QUERY_PAGE_KEY = "page";
 
@@ -43,9 +43,11 @@ const FilterWrapper = styled.div`
   padding: 24px;
 `;
 
-const ChildBounties = () => {
+function ChildBounties() {
   const query = useQuery();
 
+  const history = useHistory();
+
   const searchPage = parseInt(query.get(QUERY_PAGE_KEY) || "1");
   const queryPage =
     searchPage && !isNaN(searchPage) && searchPage > 0
@@ -76,12 +78,33 @@ const ChildBounties = () => {
   } = useListFilter();
 
   useEffect(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    searchParams.delete("page");
+    history.push({ search: searchParams.toString() });
+
+    setTablePage(DEFAULT_QUERY_PAGE);
+  }, [getFilterData]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
     const filterData = getFilterData();
+
+    const params = {
+      ...filterData,
+    };
+    if (sort) {
+      params.sort = sort;
+    }
+
     dispatch(
-      fetchChildBounties(tablePage - 1, pageSize, filterData, sort && { sort }),
+      fetchChildBounties(tablePage - 1, pageSize, params, {
+        signal: controller.signal,
+      }),
     );
 
     return () => {
+      controller.abort();
       dispatch(resetChildBounties());
     };
   }, [dispatch, tablePage, pageSize, getFilterData, sort]);
@@ -92,7 +115,7 @@ const ChildBounties = () => {
   );
 
   const tableData = useMemo(
-    () => childBounties.map(compatChildBountyData),
+    () => childBounties?.map(compatChildBountyData),
     [childBounties],
   );
 
@@ -139,6 +162,6 @@ const ChildBounties = () => {
       footer={footer}
     />
   );
-};
+}
 
 export default ChildBounties;
diff --git a/site/src/pages/Proposals/index.jsx b/site/src/pages/Proposals/index.jsx
@@ -196,30 +196,44 @@ const Proposals = () => {
   const history = useHistory();
   const { proposals, total, loading } = useListData();
 
-  const doFetchProposal = useCallback(() => {
-    let filterData = getFilterData();
-    if (isFailed) {
-      dispatch(
-        fetchFailedProposals(
-          tablePage - 1,
-          pageSize,
-          filterData,
-          sort && { sort },
-        ),
-      );
-    } else {
-      if (gov) {
-        filterData = { ...filterData, gov };
+  const doFetchProposal = useCallback(
+    (options = {}) => {
+      let filterData = getFilterData();
+
+      const params = {
+        ...filterData,
+      };
+      if (sort) {
+        params.sort = sort;
       }
-      dispatch(
-        fetchProposals(tablePage - 1, pageSize, filterData, sort && { sort }),
-      );
-    }
-  }, [dispatch, tablePage, pageSize, getFilterData, sort, gov, isFailed]);
+
+      if (isFailed) {
+        dispatch(
+          fetchFailedProposals(tablePage - 1, pageSize, params, options),
+        );
+      } else {
+        if (gov) {
+          params.gov = gov;
+        }
+        dispatch(fetchProposals(tablePage - 1, pageSize, params, options));
+      }
+    },
+    [dispatch, tablePage, pageSize, getFilterData, sort, gov, isFailed],
+  );
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    searchParams.delete("page");
+    history.push({ search: searchParams.toString() });
+
+    setTablePage(DEFAULT_QUERY_PAGE);
+  }, [getFilterData]);
 
   useEffect(() => {
-    doFetchProposal();
+    const controller = new AbortController();
+    doFetchProposal({ signal: controller.signal });
     return () => {
+      controller.abort();
       dispatch(resetProposals());
     };
   }, [dispatch, doFetchProposal]);

diff --git a/site/src/pages/Referenda/ReferendaTable.jsx b/site/src/pages/Referenda/ReferendaTable.jsx
@@ -87,11 +87,35 @@ export default function ReferendaTable() {
   } = useListFilter();
 
   useEffect(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    searchParams.delete("page");
+    history.push({ search: searchParams.toString() });
+
+    setPage(DEFAULT_QUERY_PAGE);
+  }, [getFilterData]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
     const filterData = getFilterData();
+
+    const params = {
+      ...filterData,
+    };
+    if (sort) {
+      params.sort = sort;
+    }
+
     dispatch(
-      fetchApplicationList(page - 1, pageSize, filterData, sort && { sort }),
+      fetchApplicationList(page - 1, pageSize, params, {
+        signal: controller.signal,
+      }),
     );
-  }, [dispatch, page, pageSize, sort, getFilterData]);
+
+    return () => {
+      controller.abort();
+    };
+  }, [dispatch, page, pageSize, getFilterData, sort]);
 
   useEffect(() => {
     setDataList(applicationList?.items || []);

diff --git a/site/src/pages/Tips/index.jsx b/site/src/pages/Tips/index.jsx
@@ -84,17 +84,45 @@ const Tips = () => {
   const chain = useSelector(chainSelector);
 
   useEffect(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    searchParams.delete("page");
+    history.push({ search: searchParams.toString() });
+
+    setTablePage(DEFAULT_QUERY_PAGE);
+  }, [getFilterData]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
     const filterData = getFilterData();
-    dispatch(fetchTips(tablePage - 1, pageSize, filterData, sort && { sort }));
+    const params = {
+      ...filterData,
+    };
+    if (sort) {
+      params.sort = sort;
+    }
+
+    dispatch(
+      fetchTips(tablePage - 1, pageSize, params, {
+        signal: controller.signal,
+      }),
+    );
 
     return () => {
+      controller.abort();
       dispatch(resetTips());
     };
   }, [dispatch, tablePage, pageSize, getFilterData, sort]);
 
   const refreshTips = useCallback(() => {
     const filterData = getFilterData();
-    dispatch(fetchTips(tablePage - 1, pageSize, filterData, sort && { sort }));
+    const params = {
+      ...filterData,
+    };
+    if (sort) {
+      params.sort = sort;
+    }
+    dispatch(fetchTips(tablePage - 1, pageSize, params));
   }, [dispatch, tablePage, pageSize, getFilterData, sort]);
 
   const onFinalized = useWaitSyncBlock("Tips created", refreshTips);

diff --git a/site/src/pages/Users/index.jsx b/site/src/pages/Users/index.jsx
@@ -51,8 +51,27 @@ export default function Participants() {
   const { role, setRole, getFilterData } = useListFilter();
 
   useEffect(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    searchParams.delete("page");
+    history.push({ search: searchParams.toString() });
+
+    setTablePage(DEFAULT_QUERY_PAGE);
+  }, [getFilterData]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
     const filterData = getFilterData();
-    dispatch(fetchUsers(tablePage - 1, pageSize, filterData));
+
+    dispatch(
+      fetchUsers(tablePage - 1, pageSize, filterData, {
+        signal: controller.signal,
+      }),
+    );
+
+    return () => {
+      controller.abort();
+    };
   }, [dispatch, tablePage, pageSize, getFilterData]);
 
   const header = (

diff --git a/site/src/store/reducers/bountySlice.js b/site/src/store/reducers/bountySlice.js
@@ -64,17 +64,20 @@ export const {
 } = bountySlice.actions;
 
 export const fetchBounties =
-  (page = 0, pageSize = 30, filterData, sort) =>
+  (page = 0, pageSize = 30, params, options = {}) =>
   async (dispatch) => {
     dispatch(setLoading(true));
 
     try {
-      const { result } = await api.fetch("/bounties", {
-        page,
-        pageSize,
-        ...filterData,
-        ...sort,
-      });
+      const { result } = await api.fetch(
+        "/bounties",
+        {
+          page,
+          pageSize,
+          ...params,
+        },
+        options,
+      );
       dispatch(setBounties(result || {}));
     } finally {
       dispatch(setLoading(false));
@@ -122,17 +125,20 @@ export const fetchChildBountyDetail = (bountyIndex) => async (dispatch) => {
   }
 };
 export const fetchChildBounties =
-  (page = 0, pageSize = 30, filterData, sort) =>
+  (page = 0, pageSize = 30, params, options = {}) =>
   async (dispatch) => {
     dispatch(setLoading(true));
 
     try {
-      const { result } = await api.fetch("/child-bounties", {
-        page,
-        pageSize,
-        ...filterData,
-        ...sort,
-      });
+      const { result } = await api.fetch(
+        "/child-bounties",
+        {
+          page,
+          pageSize,
+          ...params,
+        },
+        options,
+      );
       dispatch(setChildBounties(result || {}));
     } finally {
       dispatch(setLoading(false));

diff --git a/site/src/store/reducers/openGovApplicationsSlice.js b/site/src/store/reducers/openGovApplicationsSlice.js
@@ -38,17 +38,20 @@ export const {
 } = openGovApplicationsSlice.actions;
 
 export const fetchApplicationList =
-  (page = 0, pageSize = 30, filterData = {}, sort = {}) =>
+  (page = 0, pageSize = 30, params, options = {}) =>
   async (dispatch) => {
     dispatch(setLoadingApplicationList(true));
 
     try {
-      const { result } = await api.fetch("/referenda", {
-        page,
-        pageSize,
-        ...filterData,
-        ...sort,
-      });
+      const { result } = await api.fetch(
+        "/referenda",
+        {
+          page,
+          pageSize,
+          ...params,
+        },
+        options,
+      );
       dispatch(
         setApplicationList(
           result || {