From e9ba536c7d2be0080afd9540f0e8cfaa2dd0d8a2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 11:32:10 +0200
Subject: [PATCH] feat(gui-v2): add `useApi` composable

# What's changed?

* useApi provides a loading, error and response ref
* also provides event cb for error and response
---
 .../nc-gui-v2/components/dlg/ViewCreate.vue   |  4 +-
 packages/nc-gui-v2/composables/useApi.ts      | 63 +++++++++++++++++++
 packages/nc-gui-v2/tsconfig.json              |  5 ++
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useApi.ts

diff --git a/packages/nc-gui-v2/components/dlg/ViewCreate.vue b/packages/nc-gui-v2/components/dlg/ViewCreate.vue
index a8533d1a81..f099498d31 100644
--- a/packages/nc-gui-v2/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/ViewCreate.vue
@@ -99,9 +99,7 @@ function init() {
 async function onSubmit() {
   const isValid = await formValidator?.validateFields()
 
-  if (!isValid) return
-
-  if (form.type) {
+  if (isValid && form.type) {
     const _meta = unref(meta)
 
     if (!_meta || !_meta.id) return
diff --git a/packages/nc-gui-v2/composables/useApi.ts b/packages/nc-gui-v2/composables/useApi.ts
new file mode 100644
index 0000000000..9a29cb9b41
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useApi.ts
@@ -0,0 +1,63 @@
+import type { AxiosError, AxiosResponse } from 'axios'
+import type { Api } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import type { EventHook } from '@vueuse/core'
+import { createEventHook, ref, useNuxtApp } from '#imports'
+
+interface UseApiReturn<D = any, R = any> {
+  api: Api<any>
+  isLoading: Ref<boolean>
+  error: Ref<AxiosError<D, R> | null>
+  response: Ref<AxiosResponse<D, R> | null>
+  onError: EventHook<AxiosError<D, R>>['on']
+  onResponse: EventHook<AxiosResponse<D, R>>['on']
+}
+
+/** todo: add props? */
+type UseApiProps = never
+
+export function useApi<Data = any, RequestConfig = any>(_?: UseApiProps): UseApiReturn<Data, RequestConfig> {
+  const isLoading = ref(false)
+
+  const error = ref(null)
+
+  const response = ref<any>(null)
+
+  const errorHook = createEventHook<AxiosError<Data, RequestConfig>>()
+
+  const responseHook = createEventHook<AxiosResponse<Data, RequestConfig>>()
+
+  const { $api } = useNuxtApp()
+
+  $api.instance.interceptors.request.use(
+    (config) => {
+      error.value = null
+      response.value = null
+      isLoading.value = true
+
+      return config
+    },
+    (requestError) => {
+      errorHook.trigger(requestError)
+      error.value = requestError
+      response.value = null
+      isLoading.value = false
+    },
+  )
+
+  $api.instance.interceptors.response.use(
+    (apiResponse) => {
+      responseHook.trigger(apiResponse as AxiosResponse<Data, RequestConfig>)
+      // can't properly typecast
+      response.value = apiResponse
+      isLoading.value = false
+    },
+    (apiError) => {
+      errorHook.trigger(apiError)
+      error.value = apiError
+      isLoading.value = false
+    },
+  )
+
+  return { api: $api, isLoading, response, error, onError: errorHook.on, onResponse: responseHook.on }
+}
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 65f7cd02c4..71f63bc254 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -12,11 +12,16 @@
     "forceConsistentCasingInFileNames": true,
     "types": [
       "@intlify/vite-plugin-vue-i18n/client",
+      "vue/macro",
       "vue-i18n",
       "unplugin-icons/types/vue",
       "nuxt-windicss"
     ]
   },
+  "files": [
+    "nuxt-shim.d.ts",
+    "windi.config.ts"
+  ],
   "exclude": [
     "node_modules",
     "dist",