From 7f10b8e685f53e85f8767259f1b591280c8955be Mon Sep 17 00:00:00 2001
From: Hichem <hichemdahi57@gmail.com>
Date: Sun, 30 Jun 2024 15:33:59 +0100
Subject: [PATCH] fix: using toRefs to reference payload state nested objects
 to populate useState reactively (#643)

---
 .../devtools/client/components/StateEditor.vue    | 15 ++++++++-------
 .../devtools/client/components/StateGroup.vue     | 12 +++++++++---
 .../devtools/client/pages/modules/payload.vue     |  2 +-
 .../client/pages/modules/runtime-configs.vue      |  6 +++---
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index bdd23a68fc..8b58f1688f 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
+import type { ToRef } from 'vue'
 
 const props = defineProps<{
   name?: string
   open?: boolean
-  state?: any
+  state?: ToRef<any>
   readonly?: boolean
 }>()
 
@@ -17,16 +18,16 @@ const colorMode = useColorMode()
 const proxy = ref()
 
 const state = useState(props.name)
-if (props.state)
-  proxy.value = JSON.parse(JSON.stringify(props.state))
-else if (typeof props.state === 'number' || typeof props.state !== 'string')
-  proxy.value = props.state
+if (props.state?.value)
+  proxy.value = JSON.parse(JSON.stringify(props.state.value))
+else if (typeof props.state?.value === 'number' || typeof props.state?.value !== 'string')
+  proxy.value = props.state?.value
 
 const watcher = watchPausable(
   proxy,
   (value) => {
     if (typeof value !== 'number' && typeof value !== 'string')
-      deepSync(value, props.state)
+      deepSync(value, props.state?.value)
     else
       state.value = value
   },
@@ -48,7 +49,7 @@ function deepSync(from: any, to: any) {
 
 async function refresh() {
   watcher.pause()
-  proxy.value = JSON.parse(JSON.stringify(props.state))
+  proxy.value = JSON.parse(JSON.stringify(props.state?.value))
   await nextTick()
   watcher.resume()
 }
diff --git a/packages/devtools/client/components/StateGroup.vue b/packages/devtools/client/components/StateGroup.vue
index 9da038d7f0..dcc683079f 100644
--- a/packages/devtools/client/components/StateGroup.vue
+++ b/packages/devtools/client/components/StateGroup.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import type { ToRefs } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     state?: Record<string, any>
     prefix?: string
@@ -8,13 +10,17 @@ withDefaults(
     prefix: '',
   },
 )
+
+let stateRefs: ToRefs<typeof props.state>
+if (props.state)
+  stateRefs = toRefs(props.state)
 </script>
 
 <template>
   <div>
-    <div v-if="state && Object.keys(state).length > 0" flex="~ col gap-1">
+    <div v-if="stateRefs && state && Object.keys(state).length > 0" flex="~ col gap-1">
       <StateEditor
-        v-for="value, key of state"
+        v-for="(value, key) of stateRefs"
         :key="key"
         :state="value"
         :name="key.startsWith(prefix) ? key.slice(prefix.length) : key"
diff --git a/packages/devtools/client/pages/modules/payload.vue b/packages/devtools/client/pages/modules/payload.vue
index 983c02ba41..267afdcda8 100644
--- a/packages/devtools/client/pages/modules/payload.vue
+++ b/packages/devtools/client/pages/modules/payload.vue
@@ -66,7 +66,7 @@ async function refreshData(keys?: string[]) {
     >
       <StateEditor
         ml--6
-        :state="payload.functions"
+        :state="toRef(payload.functions)"
       />
     </NSectionBlock>
   </div>
diff --git a/packages/devtools/client/pages/modules/runtime-configs.vue b/packages/devtools/client/pages/modules/runtime-configs.vue
index dbf6882c69..12e3ea9fc2 100644
--- a/packages/devtools/client/pages/modules/runtime-configs.vue
+++ b/packages/devtools/client/pages/modules/runtime-configs.vue
@@ -31,7 +31,7 @@ const privateConfig = computed(() => {
       text="App Config"
       :padding="false"
     >
-      <StateEditor :state="client.app.appConfig" />
+      <StateEditor :state="toRef(client.app.appConfig)" />
     </NSectionBlock>
 
     <NSectionBlock
@@ -39,7 +39,7 @@ const privateConfig = computed(() => {
       text="Public Runtime Config"
       :padding="false"
     >
-      <StateEditor :state="payload.config?.public" />
+      <StateEditor :state="toRef(payload.config?.public)" />
     </NSectionBlock>
 
     <NSectionBlock
@@ -49,7 +49,7 @@ const privateConfig = computed(() => {
       :padding="false"
       description="These values are not exposed to the client. Readonly in the DevTools."
     >
-      <StateEditor :state="privateConfig" readonly />
+      <StateEditor :state="toRef(privateConfig)" readonly />
     </NSectionBlock>
   </div>