refactor: wire remaining request actions

components/app/Shortcuts.vue

@@ -8,6 +8,7 @@
           flex
           p-2
           top-0
+          z-10
           items-center
           sticky
           justify-between

components/app/SlideOver.vue

@@ -10,7 +10,7 @@
     >
       <div
         v-show="show"
-        class="inset-0 transition-opacity z-10 fixed"
+        class="inset-0 transition-opacity z-20 fixed"
         @keydown.esc="close()"
       >
         <div

components/collections/SaveRequest.vue

@@ -11,10 +11,9 @@
         </label>
         <input
           id="selectLabelSaveReq"
-          v-model="requestData.name"
+          v-model="requestName"
           class="input"
           type="text"
-          @keyup.enter="saveRequestAs"
         />
         <label class="font-semibold text-xs px-4 pt-4 pb-4">
           Select Location
@@ -47,6 +46,7 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 import {
   saveRESTRequestAs,
@@ -54,20 +54,23 @@ import {
   editGraphqlRequest,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
+import { getRESTRequest, useRESTRequestName } from "~/newstore/RESTSession"
 
-export default {
+export default defineComponent({
   props: {
     // mode can be either "graphql" or "rest"
     mode: { type: String, default: "rest" },
     show: Boolean,
-    editingRequest: { type: Object, default: () => {} },
+  },
+  setup() {
+    return {
+      requestName: useRESTRequestName(),
+    }
   },
   data() {
     return {
-      defaultRequestName: "Untitled Request",
-      path: "Path will appear here",
       requestData: {
-        name: undefined,
+        name: this.requestName,
         collectionIndex: undefined,
         folderName: undefined,
         requestIndex: undefined,
@@ -114,10 +117,7 @@ export default {
         return
       }
 
-      const requestUpdated = {
-        ...this.$props.editingRequest,
-        name: this.$data.requestData.name,
-      }
+      const requestUpdated = getRESTRequest()
 
       // Filter out all REST file inputs
       if (this.mode === "rest" && requestUpdated.bodyParams) {
@@ -180,5 +180,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/my/Request.vue

@@ -109,6 +109,8 @@
 </template>
 
 <script>
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { setRESTRequest } from "~/newstore/RESTSession"
 export default {
   props: {
     request: { type: Object, default: () => {} },
@@ -158,8 +160,7 @@ export default {
             requestIndex: this.requestIndex,
           },
         })
-      else
-        this.$store.commit("postwoman/selectRequest", { request: this.request })
+      else setRESTRequest(translateToNewRequest(this.request))
     },
     dragStart({ dataTransfer }) {
       this.dragging = !this.dragging

components/collections/teams/Request.vue

@@ -102,6 +102,8 @@
 </template>
 
 <script>
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { setRESTRequest } from "~/newstore/RESTSession"
 export default {
   props: {
     request: { type: Object, default: () => {} },
@@ -145,8 +147,7 @@ export default {
             requestID: this.requestIndex,
           },
         })
-      else
-        this.$store.commit("postwoman/selectRequest", { request: this.request })
+      else setRESTRequest(translateToNewRequest(this.request))
     },
     removeRequest() {
       this.$emit("remove-request", {

components/http/ImportCurl.vue

@@ -102,6 +102,7 @@ export default defineComponent({
 
         setRESTRequest(
           makeRESTRequest({
+            name: "Untitled request",
             endpoint,
             method,
             params,

components/http/Request.vue

@@ -116,7 +116,7 @@
             :label="$t('clear_all')"
             icon="clear_all"
             @click.native="
-              clearContent('', $event)
+              clearContent()
               $refs.sendOptions.tippy().hide()
             "
           />
@@ -127,7 +127,7 @@
         :label="$t('save')"
         :shortcut="[getSpecialKey(), 'S']"
         outline
-        @click.native="newSendRequest"
+        @click.native="showSaveRequestModal = true"
       />
       <span class="inline-flex">
         <tippy
@@ -147,7 +147,7 @@
           </template>
           <input
             id="request-name"
-            v-model="name"
+            v-model="requestName"
             :placeholder="$t('request_name')"
             name="request-name"
             type="text"
@@ -167,7 +167,7 @@
             :label="$t('save_to_collections')"
             icon="create_new_folder"
             @click.native="
-              saveRequest()
+              showSaveRequestModal = true
               $refs.saveOptions.tippy().hide()
             "
           />
@@ -182,21 +182,34 @@
       :show="showCodegenModal"
       @hide-modal="showCodegenModal = false"
     />
+    <CollectionsSaveRequest
+      mode="rest"
+      :show="showSaveRequestModal"
+      @hide-modal="showSaveRequestModal = false"
+    />
   </div>
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   updateRESTResponse,
   restEndpoint$,
   setRESTEndpoint,
   restMethod$,
   updateRESTMethod,
+  resetRESTRequest,
+  useRESTRequestName,
 } from "~/newstore/RESTSession"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      requestName: useRESTRequestName(),
+    }
+  },
   data() {
     return {
       newMethod$: "",
@@ -218,6 +231,7 @@ export default {
       showCodegenModal: false,
       navigatorShare: navigator.share,
       loading: false,
+      showSaveRequestModal: false,
     }
   },
   subscriptions() {
@@ -252,6 +266,33 @@ export default {
         }
       )
     },
+    copyRequest() {
+      if (navigator.share) {
+        const time = new Date().toLocaleTimeString()
+        const date = new Date().toLocaleDateString()
+        navigator
+          .share({
+            title: "Hoppscotch",
+            text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
+            url: window.location.href,
+          })
+          .then(() => {})
+          .catch(() => {})
+      } else {
+        const dummy = document.createElement("input")
+        document.body.appendChild(dummy)
+        dummy.value = window.location.href
+        dummy.select()
+        document.execCommand("copy")
+        document.body.removeChild(dummy)
+        this.$toast.info(this.$t("copied_to_clipboard"), {
+          icon: "done",
+        })
+      }
+    },
+    clearContent() {
+      resetRESTRequest()
+    },
   },
-}
+})
 </script>