fix: fetching issues (parsed json)

fix: make useApiUrl async, use suspense fix(input_tools): sendMessageToBackground fix to properly use browser
simple-login · Oct 25, 2024 · 1e6ecdd · 1e6ecdd
1 parent 0e4d35e
commit 1e6ecdd
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 90 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="app" :class="{ 'ff-overflow-menu': isInsideOverflowMenu }">
-    <SlHeader :use-compact-layout="isInsideOverflowMenu" />
-    <RouterView />
+    <Suspense>
+      <SlHeader :use-compact-layout="isInsideOverflowMenu" />
+    </Suspense>
+    <Suspense>
+      <RouterView />
+      <template #fallback>
+        <SplashScreenAbstract />
+      </template>
+    </Suspense>
     <BToastOrchestrator />
     <BModalOrchestrator />
   </div>
@@ -16,6 +23,7 @@ import { useRouter } from 'vue-router'
 import { useColorMode } from '@vueuse/core'
 import { BToastOrchestrator, BModalOrchestrator } from 'bootstrap-vue-next'
 import { initService as initApiService } from './utils/api'
+import SplashScreenAbstract from './components/SplashScreenAbstract.vue'
 
 const router = useRouter()
 const color = useColorMode({})

diff --git a/src/components/ApiKeySetting.vue b/src/components/ApiKeySetting.vue
@@ -52,7 +52,7 @@ const router = useRouter()
 const hasMovedRoutes = inject(hasMovedRouterKey)
 
 const apiKey = ref('')
