address review

packages/react-databrowser/src/components/databrowser/components/display/display-list-edit.tsx

@@ -1,3 +1,4 @@
+import type { SelectedItem } from "@/store"
 import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form"
@@ -10,21 +11,18 @@ import { useEditListItem } from "../../hooks/use-edit-list-item"
 import { headerLabels } from "./display-list"
 import { useField } from "./input/use-field"
 
-export const ListEditDisplay = ({ dataKey, type }: { dataKey: string; type: ListDataType }) => {
-  const { selectedListItem } = useDatabrowserStore()
-
-  if (!selectedListItem) {
-    return <></>
-  }
-
+export const ListEditDisplay = ({
+  dataKey,
+  type,
+  item,
+}: {
+  dataKey: string
+  type: ListDataType
+  item: SelectedItem
+}) => {
   return (
     <div className="grow rounded-md bg-zinc-100 p-3">
-      <ListEditForm
-        key={selectedListItem.key}
-        item={selectedListItem}
-        type={type}
-        dataKey={dataKey}
-      />
+      <ListEditForm key={item.key} item={item} type={type} dataKey={dataKey} />
     </div>
   )
 }
@@ -36,7 +34,7 @@ const ListEditForm = ({
 }: {
   type: ListDataType
   dataKey: string
-  item: { key: string; value?: string; isNew?: boolean }
+  item: SelectedItem
 }) => {
   const form = useForm({
     defaultValues: {

packages/react-databrowser/src/components/databrowser/components/display/input/content-type-select.tsx

@@ -11,8 +11,7 @@ import {
 
 import { checkIsValidJSON } from "./use-field"
 
-const _contentTypes = ["Text", "JSON"] as const
-export type ContentType = (typeof _contentTypes)[number]
+export type ContentType = "Text" | "JSON"
 
 export const ContentTypeSelect = ({
   value,

packages/react-databrowser/src/components/databrowser/components/sidebar/db-size.tsx

@@ -4,10 +4,12 @@ import { useQuery } from "@tanstack/react-query"
 import { formatNumber } from "@/lib/utils"
 import { Skeleton } from "@/components/ui/skeleton"
 
+export const FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size"
+
 export const DisplayDbSize = () => {
   const { redis } = useDatabrowser()
   const { data: keyCount } = useQuery({
-    queryKey: ["useFetchDbSize"],
+    queryKey: [FETCH_DB_SIZE_QUERY_KEY],
     queryFn: async () => {
       return await redis.dbsize()
     },

packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx

@@ -1,4 +1,5 @@
 import { useDatabrowserStore } from "@/store"
+import type { DataType } from "@/types"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -20,6 +21,16 @@ export const KeysList = () => {
   )
 }
 
+const keyStyles = {
+  string: "border-sky-400 !bg-sky-50 text-sky-900",
+  hash: "border-amber-400 !bg-amber-50 text-amber-900",
+  set: "border-indigo-400 !bg-indigo-50 text-indigo-900",
+  zset: "border-pink-400  !bg-pink-50 text-pink-900",
+  json: "border-purple-400 !bg-purple-50 text-purple-900",
+  list: "border-orange-400 !bg-orange-50 text-orange-900",
+  stream: "border-green-400 !bg-green-50 text-green-900",
+} as Record<DataType, string>
+
 const KeyItem = ({ data }: { data: RedisKey }) => {
   const { selectedKey, setSelectedKey } = useDatabrowserStore()
 
@@ -35,13 +46,7 @@ const KeyItem = ({ data }: { data: RedisKey }) => {
           "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 ",
           "select-none border border-transparent text-left",
           isKeySelected && "shadow-sm",
-          isKeySelected && dataType === "string" && "border-sky-400 !bg-sky-50 text-sky-900",
-          isKeySelected && dataType === "hash" && "border-amber-400 !bg-amber-50 text-amber-900",
-          isKeySelected && dataType === "set" && "border-indigo-400 !bg-indigo-50 text-indigo-900",
-          isKeySelected && dataType === "zset" && "border-pink-400  !bg-pink-50 text-pink-900",
-          isKeySelected && dataType === "json" && "border-purple-400 !bg-purple-50 text-purple-900",
-          isKeySelected && dataType === "list" && "border-orange-400 !bg-orange-50 text-orange-900",
-          isKeySelected && dataType === "stream" && "border-green-400 !bg-green-50 text-green-900"
+          keyStyles[dataType]
         )}
         onClick={() => setSelectedKey(dataKey)}
       >

packages/react-databrowser/src/components/databrowser/hooks/use-add-key.ts

@@ -4,6 +4,7 @@ import { useMutation, type InfiniteData } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
 
+import { FETCH_DB_SIZE_QUERY_KEY } from "../components/sidebar/db-size"
 import { type RedisKey } from "./use-fetch-keys"
 import { FETCH_KEYS_QUERY_KEY } from "./use-keys"
 
@@ -51,6 +52,9 @@ export const useAddKey = () => {
       }
     },
     onSuccess: (_, { key, type }) => {
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY],
+      })
       queryClient.setQueriesData<
         InfiniteData<{
           keys: RedisKey[]

packages/react-databrowser/src/components/databrowser/hooks/use-delete-key.ts

@@ -1,6 +1,9 @@
 import { useDatabrowser } from "@/store"
 import { useMutation } from "@tanstack/react-query"
 
+import { queryClient } from "@/lib/clients"
+
+import { FETCH_DB_SIZE_QUERY_KEY } from "../components/sidebar/db-size"
 import { useDeleteKeyCache } from "./use-delete-key-cache"
 
 export const useDeleteKey = () => {
@@ -13,6 +16,9 @@ export const useDeleteKey = () => {
     },
     onSuccess: (_, key) => {
       deleteKeyCache(key)
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY],
+      })
     },
   })
 

packages/react-databrowser/src/components/databrowser/hooks/use-keys.tsx

@@ -77,7 +77,7 @@ export const useKeys = () => {
 export const useKeyType = (key?: string) => {
   const { keys } = useKeys()
 
-  const type = useMemo(() => keys.find(([k, _]) => k === key), [keys, key])
+  const keyTuple = useMemo(() => keys.find(([k, _]) => k === key), [keys, key])
 
-  return type?.[1]
+  return keyTuple?.[1]
 }

packages/react-databrowser/src/components/databrowser/index.tsx

@@ -1,7 +1,7 @@
 import "@/globals.css"
 
 import { useMemo } from "react"
-import { DatabrowserProvider, type DatabrowserProps } from "@/store"
+import { DatabrowserProvider, type RedisCredentials } from "@/store"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { IconDotsVertical } from "@tabler/icons-react"
 import { QueryClientProvider } from "@tanstack/react-query"
@@ -14,13 +14,13 @@ import { DataDisplay } from "./components/display"
 import { Sidebar } from "./components/sidebar"
 import { KeysProvider } from "./hooks/use-keys"
 
-export const Databrowser = ({ token, url }: DatabrowserProps) => {
+export const Databrowser = ({ token, url }: RedisCredentials) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
 
   return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
-        <DatabrowserProvider databrowser={credentials}>
+        <DatabrowserProvider redisCredentials={credentials}>
           <KeysProvider>
             <PanelGroup
               autoSaveId="persistence"

packages/react-databrowser/src/lib/clients.ts

@@ -1,10 +1,10 @@
-import type { DatabrowserProps } from "@/store"
+import type { RedisCredentials } from "@/store"
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query"
 import { Redis } from "@upstash/redis"
 
 import { toast } from "@/components/ui/use-toast"
 
-export const redisClient = (databrowser?: DatabrowserProps) => {
+export const redisClient = (databrowser?: RedisCredentials) => {
   const token = databrowser?.token || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN
   const url = databrowser?.url || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL
 

packages/react-databrowser/src/store.tsx

@@ -5,7 +5,7 @@ import { create, useStore } from "zustand"
 import { redisClient } from "./lib/clients"
 import type { DataType } from "./types"
 
-export type DatabrowserProps = {
+export type RedisCredentials = {
   url?: string
   token?: string
 }
@@ -18,21 +18,21 @@ type DatabrowserContextProps = {
 const DatabrowserContext = createContext<DatabrowserContextProps | undefined>(undefined)
 
 interface DatabrowserProviderProps {
-  databrowser: DatabrowserProps
+  redisCredentials: RedisCredentials
 }
 
 export const DatabrowserProvider = ({
   children,
-  databrowser,
+  redisCredentials,
 }: PropsWithChildren<DatabrowserProviderProps>) => {
-  const redisInstances = useMemo(() => redisClient(databrowser), [databrowser])
+  const redisInstance = useMemo(() => redisClient(redisCredentials), [redisCredentials])
 
   const [store] = useState(() => {
     return createDatabrowserStore()
   })
 
   return (
-    <DatabrowserContext.Provider value={{ redis: redisInstances, store }}>
+    <DatabrowserContext.Provider value={{ redis: redisInstance, store }}>
       {children}
     </DatabrowserContext.Provider>
   )
@@ -57,15 +57,17 @@ export type SearchFilter = {
   type: DataType | undefined
 }
 
+export type SelectedItem = {
+  key: string
+  value?: string
+  isNew?: boolean
+}
+
 type DatabrowserStore = {
   selectedKey: string | undefined
   setSelectedKey: (key: string | undefined) => void
 
-  selectedListItem?: {
-    key: string
-    value?: string
-    isNew?: boolean
-  }
+  selectedListItem?: SelectedItem
   setSelectedListItem: (item?: { key: string; value?: string; isNew?: boolean }) => void
 
   search: SearchFilter