refactor: helper function abstracting error messages

For actions over environments.
hoppscotch · jamesgeorge007 · Sep 25, 2024 · Sep 6, 2024 · Sep 9, 2024 · Sep 9, 2024
commit 5e66642c876c0300fd2cdbdcab4a8fd6d43549df
diff --git a/packages/hoppscotch-common/src/components/environments/Add.vue b/packages/hoppscotch-common/src/components/environments/Add.vue
@@ -71,20 +71,21 @@
 
 <script lang="ts" setup>
 import { Environment } from "@hoppscotch/data"
+import { useService } from "dioc/vue"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
 import { ref, watch } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
 import { GQLError } from "~/helpers/backend/GQLClient"
+import { updateTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import {
   addEnvironmentVariable,
   addGlobalEnvVariable,
 } from "~/newstore/environments"
-import * as TE from "fp-ts/TaskEither"
-import { pipe } from "fp-ts/function"
-import { updateTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
 import { RESTTabService } from "~/services/tab/rest"
-import { useService } from "dioc/vue"
 
 const t = useI18n()
 const toast = useToast()
@@ -181,7 +182,7 @@ const addEnvironment = async () => {
       TE.match(
         (err: GQLError<string>) => {
           console.error(err)
-          toast.error(`${getErrorMessage(err)}`)
+          toast.error(t(getEnvActionErrorMessage(err)))
         },
         () => {
           hideModal()
@@ -203,18 +204,4 @@ const addEnvironment = async () => {
 
   hideModal()
 }
-
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    case "Forbidden resource":
-      return t("profile.no_permission")
-    default:
-      return t("error.something_went_wrong")
-  }
-}
 </script>
diff --git a/packages/hoppscotch-common/src/components/environments/Selector.vue b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -147,7 +147,7 @@
                 class="flex flex-col items-center py-4"
               >
                 <icon-lucide-help-circle class="svg-icons mb-4" />
-                {{ getErrorMessage(teamAdapterError) }}
+                {{ t(getEnvActionErrorMessage(teamAdapterError)) }}
               </div>
             </HoppSmartTab>
           </HoppSmartTabs>
@@ -302,6 +302,7 @@ import { useService } from "dioc/vue"
 import { computed, onMounted, ref, watch } from "vue"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
+import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 import { useReadonlyStream, useStream } from "~/composables/stream"
 import { invokeAction } from "~/helpers/actions"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -590,6 +591,7 @@ onMounted(() => {
 const envSelectorActions = ref<TippyComponent | null>(null)
 const envQuickPeekActions = ref<TippyComponent | null>(null)
 
+<<<<<<< HEAD
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
     return t("error.network_error")
@@ -603,6 +605,9 @@ const getErrorMessage = (err: GQLError<string>) => {
 }
 
 const globalEnvs = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
+=======
+const globalEnvs = useReadonlyStream(globalEnv$, [])
+>>>>>>> 6e3b8ac3 (refactor: helper function abstracting error messages)
 
 const environmentVariables = computed(() => {
   if (selectedEnv.value.variables) {

diff --git a/packages/hoppscotch-common/src/components/environments/index.vue b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -65,6 +65,7 @@ import {
   createTeamEnvironment,
   deleteTeamEnvironment,
 } from "~/helpers/backend/mutations/TeamEnvironment"
+import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import {
   createEnvironment,
@@ -226,7 +227,7 @@ const duplicateGlobalEnvironment = async (
     duplicateGlobalEnvironmentLoading.value = true
 
     await pipe(
-      await createTeamEnvironment(
+      createTeamEnvironment(
         JSON.stringify(envVariables),
         workspace.value.teamID,
         `Global - ${t("action.duplicate")}`
@@ -235,9 +236,7 @@ const duplicateGlobalEnvironment = async (
         (err: GQLError<string>) => {
           console.error(err)
 
-          // TODO: Expose the below helper function from team context and add loading state for Global environment context menu
-          toast.error(`${getErrorMessage(err)}`)
-
+          toast.error(t(getEnvActionErrorMessage(err)))
           duplicateGlobalEnvironmentLoading.value = false
         },
         () => {

diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -165,6 +165,7 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import { platform } from "~/platform"
 import { useService } from "dioc/vue"
 import { SecretEnvironmentService } from "~/services/secret-environment.service"
+import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 
 type EnvironmentVariable = {
   id: number
@@ -405,7 +406,7 @@ const saveEnvironment = async () => {
         TE.match(
           (err: GQLError<string>) => {
             console.error(err)
-            toast.error(`${getErrorMessage(err)}`)
+            toast.error(t(getEnvActionErrorMessage(err)))
             isLoading.value = false
           },
           (res) => {
@@ -453,7 +454,7 @@ const saveEnvironment = async () => {
         TE.match(
           (err: GQLError<string>) => {
             console.error(err)
-            toast.error(`${getErrorMessage(err)}`)
+            toast.error(t(getEnvActionErrorMessage(err)))
             isLoading.value = false
           },
           () => {
@@ -474,18 +475,4 @@ const hideModal = () => {
   selectedEnvOption.value = "variables"
   emit("hide-modal")
 }
-
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    case "team_environment/short_name":
-      return t("environment.short_name")
-    default:
-      return t("error.something_went_wrong")
-  }
-}
 </script>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
@@ -136,6 +136,7 @@ import {
   deleteTeamEnvironment,
   createDuplicateEnvironment as duplicateEnvironment,
 } from "~/helpers/backend/mutations/TeamEnvironment"
+import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 import { exportAsJSON } from "~/helpers/import-export/export/environment"
 import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import { SecretEnvironmentService } from "~/services/secret-environment.service"
@@ -183,7 +184,7 @@ const removeEnvironment = () => {
     TE.match(
       (err: GQLError<string>) => {
         console.error(err)
-        toast.error(`${getErrorMessage(err)}`)
+        toast.error(t(getEnvActionErrorMessage(err)))
       },
       () => {
         toast.success(`${t("team_environment.deleted")}`)
@@ -199,26 +200,12 @@ const duplicateEnvironments = () => {
     TE.match(
       (err: GQLError<string>) => {
         console.error(err)
-        toast.error(`${getErrorMessage(err)}`)
+        toast.error(t(getEnvActionErrorMessage(err)))
       },
       () => {
         toast.success(`${t("environment.duplicated")}`)
       }
     )
   )()
 }
-
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    case "team_environment/short_name":
-      return t("environment.short_name")
-    default:
-      return t("error.something_went_wrong")
-  }
-}
 </script>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -104,7 +104,7 @@
       class="flex flex-col items-center py-4"
     >
       <icon-lucide-help-circle class="svg-icons mb-4" />
-      {{ getErrorMessage(adapterError) }}
+      {{ t(getEnvActionErrorMessage(adapterError)) }}
     </div>
     <EnvironmentsTeamsDetails
       :show="showModalDetails"
@@ -146,6 +146,7 @@ import IconImport from "~icons/lucide/folder-down"
 import { defineActionHandler } from "~/helpers/actions"
 import { TeamWorkspace } from "~/services/workspace.service"
 import { sortTeamEnvironmentsAlphabetically } from "~/helpers/utils/sortEnvironmentsAlphabetically"
+import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 
 const t = useI18n()
 
@@ -201,18 +202,6 @@ const resetSelectedData = () => {
   secretOptionSelected.value = false
 }
 
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    default:
-      return t("error.something_went_wrong")
-  }
-}
-
 const showEnvironmentProperties = (environmentID: string) => {
   showEnvironmentsPropertiesModal.value = true
   selectedEnvironmentID.value = environmentID

diff --git a/packages/hoppscotch-common/src/helpers/error-messages/index.ts b/packages/hoppscotch-common/src/helpers/error-messages/index.ts
@@ -0,0 +1,18 @@
+import { GQLError } from "../backend/GQLClient"
+
+export const getEnvActionErrorMessage = (err: GQLError<string>) => {
+  if (err.type === "network_error") {
+    return "error.network_error"
+  }
+
+  switch (err.error) {
+    case "team_environment/not_found":
+      return "team_environment.not_found"
+    case "team_environment/short_name":
+      return "environment.short_name"
+    case "Forbidden resource":
+      return "profile.no_permission"
+    default:
+      return "error.something_went_wrong"
+  }
+}