-const { apiUrl } = useApiUrl()
+const { apiUrl } = await useApiUrl()
 
 const { execute, data } = useGetUserInfo({
   useFetchOptions: {

diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
@@ -110,7 +110,7 @@ const positionSLButton = ref('right-inside')
 const reportURISLButton = ref('')
 const extension_version = ref('development')
 const theme = ref<Theme | null>(null)
-const { apiUrl } = useApiUrl()
+const { apiUrl } = await useApiUrl()
 
 onMounted(async () => {
   showSLButton.value = await SLStorage.getItem(SLStorage.SETTINGS.SHOW_SL_BUTTON)

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
@@ -115,7 +115,7 @@ const password = ref('')
 const mfaKey = ref('')
 const mfaCode = ref('')
 const isShowMfa = ref(false)
-const { apiUrl } = useApiUrl()
+const { apiUrl } = await useApiUrl()
 
 const sayHiToast = (userName: string) => {
   return toast.success({ message: `Hi ${userName}!` })

diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
@@ -1,7 +1,5 @@
 <template>
   <div ref="contentElem" class="content">
-    <v-dialog />
-
     <!-- Main Page -->
     <div class="container">
       <div v-if="recommendation.show" class="text-center">
@@ -206,7 +204,7 @@ const router = useRouter()
 
 const ALIAS_PREFIX_REGEX = /^[0-9a-z-_.]+$/
 
-const { apiUrl, apiKey } = useApiUrl()
+const { apiUrl, apiKey } = await useApiUrl()
 
 // variables for creating alias
 // hostName obtained from chrome tabs query
@@ -271,11 +269,7 @@ watch(getAliasOptions.data, (aliasOptions) => {
 const { data: mailboxes, execute: executeMailboxes } = useGetMailboxes()
 
 // get alias options and mailboxes
-const getUserOptions = async () => {
-  await Promise.all([getAliasOptions.execute(), executeMailboxes()])
-
-  await resetAndLoadAlias()
-}
+const getUserOptions = () => Promise.all([getAliasOptions.execute(), executeMailboxes()])
 
 const getUserInfo = useGetUserInfo({
   useFetchOptions: {
@@ -302,12 +296,20 @@ const postGetAliases = usePostGetAliases({
 })
 const isFetchingAlias = computed(() => postGetAliases.isFetching.value)
 
+let aliasesAppearsEnd = 0
 const loadAlias = async () => {
   await postGetAliases.execute()
+  if (
+    Array.isArray(postGetAliases.data.value?.aliases) &&
+    postGetAliases.data.value?.aliases.length === 0
+  ) {
+    aliasesAppearsEnd += 1
+  }
   aliasArray.value = mergeAliases(aliasArray.value, postGetAliases.data.value?.aliases || [])
 }
 
 const resetAndLoadAlias = async () => {
+  aliasesAppearsEnd = 0
   currentPage.value = 0
   aliasArray.value = []
   await loadAlias()
@@ -320,7 +322,7 @@ const infiniteList = useInfiniteScroll(
     currentPage.value += 1
     await loadAlias()
   },
-  { distance: 10 }
+  { distance: 500, canLoadMore: () => aliasesAppearsEnd <= 5 }
 )
 
 const resetSearch = async () => {

diff --git a/src/components/SelfHostSetting.vue b/src/components/SelfHostSetting.vue
@@ -28,7 +28,7 @@ import { useApiUrl } from '../composables/useApiUrl'
 
 const toast = useToast()
 
-const { apiUrl } = useApiUrl()
+const { apiUrl } = await useApiUrl()
 
 const saveApiUrl = async () => {
   // remove last slash

diff --git a/src/components/SlHeader.vue b/src/components/SlHeader.vue
@@ -86,17 +86,14 @@ const router = useRouter()
 const hasMovedRoutes = inject(hasMovedRouterKey)
 const canBack = computed(() => hasMovedRoutes?.value || false)
 
-const { apiUrl, apiKey, getApiKey, getApiUrl } = useApiUrl()
+const { apiUrl, apiKey, fetchData: fetchApiData } = await useApiUrl()
 const showDropdownMenu = ref(false)
 const isBeta = !!import.meta.env.VITE_BETA
 const canShowSettingsButton = ref(true)
 const reportBugUri = ref('')
 
 onMounted(async () => {
-  EventManager.addListener(EventManager.EVENT.SETTINGS_CHANGED, async () => {
-    apiKey.value = await getApiKey()
-    apiUrl.value = await getApiUrl()
-  })
+  EventManager.addListener(EventManager.EVENT.SETTINGS_CHANGED, fetchApiData)
 
   setReportBugUri()
 })

diff --git a/src/components/SplashScreen.vue b/src/components/SplashScreen.vue
@@ -1,12 +1,8 @@
 <template>
-  <div v-if="show" style="height: 400px">
-    <div class="splash overlay">
-      <div class="overlay-content">
-        <img class="logo" src="/images/horizontal-logo.svg" /><br />
-        <img class="loading" src="/images/loading.svg" />
-      </div>
-    </div>
-  </div>
+  <SplashScreenAbstract v-if="show">
+    <img class="logo" src="/images/horizontal-logo.svg" /><br />
+    <img class="loading" src="/images/loading.svg" />
+  </SplashScreenAbstract>
 </template>
 
 <script setup lang="ts">
@@ -17,14 +13,15 @@ import { getDeviceName } from '../utils'
 import { useRouter } from 'vue-router'
 import { API_ON_ERR, usePostGetApiKeyFromCookie } from '../composables/useApi'
 import { useApiUrl } from '../composables/useApiUrl'
+import SplashScreenAbstract from './SplashScreenAbstract.vue'
 
 defineOptions({
   name: 'SlLoading'
 })
 
 const router = useRouter()
 
-const { apiKey, getApiKey } = useApiUrl({
+const { apiKey, getApiKey } = await useApiUrl({
   immediate: false
 })
 const show = ref(false)

diff --git a/src/components/SplashScreenAbstract.vue b/src/components/SplashScreenAbstract.vue
@@ -0,0 +1,9 @@
+<template>
+  <div style="height: 400px">
+    <div class="splash overlay">
+      <div class="overlay-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/composables/useApi.ts b/src/composables/useApi.ts
@@ -17,6 +17,7 @@ const useFetch = createFetch({
   options: {
     immediate: false,
     async beforeFetch(ctx) {
+      ctx.url = `${SETTINGS.apiUrl}${ctx.url}`
       if (!SETTINGS.apiKey) {
         await reloadSettings()
       }
@@ -103,7 +104,9 @@ export const useGetUserInfo = ({
       return ctx
     },
     ...useFetchOptions
-  }).get()
+  })
+    .get()
+    .json()
 
 export const useGetLogout = ({
   options = {},
@@ -121,7 +124,9 @@ export const useGetLogout = ({
       return ctx
     },
     ...useFetchOptions
-  }).get()
+  })
+    .get()
+    .json()
 
 export type LoginReturn = {
   name: string
@@ -153,7 +158,9 @@ export const usePostLogin = ({
     },
     immediate: false,
     ...useFetchOptions
-  }).post(data)
+  })
+    .post(data)
+    .json()
 
 export type MFAReturn = {
   name: string
@@ -183,7 +190,9 @@ export const usePostMFA = ({
     },
     immediate: false,
     ...useFetchOptions
-  }).post(data)
+  })
+    .post(data)
+    .json()
 
 export type UseGetAliasOptionsReturn = {
   recommendation:
@@ -217,7 +226,9 @@ export const useGetAliasOptions = ({
       },
       ...useFetchOptions
     }
-  ).get()
+  )
+    .get()
+    .json()
 
 export type UseGetAliasReturn = Mailbox[]
 
@@ -236,7 +247,9 @@ export const useGetMailboxes = ({
       return ctx
     },
     ...useFetchOptions
-  }).get()
+  })
+    .get()
+    .json()
 
 export type UsePostGetAliasesReturn = {
   aliases: Alias[]
@@ -267,7 +280,9 @@ export const usePostGetAliases = ({
       },
       ...useFetchOptions
     }
-  ).post(data)
+  )
+    .post(data)
+    .json()
 
 export type UsePostNewAliasReturn = {
   error?: unknown
@@ -301,7 +316,9 @@ export const usePostNewAlias = ({
       },
       ...useFetchOptions
     }
-  ).post(data)
+  )
+    .post(data)
+    .json()
 
 export type UsePostNewRandomAliasReturn = {
   error?: unknown
@@ -334,7 +351,9 @@ export const usePostNewRandomAlias = ({
       },
       ...useFetchOptions
     }
-  ).post(data)
+  )
+    .post(data)
+    .json()
 
 export type UsePostToggleAliasReturn = {
   enabled: boolean
@@ -362,7 +381,9 @@ export const usePostToggleAlias = ({
       },
       ...useFetchOptions
     }
-  ).post()
+  )
+    .post()
+    .json()
 
 export const usePutEditAlias = ({
   aliasId,
@@ -395,7 +416,9 @@ export const usePutEditAlias = ({
       },
       ...useFetchOptions
     }
-  ).put(data)
+  )
+    .put(data)
+    .json()
 
 export const useDeleteAlias = ({
   aliasId,
@@ -419,7 +442,9 @@ export const useDeleteAlias = ({
       },
       ...useFetchOptions
     }
-  ).delete()
+  )
+    .delete()
+    .json()
 
 export type CreateReverseAliasReturn = {
   contact: string
@@ -453,7 +478,9 @@ export const usePostCreateReverseAlias = ({
       },
       ...useFetchOptions
     }
-  ).post(data)
+  )
+    .post(data)
+    .json()
 
 export type GetApiKeyFromCookieReturn = {
   api_key: string
@@ -484,4 +511,6 @@ export const usePostGetApiKeyFromCookie = ({
     },
     immediate: false,
     ...useFetchOptions
-  }).post(data)
+  })
+    .post(data)
+    .json()
diff --git a/src/composables/useApiUrl.ts b/src/composables/useApiUrl.ts
@@ -1,7 +1,7 @@
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import SLStorage from '../utils/SLStorage'
 
