Review fixes 2 (#3)

* fix: reset query cache based on db url

* feat: make editors in stream types readonly

* fix: mount toaster to portalRoot to show on top of modals

* fix: add better error for useAddKey

* fix: remove toaster logic from add key modal becuase of reactQuery

Author: ytkimirti

bun.lockb

@@ -36,6 +36,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-portal": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",

package.json

@@ -23,7 +23,6 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Spinner } from "@/components/ui/spinner"
-import { toast } from "@/components/ui/use-toast"
 import { TypeTag } from "@/components/databrowser/components/type-tag"
 import { useAddKey } from "@/components/databrowser/hooks/use-add-key"
 
@@ -43,23 +42,16 @@ export function AddKeyModal() {
   })
 
   const onSubmit = handleSubmit(async ({ key, type }) => {
-    try {
-      await addKey({ key, type })
-      setSelectedKey(key)
-      setOpen(false)
-      setTimeout(() => {
-        window.document.querySelector(`[data-key="${key}"]`)?.scrollIntoView({
-          behavior: "smooth",
-          block: "start",
-          inline: "nearest",
-        })
-      }, 100)
-    } catch (error) {
-      toast({
-        description: error instanceof Error ? error.message : "An error occurred",
-        variant: "destructive",
+    await addKey({ key, type })
+    setSelectedKey(key)
+    setOpen(false)
+    setTimeout(() => {
+      window.document.querySelector(`[data-key="${key}"]`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest",
       })
-    }
+    }, 100)
   })
 
   return (

src/components/databrowser/components/add-key-modal.tsx

@@ -65,14 +65,24 @@ const ListEditForm = ({
       <form onSubmit={onSubmit} className="flex flex-col gap-2">
         <div className="flex grow flex-col gap-2">
           {type !== "list" && (
-            <FormItem name="key" height={type === "set" ? 250 : 100} label={keyLabel} />
+            <FormItem
+              readOnly={type === "stream"}
+              name="key"
+              height={type === "set" ? 250 : 100}
+              label={keyLabel}
+            />
           )}
 
           {type === "zset" ? (
             <NumberFormItem name="value" label={valueLabel} />
           ) : (
             type !== "set" && (
-              <FormItem name="value" height={type === "list" ? 250 : 100} label={valueLabel} />
+              <FormItem
+                readOnly={type === "stream"}
+                name="value"
+                height={type === "list" ? 250 : 100}
+                label={valueLabel}
+              />
             )
           )}
         </div>
@@ -131,18 +141,21 @@ const FormItem = ({
   name,
   label,
   height,
+  readOnly,
 }: {
   name: string
   label: string
   isNumber?: boolean
   height?: number
+  readOnly?: boolean
 }) => {
   const form = useFormContext()
   const { editor, selector } = useField({
     name,
     form,
     height: height,
     showCopyButton: true,
+    readOnly,
   })
 
   return (

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

@@ -10,12 +10,14 @@ export const CustomEditor = ({
   onChange,
   height,
   showCopyButton,
+  readOnly,
 }: {
   language: string
   value: string
   onChange: (value: string) => void
   height?: number
   showCopyButton?: boolean
+  readOnly?: boolean
 }) => {
   const monaco = useMonaco()
   const editorRef = useRef()
@@ -48,6 +50,7 @@ export const CustomEditor = ({
         }}
         defaultLanguage={language}
         options={{
+          readOnly: readOnly,
           wordWrap: "on",
           overviewRulerBorder: false,
           overviewRulerLanes: 0,

src/components/databrowser/components/display/input/custom-editor.tsx

@@ -9,11 +9,13 @@ export const useField = ({
   form,
   height,
   showCopyButton,
+  readOnly,
 }: {
   name: string
   form: UseFormReturn<any>
   height?: number
   showCopyButton?: boolean
+  readOnly?: boolean
 }) => {
   const { field, fieldState } = useController<Record<string, string>>({
     name,
@@ -60,6 +62,7 @@ export const useField = ({
           onChange={field.onChange}
           height={height}
           showCopyButton={showCopyButton}
+          readOnly={readOnly}
         />
       </>
     ),

src/components/databrowser/components/display/input/use-field.tsx

@@ -13,6 +13,8 @@ export const useAddKey = () => {
 
   const mutation = useMutation({
     mutationFn: async ({ key, type }: { key: string; type: DataType }) => {
+      if (await redis.exists(key)) throw new Error(`Key "${key}" already exists`)
+
       switch (type) {
         case "set": {
           await redis.sadd(key, "value")

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

@@ -1,6 +1,6 @@
 import "@/globals.css"
 
-import { useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { DatabrowserProvider, type RedisCredentials } from "@/store"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { IconDotsVertical } from "@tabler/icons-react"
@@ -17,6 +17,10 @@ import { KeysProvider } from "./hooks/use-keys"
 export const RedisBrowser = ({ token, url }: RedisCredentials) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
 
+  useEffect(() => {
+    queryClient.resetQueries()
+  }, [credentials.url])
+
   return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>

src/components/databrowser/index.tsx

@@ -1,3 +1,6 @@
+import { Portal } from "@radix-ui/react-portal"
+
+import { portalRoot } from "@/lib/portal-root"
 import {
   Toast,
   ToastClose,
@@ -12,18 +15,20 @@ export function Toaster() {
   const { toasts } = useToast()
 
   return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
-      <ToastViewport />
-    </ToastProvider>
+    <Portal container={portalRoot}>
+      <ToastProvider>
+        {toasts.map(({ id, title, description, action, ...props }) => (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        ))}
+        <ToastViewport />
+      </ToastProvider>
+    </Portal>
   )
 }