chore: extend loading state to all importer types

hoppscotch · Sep 17, 2024 · 64656c8 · 64656c8
1 parent 6f65896
commit 64656c8
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 29 deletions.
diff --git a/packages/hoppscotch-common/src/components/collections/ImportExport.vue b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
@@ -62,6 +62,8 @@ const isInsomniaImporterInProgress = ref(false)
 const isOpenAPIImporterInProgress = ref(false)
 const isRESTImporterInProgress = ref(false)
 const isPersonalCollectionImporterInProgress = ref(false)
+const isHarImporterInProgress = ref(false)
+const isGistImporterInProgress = ref(false)
 
 const t = useI18n()
 const toast = useToast()
@@ -282,10 +284,12 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
       step: UrlSource({
         caption: "import.from_url",
         onImportFromURL: async (content) => {
+          isOpenAPIImporterInProgress.value = true
+
           const res = await hoppOpenAPIImporter([content])()
 
           if (E.isRight(res)) {
-            handleImportToStore(res.right)
+            await handleImportToStore(res.right)
 
             platform.analytics?.logEvent({
               platform: "rest",
@@ -296,7 +300,10 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
           } else {
             showImportFailedError()
           }
+
+          isOpenAPIImporterInProgress.value = false
         },
+        isLoading: isOpenAPIImporterInProgress,
       }),
     },
   ],
@@ -391,10 +398,12 @@ const HoppGistImporter: ImporterOrExporter = {
         return
       }
 
+      isGistImporterInProgress.value = true
+
       const res = await hoppRESTImporter(content.right)()
 
       if (E.isRight(res)) {
-        handleImportToStore(res.right)
+        await handleImportToStore(res.right)
 
         platform.analytics?.logEvent({
           platform: "rest",
@@ -405,7 +414,10 @@ const HoppGistImporter: ImporterOrExporter = {
       } else {
         showImportFailedError()
       }
+
+      isGistImporterInProgress.value = false
     },
+    isLoading: isGistImporterInProgress,
   }),
 }
 
@@ -558,22 +570,26 @@ const HARImporter: ImporterOrExporter = {
     caption: "import.from_file",
     acceptedFileTypes: ".har",
     onImportFromFile: async (content) => {
+      isHarImporterInProgress.value = true
+
       const res = await harImporter(content)
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        await handleImportToStore(res.right)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_COLLECTION",
+          importer: "import.from_har",
+          platform: "rest",
+          workspaceType: isTeamWorkspace.value ? "team" : "personal",
+        })
+      } else {
         showImportFailedError()
-        return
       }
 
-      handleImportToStore(res.right)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
-        importer: "import.from_har",
-        platform: "rest",
-        workspaceType: isTeamWorkspace.value ? "team" : "personal",
-      })
+      isHarImporterInProgress.value = false
     },
+    isLoading: isHarImporterInProgress,
   }),
 }
 

diff --git a/packages/hoppscotch-common/src/components/environments/ImportExport.vue b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -63,6 +63,7 @@ const currentUser = useReadonlyStream(
 const isPostmanImporterInProgress = ref(false)
 const isInsomniaImporterInProgress = ref(false)
 const isRESTImporterInProgress = ref(false)
+const isGistImporterInProgress = ref(false)
 
 const isEnvironmentGistExportInProgress = ref(false)
 
@@ -217,21 +218,26 @@ const EnvironmentsImportFromGIST: ImporterOrExporter = {
         return
       }
 
+      isGistImporterInProgress.value = true
+
       const res = await hoppEnvImporter(environments.right)()
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        await handleImportToStore(res.right)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_ENVIRONMENT",
+          platform: "rest",
+          workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        })
+        emit("hide-modal")
+      } else {
         showImportFailedError()
-        return
       }
 
-      handleImportToStore(res.right)
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: workspaceType.value,
-      })
-      emit("hide-modal")
+      isGistImporterInProgress.value = false
     },
+    isLoading: isGistImporterInProgress,
   }),
 }
 

diff --git a/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue b/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue
@@ -26,16 +26,16 @@
       <HoppButtonPrimary
         class="w-full"
         :label="t('import.title')"
-        :disabled="!hasURL"
-        :loading="isFetchingUrl"
+        :disabled="disableImportCTA"
+        :loading="isFetchingUrl || loading"
         @click="fetchUrlData"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "~/composables/toast"
 import axios, { AxiosResponse } from "axios"
@@ -44,10 +44,14 @@ const t = useI18n()
 
 const toast = useToast()
 
-const props = defineProps<{
-  caption: string
-  fetchLogic?: (url: string) => Promise<AxiosResponse<any>>
-}>()
+const props = withDefaults(
+  defineProps<{
+    caption: string
+    fetchLogic?: (url: string) => Promise<AxiosResponse<any>>
+    loading?: boolean
+  }>(),
+  { fetchLogic: undefined, loading: false }
+)
 
 const emit = defineEmits<{
   (e: "importFromURL", content: unknown): void
@@ -62,6 +66,8 @@ watch(inputChooseGistToImportFrom, (url) => {
   hasURL.value = !!url
 })
 
+const disableImportCTA = computed(() => !hasURL.value || props.loading)
+
 const urlFetchLogic =
   props.fetchLogic ??
   async function (url: string) {

diff --git a/packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GistSource.ts b/packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GistSource.ts
@@ -6,18 +6,20 @@ import * as E from "fp-ts/Either"
 import { z } from "zod"
 
 import { v4 as uuidv4 } from "uuid"
+import { Ref } from "vue"
 
 export function GistSource(metadata: {
   caption: string
   onImportFromGist: (
     importResult: E.Either<string, string[]>
   ) => any | Promise<any>
+  isLoading?: Ref<boolean>
 }) {
   const stepID = uuidv4()
 
   return defineStep(stepID, UrlImport, () => ({
     caption: metadata.caption,
-    onImportFromURL: (gistResponse: Record<string, unknown>) => {
+    onImportFromURL: (gistResponse: unknown) => {
       const fileSchema = z.object({
         files: z.record(z.object({ content: z.string() })),
       })
@@ -36,6 +38,7 @@ export function GistSource(metadata: {
       metadata.onImportFromGist(E.right(contents))
     },
     fetchLogic: fetchGistFromUrl,
+    loading: metadata.isLoading?.value,
   }))
 }
 

diff --git a/packages/hoppscotch-common/src/helpers/import-export/import/import-sources/UrlSource.ts b/packages/hoppscotch-common/src/helpers/import-export/import/import-sources/UrlSource.ts
@@ -2,11 +2,13 @@ import UrlImport from "~/components/importExport/ImportExportSteps/UrlImport.vue
 import { defineStep } from "~/composables/step-components"
 
 import { v4 as uuidv4 } from "uuid"
+import { Ref } from "vue"
 
 export function UrlSource(metadata: {
   caption: string
   onImportFromURL: (content: string) => any | Promise<any>
   fetchLogic?: (url: string) => Promise<any>
+  isLoading?: Ref<boolean>
 }) {
   const stepID = uuidv4()
 
@@ -17,5 +19,6 @@ export function UrlSource(metadata: {
         metadata.onImportFromURL(content)
       }
     },
+    loading: metadata.isLoading?.value,
   }))
 }