reset search and categories on network select

smartcontractkit · Aug 15, 2023 · 1d2d44a · 1d2d44a
1 parent 545902f
commit 1d2d44a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/features/feeds/components/FeedList.tsx b/src/features/feeds/components/FeedList.tsx
@@ -28,7 +28,7 @@ export const FeedList = ({
   const [selectedFeedCategories, setSelectedFeedCategories] = useQueryString("categories", [])
   const [showCategoriesDropdown, setShowCategoriesDropdown] = useState<boolean>(false)
   const [showExtraDetails, setShowExtraDetails] = useState(false)
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useQueryString("page", 1)
   const paginate = (pageNumber) => setCurrentPage(pageNumber)
   const addrPerPage = 8
   const lastAddr = currentPage * addrPerPage
@@ -39,13 +39,21 @@ export const FeedList = ({
 
   function handleNetworkSelect(chain: Chain) {
     setSelectedChain(chain.page)
+    setSearchValue("")
+    setSelectedFeedCategories([])
+    setCurrentPage(1)
   }
 
   const handleCategorySelection = (category) => {
     paginate(1)
-    if (selectedFeedCategories.includes(category)) {
+    if (typeof selectedFeedCategories === "string" && selectedFeedCategories !== category) {
+      setSelectedFeedCategories([selectedFeedCategories, category])
+    } else if (typeof selectedFeedCategories === "string" && selectedFeedCategories === category) {
+      setSelectedFeedCategories([])
+    }
+    if (Array.isArray(selectedFeedCategories) && selectedFeedCategories.includes(category)) {
       setSelectedFeedCategories(selectedFeedCategories.filter((item) => item !== category))
-    } else {
+    } else if (Array.isArray(selectedFeedCategories)) {
       setSelectedFeedCategories([...selectedFeedCategories, category])
     }
   }

diff --git a/src/features/feeds/components/Tables.tsx b/src/features/feeds/components/Tables.tsx
@@ -3,6 +3,7 @@ import feedList from "./FeedList.module.css"
 import { clsx } from "../../../lib"
 import { ChainNetwork } from "~/features/data/chains"
 import tableStyles from "./Tables.module.css"
+import button from "@chainlink/design-system/button.module.css"
 import { CheckHeartbeat } from "./pause-notice/CheckHeartbeat"
 import { monitoredFeeds, FeedDataItem } from "~/features/data"
 
@@ -67,7 +68,7 @@ const Pagination = ({ addrPerPage, totalAddr, paginate, currentPage, firstAddr,
             className={button.secondary}
             style={"outline-offset: 2px"}
             disabled={currentPage === 1}
-            onClick={() => paginate(currentPage - 1)}
+            onClick={() => paginate(Number(currentPage) - 1)}
           >
             Prev
           </button>
@@ -78,7 +79,7 @@ const Pagination = ({ addrPerPage, totalAddr, paginate, currentPage, firstAddr,
             className={button.secondary}
             style={"outline-offset: 2px"}
             disabled={lastAddr >= totalAddr}
-            onClick={() => paginate(currentPage + 1)}
+            onClick={() => paginate(Number(currentPage) + 1)}
           >
             Next
           </button>
@@ -369,7 +370,6 @@ export const MainnetTable = ({
           .includes(searchValue.toLowerCase().replaceAll(" ", "")) ||
         pair.docs.porSource?.toLowerCase().replaceAll(" ", "").includes(searchValue.toLowerCase().replaceAll(" ", ""))
     )
-  console.log("filteredMetadata", filteredMetadata)
   const slicedFilteredMetadata = filteredMetadata.slice(firstAddr, lastAddr)
   return (
     <div>