fix: crash on switch from formdata to non-formdata

components/http/Body.vue

@@ -45,26 +45,27 @@
         </tippy>
       </span>
     </div>
-    <HttpBodyParameters v-if="contentType == 'multipart/form-data'" />
+    <HttpBodyParameters v-if="contentType === 'multipart/form-data'" />
     <HttpRawBody v-else :content-type="contentType" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { pluckRef } from "~/helpers/utils/composables"
-import { useRESTRequestBody } from "~/newstore/RESTSession"
+import { useStream } from "~/helpers/utils/composables"
+import { restContentType$, setRESTContentType } from "~/newstore/RESTSession"
 import { knownContentTypes } from "~/helpers/utils/contenttypes"
 
 export default defineComponent({
   setup() {
-    return {
-      contentType: pluckRef(useRESTRequestBody(), "contentType"),
-    }
-  },
-  data() {
     return {
       validContentTypes: Object.keys(knownContentTypes),
+
+      contentType: useStream(
+        restContentType$,
+        "application/json",
+        setRESTContentType
+      ),
     }
   },
 })

newstore/RESTSession.ts

@@ -229,19 +229,23 @@ const dispatchers = defineDispatchers({
     } else if (newContentType !== "multipart/form-data") {
       // Going from formdata to non-formdata, discard contents and set empty string
       return {
-        ...curr.request,
-        body: <HoppRESTReqBody>{
-          contentType: newContentType,
-          body: "",
+        request: {
+          ...curr.request,
+          body: <HoppRESTReqBody>{
+            contentType: newContentType,
+            body: "",
+          },
         },
       }
     } else {
       // form-data to form-data ? just set the content type ¯\_(ツ)_/¯
       return {
-        ...curr.request,
-        body: <HoppRESTReqBody>{
-          contentType: newContentType,
-          body: curr.request.body.body,
+        request: {
+          ...curr.request,
+          body: <HoppRESTReqBody>{
+            contentType: newContentType,
+            body: curr.request.body.body,
+          },
         },
       }
     }
@@ -559,6 +563,15 @@ export function updateFormDataEntry(index: number, entry: FormDataKeyValue) {
   })
 }
 
+export function setRESTContentType(newContentType: ValidContentTypes) {
+  restSessionStore.dispatch({
+    dispatcher: "setContentType",
+    payload: {
+      newContentType,
+    },
+  })
+}
+
 export function deleteAllFormDataEntries() {
   restSessionStore.dispatch({
     dispatcher: "deleteAllFormDataEntries",
@@ -617,6 +630,11 @@ export const restPreRequestScript$ = restSessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
+export const restContentType$ = restRequest$.pipe(
+  pluck("body", "contentType"),
+  distinctUntilChanged()
+)
+
 export const restTestScript$ = restSessionStore.subject$.pipe(
   pluck("request", "testScript"),
   distinctUntilChanged()