fix: pagination not reseting after filter changes

upstash · May 3, 2024 · fd2b867 · fd2b867
1 parent 893eecc
commit fd2b867
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/react-databrowser/src/components/databrowser/components/sidebar/index.tsx b/packages/react-databrowser/src/components/databrowser/components/sidebar/index.tsx
@@ -44,10 +44,12 @@ export function Sidebar({ onDataKeyChange, selectedDataKey }: Props) {
     direction,
     handleSearch,
     refreshSearch,
+    resetPagination,
     searchInputRef,
   } = useFetchPaginatedKeys(selectedDataType);
 
   const handleDataTypeChange = (dataType?: RedisDataTypeUnion) => {
+    resetPagination();
     setSelectedDataType(dataType);
   };
 

diff --git a/packages/react-databrowser/src/components/databrowser/hooks/useFetchPaginatedKeys.ts b/packages/react-databrowser/src/components/databrowser/hooks/useFetchPaginatedKeys.ts
@@ -1,7 +1,7 @@
 import { queryClient } from "@/lib/clients";
 import { useDatabrowser } from "@/store";
 import { RedisDataTypes, type RedisDataTypeUnion } from "@/types";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useDebounce } from "./useDebounce";
 import type { Redis } from "@upstash/redis";
@@ -192,6 +192,10 @@ export const useFetchPaginatedKeys = (dataType?: RedisDataTypeUnion) => {
     [currentPage],
   );
 
+  const resetPagination = () => {
+    setCurrentPage(0);
+  };
+
   // If user doesn't pass any asterisk we add two of them to end and start
   const handleSearch = (query: string) => {
     setSearchTerm(!query.includes("*") ? `*${query}*` : query);
@@ -215,6 +219,7 @@ export const useFetchPaginatedKeys = (dataType?: RedisDataTypeUnion) => {
     isLoading,
     error,
     data: data?.keys,
+    resetPagination,
     handlePageChange,
     handleSearch,
     refreshSearch,