Merge branch 'refactor/ui' of https://github.com/hoppscotch/hoppscotch into refactor/ui

components/http/Headers.vue

@@ -159,7 +159,8 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   restHeaders$,
   addRESTHeader,
@@ -168,21 +169,20 @@ import {
   deleteAllRESTHeaders,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import { getSettingSubject } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      headers$: useReadonlyStream(restHeaders$, []),
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+    }
+  },
   data() {
     return {
       commonHeaders,
-      headers$: [],
-    }
-  },
-  subscriptions() {
-    return {
-      headers$: restHeaders$,
-      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
-        "EXPERIMENTAL_URL_BAR_ENABLED"
-      ),
     }
   },
   watch: {
@@ -208,16 +208,16 @@ export default {
     addHeader() {
       addRESTHeader({ key: "", value: "", active: true })
     },
-    updateHeader(index, item) {
+    updateHeader(index: number, item: HoppRESTHeader) {
       console.log(index, item)
       updateRESTHeader(index, item)
     },
-    deleteHeader(index) {
+    deleteHeader(index: number) {
       deleteRESTHeader(index)
     },
     clearContent() {
       deleteAllRESTHeaders()
     },
   },
-}
+})
 </script>

components/http/Parameters.vue

@@ -180,7 +180,10 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restParams$,
   addRESTParam,
@@ -188,20 +191,13 @@ import {
   deleteRESTParam,
   deleteAllRESTParams,
 } from "~/newstore/RESTSession"
-import { getSettingSubject } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
 
-export default {
-  data() {
+export default defineComponent({
+  setup() {
     return {
-      params$: [],
-    }
-  },
-  subscriptions() {
-    return {
-      params$: restParams$,
-      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
-        "EXPERIMENTAL_URL_BAR_ENABLED"
-      ),
+      params$: useReadonlyStream(restParams$, []),
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
     }
   },
   watch: {
@@ -226,15 +222,15 @@ export default {
     addParam() {
       addRESTParam({ key: "", value: "", active: true })
     },
-    updateParam(index, item) {
+    updateParam(index: number, item: HoppRESTParam) {
       updateRESTParam(index, item)
     },
-    deleteParam(index) {
+    deleteParam(index: number) {
       deleteRESTParam(index)
     },
     clearContent() {
       deleteAllRESTParams()
     },
   },
-}
+})
 </script>

components/http/Response.vue

@@ -5,19 +5,23 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import { restResponse$ } from "~/newstore/RESTSession"
 
-export default {
-  subscriptions() {
+export default defineComponent({
+  setup() {
+    const response = useReadonlyStream(restResponse$, null)
+
+    const loading = computed(
+      () => response.value === null || response.value.type === "loading"
+    )
+
     return {
-      response: restResponse$,
+      response,
+      loading,
     }
   },
-  computed: {
-    loading() {
-      return this.response === null || this.response.type === "loading"
-    },
-  },
-}
+})
 </script>