Merge pull request #65 from upstash/dx-849-redis-databrowser-high-com…

…mand-usage fix: pagination not reseting after filter changes
upstash · May 3, 2024 · f65aaa3 · f65aaa3
2 parents 44c6216 + e648094
commit f65aaa3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/small-coins-confess.md b/.changeset/small-coins-confess.md
@@ -0,0 +1,5 @@
+---
+"@upstash/react-databrowser": patch
+---
+
+fix pagination not resetting when type filter changes
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,