change from axios to useFetch for get wishlists

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/App.vue

@@ -38,6 +38,7 @@ const { t } = useI18n()
 const error = ref()
 
 onErrorCaptured((e: unknown) => {
+  console.error(e)
   error.value = e
   return false
 })

src/composables/index.ts

@@ -4,3 +4,4 @@ export * from './useModal'
 export * from './useAxios'
 export * from './useAuth'
 export * from './useEditMode'
+export * from './useFetch'

src/composables/useFetch.ts

@@ -0,0 +1,24 @@
+import { apiConfig } from '@/config'
+import { useAuth } from './useAuth'
+import { createFetch } from '@vueuse/core'
+
+const { token } = useAuth()
+
+export const useFetch = createFetch({
+  baseUrl: apiConfig.baseURL,
+  options: {
+    async beforeFetch({ options }) {
+      if (token.value) {
+        options.headers = {
+          ...options.headers,
+          Authorization: `API-Key ${token.value}`,
+        }
+      }
+
+      return { options }
+    },
+  },
+  fetchOptions: {
+    mode: 'cors',
+  },
+})

src/composables/useWishlistsStore.ts

@@ -1,19 +1,13 @@
-import useAxios from '@/composables/useAxios'
 import { Wishlist } from '@/types'
-import { readonly, ref } from 'vue'
-const { client } = useAxios()
-const prefix = '/wishlist'
+import { Ref } from 'vue'
+import { useFetch } from './useFetch'
 
-const state = ref<Wishlist[]>([])
-
-export const fetch = async (): Promise<void> => {
-  const { data } = await client.get(prefix)
-  state.value = data
-}
+const { isFinished, error, data } = useFetch('/wishlist').json()
 
 export const useWishlistsStore = () => {
   return {
-    state: readonly(state),
-    fetch,
+    state: data as Ref<Wishlist[]>,
+    error,
+    isFinished,
   }
 }

src/views/HomeView.vue

@@ -3,8 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { useWishlistsStore } from '@/composables'
 
 const { t } = useI18n()
-const { state: wishlists, fetch } = useWishlistsStore()
-await fetch()
+const { state, isFinished } = useWishlistsStore()
 </script>
 
 <template>
@@ -12,12 +11,19 @@ await fetch()
     {{ t('common.app-title.text') }}
   </h1>
   <div
-    v-if="wishlists.length > 0"
+    v-if="!isFinished"
+    class="m-20 flex flex-row content-center items-center justify-center space-x-2"
+  >
+    <IconSpinner class="h-4 w-4" />
+    <span> {{ t('common.loading.text') }} </span>
+  </div>
+  <div
+    v-else-if="state.length > 0"
     class="flex flex-row flex-wrap justify-around p-10"
   >
     <router-link
-      v-for="(item, index) in wishlists"
-      :key="index"
+      v-for="item in state"
+      :key="item.id"
       :to="'/' + item.slugUrlText"
     >
       <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />