feat: handle nested object modification

TOSIT-IO · Mar 8, 2023 · 85da0b4 · 85da0b4
1 parent c0ef7aa
commit 85da0b4
Showing 1 changed file with 28 additions and 13 deletions.
diff --git a/src/components/Services/VariablesDisplay.tsx b/src/components/Services/VariablesDisplay.tsx
@@ -75,18 +75,9 @@ function ServiceVariables({ variables }: { variables: Object }) {
     let dirtyValues: Object
     if (showRawMode) {
       const editorValues = JSON.parse(editorRef.current.getValue()) as Object
-      dirtyValues = Object.keys(editorValues).reduce((acc, key) => {
-        if (variables.hasOwnProperty(key)) {
-          if (variables[key] !== editorValues[key]) {
-            acc[key] = editorValues[key]
-          }
-        } else {
-          acc[key] = editorValues[key]
-        }
-        return acc
-      }, {})
+      dirtyValues = getDirtyValues(variables, editorValues)
     } else {
-      dirtyValues = getDirtyValues(dirtyFields, getValues)
+      dirtyValues = getRHFDirtyValues(dirtyFields, getValues)
     }
     if (currentServiceId && currentComponentId) {
       dispatch(
@@ -99,7 +90,7 @@ function ServiceVariables({ variables }: { variables: Object }) {
     if (currentServiceId && !currentComponentId) {
       dispatch(setServiceVariables(dirtyValues))
     }
-    reset(merge(variables, dirtyValues))
+    reset(flattenObject(merge(variables, dirtyValues)))
   }
 
   return (
@@ -114,6 +105,27 @@ function ServiceVariables({ variables }: { variables: Object }) {
   )
 }
 
+function getDirtyValues(baseObject: Object, object: Object) {
+  const dirtyValues = {}
+  Object.keys(object).forEach((key) => {
+    if (baseObject.hasOwnProperty(key)) {
+      if (baseObject[key] !== object[key]) {
+        if (typeof baseObject[key] === 'object') {
+          const dirtySubValues = getDirtyValues(baseObject[key], object[key])
+          if (Object.keys(dirtySubValues).length > 0) {
+            dirtyValues[key] = dirtySubValues
+          }
+        } else {
+          dirtyValues[key] = object[key]
+        }
+      }
+    } else {
+      dirtyValues[key] = object[key]
+    }
+  })
+  return dirtyValues
+}
+
 function VariablesEditionZone({
   variables,
   saveVariables,
@@ -139,7 +151,10 @@ function VariablesEditionZone({
   )
 }
 
-function getDirtyValues(dirtyFields: Object, getValues: (key: string) => any) {
+function getRHFDirtyValues(
+  dirtyFields: Object,
+  getValues: (key: string) => any
+) {
   const dirtyValues = {}
   Object.keys(dirtyFields).forEach((key) => {
     dirtyValues[key] = getValues(key)