Merge pull request #8 from upstash/DX-1841

fix: auto json formatting not working in list items

Author: dev-ups

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

@@ -1,4 +1,3 @@
-import { useEffect } from "react"
 import type { SelectedItem } from "@/store"
 import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
@@ -60,13 +59,6 @@ const ListEditForm = ({
     },
   })
 
-  useEffect(() => {
-    form.reset({
-      key: itemKey,
-      value: itemValue,
-    })
-  }, [itemKey, itemValue])
-
   const { mutateAsync: editItem, isPending } = useEditListItem()
   const { setSelectedListItem } = useDatabrowserStore()
 

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

@@ -48,20 +48,15 @@ const EditorDisplayForm = ({
 
   // Updates default values after submit
   useEffect(() => {
-    form.reset(
-      { value: data },
-      {
-        keepValues: false,
-      }
-    )
+    form.reset({ value: data })
   }, [data])
 
   const { editor, selector } = useField({ name: "value", form, data })
 
   const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type)
 
   const handleCancel = () => {
-    form.reset()
+    form.reset({ value: data })
   }
 
   return (

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

@@ -30,13 +30,15 @@ export const useField = ({
 
   // Attempt to format JSON everytime the underlying data changes
   useEffect(() => {
-    if (!checkIsValidJSON(data)) {
-      return
+    if (contentType === "JSON" && checkIsValidJSON(data)) {
+      form.setValue(name, formatJSON(data), {
+        shouldDirty: false,
+      })
+    } else {
+      form.setValue(name, data, {
+        shouldDirty: false,
+      })
     }
-
-    form.setValue(name, formatJSON(data), {
-      shouldDirty: false,
-    })
   }, [data])
 
   const handleTypeChange = (type: ContentType) => {