-export const useApiUrl = (opts: { immediate?: boolean } = { immediate: true }) => {
+export const useApiUrl = async (opts: { immediate?: boolean } = { immediate: true }) => {
   const apiUrl = ref('')
   const apiUrlLoading = ref(false)
   const apiKey = ref('')
@@ -10,26 +10,33 @@ export const useApiUrl = (opts: { immediate?: boolean } = { immediate: true }) =
   const getApiUrl = async () => {
     try {
       apiUrlLoading.value = true
-      return await SLStorage.getItem(SLStorage.SETTINGS.API_URL)
+      const resp = await SLStorage.getItem(SLStorage.SETTINGS.API_URL)
+      apiUrl.value = resp
+      return resp
     } finally {
       apiUrlLoading.value = false
     }
   }
   const getApiKey = async () => {
     try {
       apiKeyLoading.value = true
-      return await SLStorage.getItem(SLStorage.SETTINGS.API_KEY)
+      const resp = await SLStorage.getItem(SLStorage.SETTINGS.API_KEY)
+      apiKey.value = resp
+      return resp
     } finally {
       apiKeyLoading.value = false
     }
   }
 
-  onMounted(async () => {
+  const fetchData = async () => {
     if (opts.immediate) {
-      apiUrl.value = await getApiUrl()
-      apiKey.value = await getApiKey()
+      await Promise.all([getApiUrl(), getApiKey()])
     }
-  })
+  }
+
+  if (opts.immediate) {
+    await fetchData()
+  }
 
-  return { apiUrl, apiKey, apiUrlLoading, apiKeyLoading, getApiUrl, getApiKey }
+  return { apiUrl, apiKey, apiUrlLoading, apiKeyLoading, getApiUrl, getApiKey, fetchData }
 }