fix: fix cancel request issues and stream setup issues

components/http/Request.vue

@@ -197,7 +197,7 @@ import {
 } from "~/newstore/RESTSession"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
-import { subscribeToStream, useStream } from "~/helpers/utils/composables"
+import { useStreamSubscriber, useStream } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
@@ -221,6 +221,7 @@ export default defineComponent({
       app: { i18n },
     } = useContext()
     const t = i18n.t.bind(i18n)
+    const { subscribeToStream } = useStreamSubscriber()
 
     const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
     const newMethod = useStream(restMethod$, "", updateRESTMethod)
@@ -240,7 +241,11 @@ export default defineComponent({
         runRESTRequest$(),
         (responseState) => {
           console.log(responseState)
-          updateRESTResponse(responseState)
+          if (loading.value) {
+            // Check exists because, loading can be set to false
+            // when cancelled
+            updateRESTResponse(responseState)
+          }
         },
         () => {
           loading.value = false
@@ -251,6 +256,11 @@ export default defineComponent({
       )
     }
 
+    const cancelRequest = () => {
+      loading.value = false
+      updateRESTResponse(null)
+    }
+
     const updateMethod = (method: string) => {
       updateRESTMethod(method)
     }
@@ -304,7 +314,10 @@ export default defineComponent({
       }
     }
 
-    defineActionHandler("request.send-cancel", newSendRequest)
+    defineActionHandler("request.send-cancel", () => {
+      if (!loading.value) newSendRequest()
+      else cancelRequest()
+    })
     defineActionHandler("request.reset", clearContent)
     defineActionHandler("request.copy-link", copyRequest)
     defineActionHandler("request.method.next", cycleDownMethod)

helpers/utils/composables.ts

@@ -90,33 +90,35 @@ export function pluckRef<T, K extends keyof T>(ref: Ref<T>, key: K): Ref<T[K]> {
 }
 
 /**
- * A composable that listens to the stream and fires update callbacks
- * but respects the component lifecycle
- *
- * @param stream The stream to subscribe to
- * @param next Callback called on value emission
- * @param error Callback called on stream error
- * @param complete Callback called on stream completion
+ * A composable that provides the ability to run streams
+ * and subscribe to them and respect the component lifecycle.
  */
-export function subscribeToStream<T>(
-  stream: Observable<T>,
-  next: (value: T) => void,
-  error: (e: any) => void,
-  complete: () => void
-) {
-  let sub: Subscription | null = null
+export function useStreamSubscriber() {
+  const subs: Subscription[] = []
+
+  const runAndSubscribe = <T>(
+    stream: Observable<T>,
+    next: (value: T) => void,
+    error: (e: any) => void,
+    complete: () => void
+  ) => {
+    const sub = stream.subscribe({
+      next,
+      error,
+      complete: () => {
+        complete()
+        subs.splice(subs.indexOf(sub), 1)
+      },
+    })
+
+    subs.push(sub)
+  }
 
-  // Don't perform anymore updates if the component is
-  // gonna unmount
   onBeforeUnmount(() => {
-    if (sub) {
-      sub.unsubscribe()
-    }
+    subs.forEach((sub) => sub.unsubscribe())
   })
 
-  sub = stream.subscribe({
-    next,
-    error,
-    complete,
-  })
+  return {
+    subscribeToStream: runAndSubscribe,
+  }
 }