{/* Meta */}
diff --git a/src/components/databrowser/components/sidebar/keys-list.tsx b/src/components/databrowser/components/sidebar/keys-list.tsx
index 27e78bb..b40844f 100644
--- a/src/components/databrowser/components/sidebar/keys-list.tsx
+++ b/src/components/databrowser/components/sidebar/keys-list.tsx
@@ -14,9 +14,13 @@ export const KeysList = () => {
return (
- {keys.map((data, i) => (
-
- ))}
+
+ <>
+ {keys.map((data, i) => (
+
+ ))}
+
+
)
}
@@ -39,25 +43,23 @@ const KeyItem = ({ data, nextKey }: { data: RedisKey; nextKey: string }) => {
const isNextKeySelected = selectedKey === nextKey
return (
-
-
-
+
)
}
diff --git a/src/components/databrowser/copy-button.tsx b/src/components/databrowser/copy-button.tsx
index 6fb3c80..b2b9c0d 100644
--- a/src/components/databrowser/copy-button.tsx
+++ b/src/components/databrowser/copy-button.tsx
@@ -2,7 +2,7 @@ import { useState } from "react"
import { IconCheck, IconCopy } from "@tabler/icons-react"
import { cn } from "@/lib/utils"
-import type { ButtonProps } from "@/components/ui/button";
+import type { ButtonProps } from "@/components/ui/button"
import { Button } from "@/components/ui/button"
interface Props extends ButtonProps {
diff --git a/src/components/databrowser/hooks/use-add-key.ts b/src/components/databrowser/hooks/use-add-key.ts
index a185513..daf72b4 100644
--- a/src/components/databrowser/hooks/use-add-key.ts
+++ b/src/components/databrowser/hooks/use-add-key.ts
@@ -15,39 +15,39 @@ export const useAddKey = () => {
mutationFn: async ({ key, type }: { key: string; type: DataType }) => {
switch (type) {
case "set": {
- redis.sadd(key, "value")
+ await redis.sadd(key, "value")
break
}
case "zset": {
- redis.zadd(key, {
+ await redis.zadd(key, {
member: "value",
score: 0,
})
break
}
case "hash": {
- redis.hset(key, {
+ await redis.hset(key, {
field: "field",
value: "value",
})
break
}
case "list": {
- redis.lpush(key, "value")
+ await redis.lpush(key, "value")
break
}
case "stream": {
- redis.xadd(key, "*", {
+ await redis.xadd(key, "*", {
foo: "bar",
})
break
}
case "string": {
- redis.set(key, "value")
+ await redis.set(key, "value")
break
}
case "json": {
- redis.json.set(key, "$", {
+ await redis.json.set(key, "$", {
foo: "bar",
})
break
diff --git a/src/components/databrowser/hooks/use-fetch-keys.ts b/src/components/databrowser/hooks/use-fetch-keys.ts
index 0f1216c..092599f 100644
--- a/src/components/databrowser/hooks/use-fetch-keys.ts
+++ b/src/components/databrowser/hooks/use-fetch-keys.ts
@@ -5,9 +5,7 @@ import type { Redis } from "@upstash/redis"
const PAGE_SIZE = 30
-// Fetch 100 keys every single time
-const INITIAL_FETCH_COUNT = 100
-const MAX_FETCH_COUNT = 1000
+const FETCH_COUNTS = [100, 200, 400, 800]
export type RedisKey = [string, DataType]
@@ -17,19 +15,16 @@ export const useFetchKeys = (search: SearchFilter) => {
const cache = useRef
()
const lastKey = useRef()
- const getPage = useCallback(
- (page: number) => {
- const newKey = JSON.stringify(search)
+ const fetchKeys = useCallback(() => {
+ const newKey = JSON.stringify(search)
- if (!cache.current || lastKey.current !== newKey) {
- cache.current = new PaginationCache(redis, search.key, search.type)
- lastKey.current = newKey
- }
+ if (!cache.current || lastKey.current !== newKey) {
+ cache.current = new PaginationCache(redis, search.key, search.type)
+ lastKey.current = newKey
+ }
- return cache.current.getPage(page)
- },
- [search]
- )
+ return cache.current.fetchNewKeys()
+ }, [search])
const resetCache = useCallback(() => {
cache.current = undefined
@@ -37,15 +32,11 @@ export const useFetchKeys = (search: SearchFilter) => {
}, [])
return {
- getPage,
+ fetchKeys,
resetCache,
}
}
-function slicePage(keys: RedisKey[], page: number) {
- return keys.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
-}
-
class PaginationCache {
// Cursor is 0 initially, then it is set to -1 when we reach the end
cache: Record = Object.fromEntries(
@@ -64,10 +55,10 @@ class PaginationCache {
}
}
- async getPage(page: number) {
+ async fetchNewKeys() {
+ const initialKeys = new Set(this.getKeys().map(([key]) => key))
// The number of keys we need to have in the cache to satisfy this function call
- // +1 here to fetch one more than needed to check if there is a next page
- this.targetCount = (page + 1) * PAGE_SIZE + 1
+ this.targetCount = this.getKeys().length + PAGE_SIZE
// Starts the fetching loop if it's not already started
void this.startFetch()
@@ -82,12 +73,10 @@ class PaginationCache {
}, 100)
})
- const hasEnoughForNextPage = this.getLength() > (page + 1) * PAGE_SIZE
-
- const hasNextPage = !this.isAllEnded() || hasEnoughForNextPage
+ const hasNextPage = !this.isAllEnded()
return {
- keys: slicePage(this.getKeys(), page),
+ keys: this.getKeys().filter(([key]) => !initialKeys.has(key)),
hasNextPage,
}
}
@@ -119,7 +108,7 @@ class PaginationCache {
}
private fetchForType = async (type: string) => {
- let fetchCount = INITIAL_FETCH_COUNT
+ let i = 0
while (true) {
const cursor = this.cache[type].cursor
@@ -127,37 +116,29 @@ class PaginationCache {
break
}
+ const fetchCount = FETCH_COUNTS[Math.min(i, FETCH_COUNTS.length - 1)]
+
const [nextCursor, newKeys] = await this.redis.scan(cursor, {
count: fetchCount,
match: this.searchTerm,
type: type,
})
- fetchCount = Math.min(fetchCount * 2, MAX_FETCH_COUNT)
-
- // Dedupe here because redis can and will return duplicates for example when
- // a key is deleted because of ttl etc.
- const dedupedSet = new Set([...this.cache[type].keys, ...newKeys])
-
- this.cache[type].keys = [...dedupedSet]
+ this.cache[type].keys = [...this.cache[type].keys, ...newKeys]
this.cache[type].cursor = nextCursor === "0" ? "-1" : nextCursor
+ i++
}
}
private async fetch() {
- // Fetch pages of each type until they are enough
+ // Fetch pages of each type until we have enough
const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES
await Promise.all(types.map(this.fetchForType))
}
- // TODO: Yusuf, implement this function
private isAllEnded(): boolean {
const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES
- if (!Array.isArray(types)) {
- throw new TypeError("types is not an array")
- }
-
return types.every((type) => this.cache[type] && this.cache[type].cursor === "-1")
}
}
diff --git a/src/components/databrowser/hooks/use-keys.tsx b/src/components/databrowser/hooks/use-keys.tsx
index a9f496c..b77713c 100644
--- a/src/components/databrowser/hooks/use-keys.tsx
+++ b/src/components/databrowser/hooks/use-keys.tsx
@@ -1,4 +1,11 @@
-import { createContext, useCallback, useContext, useMemo, type PropsWithChildren } from "react"
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useMemo,
+ useRef,
+ type PropsWithChildren,
+} from "react"
import { useDatabrowserStore } from "@/store"
import { useInfiniteQuery, type UseInfiniteQueryResult } from "@tanstack/react-query"
@@ -26,18 +33,25 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
[searchState]
)
- const { getPage, resetCache } = useFetchKeys(search)
+ const { fetchKeys, resetCache } = useFetchKeys(search)
+ const pageRef = useRef(0)
const query = useInfiniteQuery({
queryKey: [FETCH_KEYS_QUERY_KEY, search],
+
initialPageParam: 0,
- queryFn: async ({ pageParam: pageIndex }) => {
- return getPage(pageIndex)
+ queryFn: async ({ pageParam: page }) => {
+ // We should reset the cache when the pagination is reset
+ if (pageRef.current >= page) resetCache()
+ pageRef.current = page
+
+ return await fetchKeys()
},
select: (data) => data,
getNextPageParam: (lastPage, __, lastPageIndex) => {
return lastPage.hasNextPage ? lastPageIndex + 1 : undefined
},
+ refetchOnMount: false,
})
const refetch = useCallback(() => {
@@ -48,9 +62,17 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
const keys = useMemo(() => {
const keys = query.data?.pages.flatMap((page) => page.keys) ?? []
- const keysSet = new Set(keys.map(([key, _]) => key))
+ // deduplication
+ const keysSet = new Set()
+ const dedupedKeys: RedisKey[] = []
- return keys.filter(([key, _]) => keysSet.has(key))
+ for (const key of keys) {
+ if (keysSet.has(key[0])) continue
+
+ keysSet.add(key[0])
+ dedupedKeys.push(key)
+ }
+ return dedupedKeys
}, [query.data])
return (
diff --git a/src/components/databrowser/index.tsx b/src/components/databrowser/index.tsx
index 0d0f828..4bc6665 100644
--- a/src/components/databrowser/index.tsx
+++ b/src/components/databrowser/index.tsx
@@ -23,7 +23,7 @@ export const RedisBrowser = ({ token, url }: RedisCredentials) => {
{/* ups-db is the custom class used to prefix every style in the css bundle */}
-
+
-
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
index f6baf89..ccd129c 100644
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,7 +1,9 @@
import type { PropsWithChildren } from "react"
+import { cn } from "@/lib/utils"
+
export interface SpinnerProps extends React.InputHTMLAttributes
{
- isLoadingText: string
+ isLoadingText?: string
isLoading: boolean
}
@@ -26,7 +28,7 @@ export const Spinner = ({
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
- className="ml-2 h-4 w-4 animate-spin"
+ className={cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : "")}
>
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 0fc721e..467c8bf 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
- "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+ "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-zinc-50 dark:text-zinc-900",
className
)}
{...props}
diff --git a/src/playground.tsx b/src/playground.tsx
index 6b09b14..71eca3f 100644
--- a/src/playground.tsx
+++ b/src/playground.tsx
@@ -3,24 +3,26 @@ import ReactDOM from "react-dom/client"
import { RedisBrowser } from "@/components/databrowser"
ReactDOM.createRoot(document.querySelector("#root")!).render(
-
-
+
)