fix: cache refresh when editing list item

Author: ytkimirti

src/components/databrowser/components/display/display-header.tsx

@@ -20,7 +20,7 @@ export const DisplayHeader = ({
   const { setSelectedListItem } = useDatabrowserStore()
 
   const handleAddItem = () => {
-    setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true })
+    setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true })
   }
 
   return (

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

@@ -1,3 +1,4 @@
+import { useEffect } from "react"
 import type { SelectedItem } from "@/store"
 import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
@@ -7,6 +8,7 @@ import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 import { SimpleTooltip } from "@/components/ui/tooltip"
 
+import { useFetchListItems } from "../../hooks"
 import { useEditListItem } from "../../hooks/use-edit-list-item"
 import { headerLabels } from "./display-list"
 import { useField } from "./input/use-field"
@@ -30,19 +32,41 @@ export const ListEditDisplay = ({
 const ListEditForm = ({
   type,
   dataKey,
-  item: { key: itemKey, value: itemValue, isNew },
+  item: { key: itemKey, isNew },
 }: {
   type: ListDataType
   dataKey: string
   item: SelectedItem
 }) => {
+  const query = useFetchListItems({
+    type,
+    dataKey,
+  })
+  // Search in pages for item value
+  const findValue = () => {
+    for (const page of query.data?.pages ?? []) {
+      const item = page.keys.find((item) => item.key === itemKey)
+      // Check if item has a value property before returning it
+      if (item && "value" in item) return item.value as string
+    }
+    return
+  }
+  const itemValue = findValue()
+
   const form = useForm({
     defaultValues: {
       key: itemKey,
       value: itemValue,
     },
   })
 
+  useEffect(() => {
+    form.reset({
+      key: itemKey,
+      value: itemValue,
+    })
+  }, [itemKey, itemValue])
+
   const { mutateAsync: editItem, isPending } = useEditListItem()
   const { setSelectedListItem } = useDatabrowserStore()
 
@@ -70,6 +94,7 @@ const ListEditForm = ({
               name="key"
               height={type === "set" ? 250 : 100}
               label={keyLabel}
+              data={itemKey}
             />
           )}
 
@@ -82,6 +107,7 @@ const ListEditForm = ({
                 name="value"
                 height={type === "list" ? 250 : 100}
                 label={valueLabel}
+                data={itemValue ?? ""}
               />
             )
           )}
@@ -142,12 +168,14 @@ const FormItem = ({
   label,
   height,
   readOnly,
+  data,
 }: {
   name: string
   label: string
   isNumber?: boolean
   height?: number
   readOnly?: boolean
+  data: string
 }) => {
   const form = useFormContext()
   const { editor, selector } = useField({
@@ -156,6 +184,7 @@ const FormItem = ({
     height: height,
     showCopyButton: true,
     readOnly,
+    data,
   })
 
   return (

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

@@ -82,7 +82,7 @@ export const ListItems = ({
           data-item-key={key}
           data-item-value={value}
           onClick={() => {
-            setSelectedListItem({ key, value })
+            setSelectedListItem({ key })
           }}
           className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
         >

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

@@ -17,7 +17,7 @@ export const useField = ({
   height?: number
   showCopyButton?: boolean
   readOnly?: boolean
-  data?: string
+  data: string
 }) => {
   const { field, fieldState } = useController<Record<string, string>>({
     name,
@@ -30,11 +30,11 @@ export const useField = ({
 
   // Attempt to format JSON everytime the underlying data changes
   useEffect(() => {
-    if (!checkIsValidJSON(field.value)) {
+    if (!checkIsValidJSON(data)) {
       return
     }
 
-    form.setValue(name, formatJSON(field.value), {
+    form.setValue(name, formatJSON(data), {
       shouldDirty: false,
     })
   }, [data])

src/store.tsx

@@ -59,7 +59,6 @@ export type SearchFilter = {
 
 export type SelectedItem = {
   key: string
-  value?: string
   isNew?: boolean
 }
 
@@ -68,7 +67,7 @@ type DatabrowserStore = {
   setSelectedKey: (key: string | undefined) => void
 
   selectedListItem?: SelectedItem
-  setSelectedListItem: (item?: { key: string; value?: string; isNew?: boolean }) => void
+  setSelectedListItem: (item?: { key: string; isNew?: boolean }) => void
 
   search: SearchFilter
   setSearch: (search: SearchFilter) => void