some changes...

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

src/App.vue

@@ -1,8 +1,43 @@
 <template>
   <div class="app max-w-[900px] mx-auto p-10">
     <main>
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <template v-if="Component">
+          <keep-alive>
+            <div
+              v-if="error"
+              class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
+            >
+              <IconError class="w-4 h-4" />
+              <span>Es ist ein Fehler aufgetreten...</span>
+            </div>
+            <suspense v-else>
+              <template #default>
+                <component :is="Component"></component>
+              </template>
+              <template #fallback>
+                <div
+                  class="flex flex-row space-x-2 items-center content-center justify-center m-20"
+                >
+                  <IconSpinner class="w-4 h-4" />
+                  <span> Lade... </span>
+                </div>
+              </template>
+            </suspense>
+          </keep-alive>
+        </template>
+      </router-view>
     </main>
     <modal-overlay />
   </div>
 </template>
+<script setup lang="ts">
+import { onErrorCaptured } from 'vue'
+import useAxios from './composables/useAxios'
+import { IconSpinner, IconError } from '@/components/icons'
+const { error } = useAxios()
+onErrorCaptured((e: any) => {
+  error.value = e
+  return true
+})
+</script>

src/composables/useAxios.ts

@@ -0,0 +1,45 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import { apiConfig } from '@/config'
+import { ref } from 'vue'
+
+const isLoading = ref(false)
+const error = ref(null)
+
+const config: AxiosRequestConfig = {
+  baseURL: apiConfig.baseURL,
+}
+
+const client: AxiosInstance = axios.create(config)
+
+client.interceptors.request.use(
+  function (config) {
+    isLoading.value = true
+    error.value = null
+    return config
+  },
+  function (err) {
+    isLoading.value = false
+    error.value = err
+    return Promise.reject(err)
+  }
+)
+
+client.interceptors.response.use(
+  function (response) {
+    isLoading.value = false
+    return response
+  },
+  function (err) {
+    isLoading.value = false
+    error.value = err
+    return Promise.reject(err)
+  }
+)
+
+export default () => {
+  return {
+    client,
+    isLoading,
+    error,
+  }
+}

src/composables/useWishlistStore.ts

@@ -1,35 +1,23 @@
-import apiService from '@/services/apiService'
+import useAxios from '@/composables/useAxios'
 import { Wishlist, WishlistItem } from '@/types'
 import { ref } from 'vue'
-const apiClient = apiService.getClient()
+const { client } = useAxios()
 
 const refState = ref<Wishlist | any>({})
-const isLoading = ref(false)
-const hasError = ref(false)
 
-const fetchBySlugUrl = async (slugText: string): Promise<void> => {
+const fetch = async (slugText: string): Promise<void> => {
-  isLoading.value = true
+  const { data } = await client.get(`/wishlist/${slugText}`)
-  try {
-    const { data } = await apiClient.get(`/wishlist/${slugText}`)
   refState.value = data
-  } catch (error: any) {
-    console.error(error)
-    hasError.value = true
-  } finally {
-    isLoading.value = false
-  }
 }
 
 const updateItem = async (item: WishlistItem): Promise<void> => {
-  await apiClient.put(`/wishlist/${item.wishlistId}/item/${item.id}`, item)
+  await client.put(`/wishlist/${item.wishlistId}/item/${item.id}`, item)
 }
 
-export const useWishlistStore = (slugText: string) => {
+export const useWishlistStore = () => {
-  fetchBySlugUrl(slugText)
   return {
     list: refState,
-    isLoading,
+    fetch,
-    hasError,
     updateItem,
   }
 }

src/composables/useWishlistsStore.ts

@@ -1,30 +1,19 @@
-import apiService from '@/services/apiService'
+import useAxios from '@/composables/useAxios'
 import { Wishlist } from '@/types'
 import { ref } from 'vue'
-const apiClient = apiService.getClient()
+const { client } = useAxios()
 const prefix = '/wishlist'
 
 const refState = ref<Wishlist[]>([])
-const isLoading = ref(false)
-const hasError = ref(false)
 
-export const loadAll = async (): Promise<void> => {
+export const fetch = async (): Promise<void> => {
-  isLoading.value = true
+  const { data } = await client.get(prefix)
-  try {
-    const { data } = await apiClient.get(prefix)
   refState.value = data
-  } catch (error: any) {
-    hasError.value = true
-  } finally {
-    isLoading.value = false
-  }
 }
 
 export const useWishlistsStore = () => {
-  loadAll()
   return {
     lists: refState,
-    hasError,
+    fetch,
-    isLoading,
   }
 }

src/services/apiService.ts

@@ -1,14 +0,0 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
-import { apiConfig } from '@/config'
-
-const config: AxiosRequestConfig = {
-  baseURL: apiConfig.baseURL,
-}
-
-const client: AxiosInstance = axios.create(config)
-
-export default {
-  getClient: () => {
-    return client
-  },
-}

src/views/DetailView.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { WishlistItem as WishlistItemType } from '@/types'
-import { computed, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useTitle } from '@vueuse/core'
 import { useWishlistStore, useModal } from '@/composables'
 import Tile from '@/components/Tile.vue'
-import { IconSpinner, IconError } from '@/components/icons'
 import WishlistItem from '@/components/WishlistItem.vue'
 
 const route = useRoute()
 const modal = useModal()
 
-const { list, isLoading, hasError, updateItem } = useWishlistStore(
+const { list, fetch, updateItem } = useWishlistStore()
-  route.params.slug as string
+await fetch(route.params.slug as string)
-)
 
 const notBoughtItems = computed(() => {
   return list.value.items.filter(
@@ -34,21 +31,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
 </script>
 
 <template>
-  <div
+  <div v-if="list.id">
-    v-if="isLoading"
-    class="flex flex-row space-x-2 items-center content-center justify-center m-20"
-  >
-    <IconSpinner class="w-4 h-4" />
-    <span> Lade Wunschliste... </span>
-  </div>
-  <div
-    v-else-if="hasError"
-    class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
-  >
-    <IconError class="w-4 - h-4" />
-    <span> Es ist ein Fehler aufgetreten... </span>
-  </div>
-  <div v-else>
     <div
       class="flex flex-col md:flex-row space-x-0 md:space-x-6 space-y-2 md:space-y-0 items-center"
     >

src/views/HomeView.vue

@@ -1,27 +1,13 @@
 <script setup lang="ts">
 import Tile from '@/components/Tile.vue'
-import { IconSpinner, IconError } from '@/components/icons'
 import { useWishlistsStore } from '@/composables'
-const { lists, isLoading, hasError } = useWishlistsStore()
+const { lists, fetch } = useWishlistsStore()
+await fetch()
 </script>
 
 <template>
   <h1 class="text-3xl text-center">Wunschlisten</h1>
-  <div
+  <div v-if="lists" class="flex flex-row flex-wrap justify-around p-10">
-    v-if="isLoading"
-    class="flex flex-row space-x-2 items-center content-center justify-center m-20"
-  >
-    <IconSpinner class="w-4 h-4" />
-    <span> Lade Wunschlisten... </span>
-  </div>
-  <div
-    v-else-if="hasError"
-    class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
-  >
-    <IconError class="w-4 - h-4" />
-    <span> Es ist ein Fehler aufgetreten... </span>
-  </div>
-  <div v-else class="flex flex-row flex-wrap justify-around p-10">
     <router-link
       v-for="(item, index) in lists"
       :key="index"